创建线性渐变

GDI+ 提供水平、垂直和对角线线性渐变。 默认情况下,线性渐变中的颜色会均匀变化。 但是,可以自定义线性渐变,以使颜色以不均匀的方式变化。

水平线性渐变

以下示例使用水平线性渐变画笔填充线条、椭圆形和矩形:

LinearGradientBrush linGrBrush(
   Point(0, 10),
   Point(200, 10),
   Color(255, 255, 0, 0),   // opaque red
   Color(255, 0, 0, 255));  // opaque blue

Pen pen(&linGrBrush);

graphics.DrawLine(&pen, 0, 10, 200, 10);
graphics.FillEllipse(&linGrBrush, 0, 30, 200, 100);
graphics.FillRectangle(&linGrBrush, 0, 155, 500, 30);

LinearGradientBrush 构造函数接收四个参数:两个点和两个颜色。 第一个点 (0, 10) 与第一种颜色(红色)相关联,第二个点 (200, 10) 与第二种颜色(蓝色)相关联。 如你所料,从 (0, 10) 到 (200, 10) 绘制的直线逐渐从红色变为蓝色。

10分 (50分、10分) (200分、10分) 并不重要。 重要的是,这两个点具有相同的第二个坐标 - 连接它们的线条是水平坐标。 随着水平坐标从 0 变为 200,椭圆形和矩形也逐渐从红色变为蓝色。

下图显示了直线、椭圆形和矩形。 请注意,随着水平坐标增至 200 以上,颜色渐变会自行重复。

图中显示了填充线条和椭圆的水平渐变,以及一个长于椭圆形的矩形

自定义线性渐变

在前面的示例中,从水平坐标 0 移动到水平坐标 200 时,颜色分量会线性变化。 例如,第一个坐标介于 0 和 200 之间的点的蓝色分量将介于 0 和 255 之间。

通过 GDI+,可以调整颜色从渐变的一个边缘到另一边缘的变化方式。 假设要根据下表创建一个从黑色变为红色的渐变画笔。

水平坐标 RGB 分量
0 (0, 0, 0)
40 (128, 0, 0)
200 (255, 0, 0)

 

请注意,当水平坐标仅为 0 到 200 范围的 20% 时,红色分量处于半强度。

以下示例调用 LinearGradientBrush 对象的 LinearGradientBrush::SetBlend 方法,将三个相对强度与三个相对位置相关联。 如上表所示,0.5 的相对强度与 0.2 的相对位置相关联。 代码用渐变画笔填充了一个椭圆形和一个矩形。

LinearGradientBrush linGrBrush(
   Point(0, 10),
   Point(200, 10),
   Color(255, 0, 0, 0),     // opaque black 
   Color(255, 255, 0, 0));  // opaque red

REAL relativeIntensities[] = {0.0f, 0.5f, 1.0f};
REAL relativePositions[]   = {0.0f, 0.2f, 1.0f};

linGrBrush.SetBlend(relativeIntensities, relativePositions, 3);

graphics.FillEllipse(&linGrBrush, 0, 30, 200, 100);
graphics.FillRectangle(&linGrBrush, 0, 155, 500, 30);

下图显示了生成的椭圆形和矩形。

显示填充椭圆的水平渐变和长于椭圆的矩形的插图

对角线线性渐变

前面示例中的渐变是水平的;也就是说,沿着任何水平线移动时,颜色会逐渐变化。 你也可以定义垂直渐变和对角渐变。 以下代码将 (0, 0) 和 (200, 100) 的点传递给 LinearGradientBrush 构造函数。 蓝色与 (0, 0) 相关联,绿色与 (200, 100) 相关联。 用线性渐变画笔填充了一条直线(笔宽为 10)和一个椭圆形。

LinearGradientBrush linGrBrush(
   Point(0, 0),
   Point(200, 100),
   Color(255, 0, 0, 255),   // opaque blue
   Color(255, 0, 255, 0));  // opaque green

Pen pen(&linGrBrush, 10);

graphics.DrawLine(&pen, 0, 0, 600, 300);
graphics.FillEllipse(&linGrBrush, 10, 100, 200, 100);

下图显示了直线和椭圆形。 请注意,当沿着与穿过 (0, 0) 和 (200, 100) 的线平行的任何线移动时,椭圆形中的颜色会逐渐变化。

显示填充椭圆和对角线的对角渐变的插图