65.9K
CodeProject 正在变化。 阅读更多。
Home

Gradient Maker 应用程序

Timothy Marshal-Nichols
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.72/5 (30投票s)

2005年9月13日

4分钟阅读

viewsIcon

94973

downloadIcon

3393

许多网页都有彩色的渐变横幅作为背景。GradientMaker 是一个简单的图形实用工具，可让您创建此类图像。您还可以向这些图像添加文本。这些也可以用作横幅、背景或徽标。

引言

.NET绘图包包含一些用于在对象中绘制渐变的有用类。其中两个类是 LinearGradientBrush 和 PathGradientBrush。我们需要的对象位于 Drawing2D 命名空间中。将此命名空间导入您的渐变绘制类会很有用。

Visual C#

    using System.Drawing.Drawing2D;

Visual Basic .NET

    Imports System.Drawing.Drawing2D

绘制线性渐变

LinearGradientBrush 描述沿直线从起始颜色到结束颜色的渐变。直线的斜率由 LinearGradientMode 定义。在以下每个示例中，我们都假设我们正在绘制在已放置在 Windows 窗体上的 Panel 对象上。在 C# 示例中，这称为 panel_Gradient，在 Visual Basic 示例中，这称为 Panel_Gradient。我们创建 Rectangle 来定义绘制对象的大小和位置。然后使用矩形和一些颜色创建 LinearGradientBrush。我们还需要设置渐变模式。最后，我们使用画笔绘制矩形。

Visual C#

    Graphics graphics = panel_Gradient.CreateGraphics();
    Rectangle rectBrush = new Rectangle( 0, 0, 400, 200);
    LinearGradientBrush brush;
    brush = new LinearGradientBrush(rectBrush, Color.Black, 
                   Color.White, LinearGradientMode.Horizontal);
    graphics.FillRectangle(brush, rectBrush);
    graphics.Dispose();

Visual Basic .NET

    Dim graphics As Graphics = Panel_Gradient.CreateGraphics()
    Dim rectBrush As New Rectangle(0, 0, 400, 200)
    Dim brush As LinearGradientBrush
    brush = New LinearGradientBrush(rectBrush, Color.Black, _
                    Color.White, LinearGradientMode.Horizontal)
    graphics.FillRectangle(brush, rectBrush)
    graphics.Dispose()

在这里，Graphics 对象的大小和颜色是硬编码的。在 GradientMaker 中，我们从窗口上的控件获取这些参数。此外，在 GradientMaker 中，我们需要在用户更改设置或窗体需要重绘时进行重绘。

绘制路径渐变

PathGradientBrush 描述从中心点到结束颜色的渐变。渐变沿点路径到结束颜色。在此示例中，我们从矩形的四个角创建 PointF 对象数组。使用点数组作为路径创建 PathGradientBrush。然后我们设置中心颜色，并将渐变的中心点设置为矩形的中心。最后，我们设置周围颜色，并用画笔和我们的矩形绘制矩形。

Visual C#

    Graphics graphics = panel_Gradient.CreateGraphics();
    Rectangle rectBrush = new Rectangle( 0, 0, 400, 200);
    PathGradientBrush brush;
    PointF[] rect = { new PointF(rectBrush.Left, rectBrush.Top), 
                     new PointF(rectBrush.Left, rectBrush.Height),
                     new PointF(rectBrush.Width, rectBrush.Height),
                     new PointF(rectBrush.Width, rectBrush.Top), 
                     new PointF(rectBrush.Left, rectBrush.Top) };
    brush = new PathGradientBrush(rect);
    brush.CenterColor = Color.White;
    brush.CenterPoint = new PointF((float)rectBrush.Width / 2.0f, 
                                  (float)rectBrush.Height / 2.0f );
    brush.SurroundColors = new Color[1] { Color.Black };
    graphics.FillRectangle(brush, rectBrush);
    graphics.Dispose();

Visual Basic .NET

    Dim graphics As Graphics = Panel_Gradient.CreateGraphics()
    Dim rectBrush As New Rectangle(0, 0, 400, 200)
    Dim brush As PathGradientBrush
    Dim rect() As PointF = {New PointF(rectBrush.Left, rectBrush.Top), _
                          New PointF(rectBrush.Left, rectBrush.Height), _
                          New PointF(rectBrush.Width, rectBrush.Height), _
                          New PointF(rectBrush.Width, rectBrush.Top), _
                          New PointF(rectBrush.Left, rectBrush.Top)}
    brush = New PathGradientBrush(rect)
    brush.CenterColor = Color.White
    brush.CenterPoint = New PointF(rectBrush.Width / 2.0F, _
                                        rectBrush.Height / 2.0F)
    brush.SurroundColors = New Color() {Color.Black}
    graphics.FillRectangle(brush, rectBrush)
    graphics.Dispose()

绘制混合

混合控制颜色在渐变中的着色。着色由两个 float 数组控制，称为 Factors 和 Positions。您可以在 Blend 对象的构造函数中定义这些数组的大小。Positions 数组定义每个因子在渐变线上的百分比。百分比缩放到 0.0f 到 1.0f 的范围。因此 0.5f 是渐变的一半。数组的第一个元素必须是 0.0f，最后一个元素是 1.0f。Factors 数组中的元素设置混合过程中每个位置的结束颜色在渐变中的百分比。Factors 中的每个元素都在 0.0f 到 1.0f 的范围内。因此 0.0f 代表起始颜色的 100%，1.0f 代表结束颜色的 100%。创建渐变的方法与上述示例相同。此示例中额外的代码用于创建 Blend 对象。设置 Positions 和 Factors，然后将其添加到画笔中。

Visual C#

    Graphics graphics = panel_Gradient.CreateGraphics();
    Rectangle rectBrush = new Rectangle( 0, 0, 400, 200);
    LinearGradientBrush brush;
    brush = new LinearGradientBrush(rectBrush, Color.Black, 
                  Color.White, LinearGradientMode.Horizontal);
    // Add blend
    Blend blend = new Blend(9);
    blend.Positions[0] = 0.0f;
    blend.Positions[1] = 0.125f;
    blend.Positions[2] = 0.25f;
    blend.Positions[3] = 0.375f;
    blend.Positions[4] = 0.5f;
    blend.Positions[5] = 0.625f;
    blend.Positions[6] = 0.75f;
    blend.Positions[7] = 0.875f;
    blend.Positions[8] = 1.0f;
    blend.Factors[0] = 0.0f;
    blend.Factors[1] = 0.2f;
    blend.Factors[2] = 0.4f;
    blend.Factors[3] = 0.6f;
    blend.Factors[4] = 0.7f;
    blend.Factors[5] = 0.8f;
    blend.Factors[6] = 0.9f;
    blend.Factors[7] = 0.95f;
    blend.Factors[8] = 1.0f;
    brush.Blend = blend;
    graphics.FillRectangle(brush, rectBrush);
    graphics.Dispose();

Visual Basic .NET

    Dim graphics As Graphics = Panel_Gradient.CreateGraphics()
    Dim rectBrush As New Rectangle(0, 0, 400, 200)
    Dim brush As LinearGradientBrush
    brush = New LinearGradientBrush(rectBrush, Color.Black, _
                     Color.White, LinearGradientMode.Horizontal)
    ' Add blend
    Dim blend As New Blend(9)
    blend.Positions(0) = 0.0F
    blend.Positions(2) = 0.25F
    blend.Positions(3) = 0.375F
    blend.Positions(4) = 0.5F
    blend.Positions(5) = 0.625F
    blend.Positions(6) = 0.75F
    blend.Positions(7) = 0.875F
    blend.Positions(8) = 1.0F
    blend.Factors(0) = 0.0F
    blend.Factors(1) = 0.2F
    blend.Factors(2) = 0.4F
    blend.Factors(3) = 0.6F
    blend.Factors(4) = 0.7F
    blend.Factors(5) = 0.8F
    blend.Factors(6) = 0.9F
    blend.Factors(7) = 0.95F
    blend.Factors(8) = 1.0F
    brush.Blend = blend
    graphics.FillRectangle(brush, rectBrush)
    graphics.Dispose()

在此示例中，位置沿渐变线性增加。但因子形成一个近似曲线。

绘制文本渐变

文本也可以使用渐变画笔绘制。此示例首先在给定字体的情况下查找容纳文本的矩形的大小。然后使用大小和文本位置创建矩形。然后我们使用与上述示例相同的​​方法创建渐变画笔。最后，我们使用 DrawString 方法，并使用我们创建的字体、画笔和矩形。

Visual C#

    Graphics graphics = panel_Gradient.CreateGraphics();
    string text = "automationControls";
    Font textFont = new Font("Arial", 24);
    SizeF textSize = graphics.MeasureString(text, textFont);
    PointF textLocation = new PointF(10.0f, 10.0f);
    RectangleF textArea = new RectangleF(textLocation, textSize);
    LinearGradientBrush textBrush;
    textBrush = new LinearGradientBrush(textArea, Color.Black, 
                   Color.White, LinearGradientMode.Horizontal);
    graphics.DrawString(text, textFont, textBrush, textArea);
    graphics.Dispose();

Visual Basic .NET

    Dim graphics As Graphics = Panel_Gradient.CreateGraphics()
    Dim text As String = "automationControls"
    Dim textFont As New Font("Arial", 24)
    Dim textSize As SizeF = graphics.MeasureString(text, textFont)
    Dim textLocation As New PointF(10.0F, 10.0F)
    Dim textArea As New RectangleF(textLocation, textSize)
    Dim textBrush As LinearGradientBrush
    textBrush = New LinearGradientBrush(textArea, Color.Black, _
                        Color.White, LinearGradientMode.Horizontal)
    graphics.DrawString(text, textFont, textBrush, textArea)
    graphics.Dispose()

结论

创建渐图的基本对象是 LinearGradientBrush 和 PathGradientBrush。这些可以用于 Graphics 对象的绘制方法。GradientMaker 应用程序使用这些对象，并允许您从窗体上的控件设置参数。您可以查看 GradientMaker 的源代码，该源代码可从 automationControls 获取。

历史

  • 版本 1.0：2005 年 9 月 - AutomationControls 项目：05_0002 GradientMaker。
  • 版本 1.1：2005 年 9 月 - 向应用程序和帮助文件添加了以下选项
    • 多行文本
    • 文本对齐
    • 文本旋转
    • 文本颜色的 Alpha 选项

    这些选项是在 Kevin Ashaman 的评论之后添加的。

  • 版本 1.2：2005 年 10 月 - 向应用程序和帮助文件添加了以下选项
    • 如果图像溢出窗口，则允许仅滚动图像（而不是整个窗口）
    • 示例图像混合
    • 文本的抗锯齿模式
    • 示例文本混合

    这些选项是在 Axel Reitschin 和 F. W. Southern 的评论之后添加的。

© . All rights reserved.