创建路径渐变

PathGradientBrush 类允许您自定义使用逐渐变化的颜色填充形状的方式。 PathGradientBrush 对象具有边界路径和中心点。 可以为中心点指定一种颜色,为边界指定另一种颜色。 还可以为边界上的多个点中的每个点指定单独的颜色。

注意

在 GDI+ 中,路径是由 GraphicsPath 对象维护的线条和曲线序列。 有关 GDI+ 路径的详细信息,请参阅 路径构造和绘制路径

 

以下示例用路径渐变画笔填充椭圆。 中心颜色设置为蓝色,边界颜色设置为水蓝色。

// Create a path that consists of a single ellipse.
GraphicsPath path;
path.AddEllipse(0, 0, 140, 70);

// Use the path to construct a brush.
PathGradientBrush pthGrBrush(&path);

// Set the color at the center of the path to blue.
pthGrBrush.SetCenterColor(Color(255, 0, 0, 255));

// Set the color along the entire boundary of the path to aqua.
Color colors[] = {Color(255, 0, 255, 255)};
int count = 1;
pthGrBrush.SetSurroundColors(colors, &count);

graphics.FillEllipse(&pthGrBrush, 0, 0, 140, 70);

下图显示了填充的椭圆形。

显示带渐变填充的椭圆的插图

默认情况下,路径渐变画笔不会延伸到路径边界之外。 如果使用路径渐变画笔填充超出路径边界的形状,则不会填充路径外部的屏幕区域。 下图显示了将前面的代码中的 Graphics::FillEllipse 调用更改为 graphics.FillRectangle(&pthGrBrush, 0, 10, 200, 40)时会发生什么情况。

显示上一个椭圆的水平切片的插图

指定边界上的点

以下示例从星形路径构造路径渐变画笔。 代码调用 PathGradientBrush::SetCenterColor 方法,将star质心处的颜色设置为红色。 然后,代码调用 PathGradientBrush::SetSurroundColors 方法,以指定 (存储在数组中各个点) 颜色数组中的各种颜色。 最后的代码语句使用路径渐变画笔填充星形路径。

// Put the points of a polygon in an array.
Point points[] = {Point(75, 0),    Point(100, 50), 
                  Point(150, 50),  Point(112, 75),
                  Point(150, 150), Point(75, 100), 
                  Point(0, 150),   Point(37, 75), 
                  Point(0, 50),    Point(50, 50)};

// Use the array of points to construct a path.
GraphicsPath path;
path.AddLines(points, 10);

// Use the path to construct a path gradient brush.
PathGradientBrush pthGrBrush(&path);

// Set the color at the center of the path to red.
pthGrBrush.SetCenterColor(Color(255, 255, 0, 0));

// Set the colors of the points in the array.
Color colors[] = {Color(255, 0, 0, 0),   Color(255, 0, 255, 0),
                  Color(255, 0, 0, 255), Color(255, 255, 255, 255), 
                  Color(255, 0, 0, 0),   Color(255, 0, 255, 0), 
                  Color(255, 0, 0, 255), Color(255, 255, 255, 255),
                  Color(255, 0, 0, 0),   Color(255, 0, 255, 0)};

int count = 10;
pthGrBrush.SetSurroundColors(colors, &count);

// Fill the path with the path gradient brush.
graphics.FillPath(&pthGrBrush, &path);

下图显示了填充star。

图中显示了一个五角star,从中央的红色填充到每个点的各种颜色star

以下示例基于点数组构造路径渐变画笔。 将颜色分配给数组中的五个点中的每一个。 如果用直线连接五个点,你将得到一个五面多边形。 还将颜色分配给该多边形的中心 (质心) ,在此示例中,中心 (80,75) 设置为白色。 示例中的最后一个代码语句使用路径渐变画笔填充矩形。

用于填充矩形的颜色在 (80、75) 为白色,并且随着从 (80、75) 向数组中的点移动而逐渐变化。 例如,从 (80, 75) 移动到 (0, 0) 时,颜色逐渐从白色更改为红色,并且从 (80、75) 移动到 (160, 0) 时,颜色逐渐从白色更改为绿色。

// Construct a path gradient brush based on an array of points.
PointF ptsF[] = {PointF(0.0f, 0.0f), 
                 PointF(160.0f, 0.0f), 
                 PointF(160.0f, 200.0f),
                 PointF(80.0f, 150.0f),
                 PointF(0.0f, 200.0f)};

PathGradientBrush pBrush(ptsF, 5);

// An array of five points was used to construct the path gradient
// brush. Set the color of each point in that array.
Color colors[] = {Color(255, 255, 0, 0),  // (0, 0) red
                  Color(255, 0, 255, 0),  // (160, 0) green
                  Color(255, 0, 255, 0),  // (160, 200) green
                  Color(255, 0, 0, 255),  // (80, 150) blue
                  Color(255, 255, 0, 0)}; // (0, 200) red

int count = 5;
pBrush.SetSurroundColors(colors, &count);

// Set the center color to white.
pBrush.SetCenterColor(Color(255, 255, 255, 255));

// Use the path gradient brush to fill a rectangle.
graphics.FillRectangle(&pBrush, Rect(0, 0, 180, 220));

请注意,前面的代码中没有 GraphicsPath 对象。 示例中的特定 PathGradientBrush 构造函数接收指向点数组的指针,但不需要 GraphicsPath 对象。 另请注意,路径渐变画笔用于填充矩形,而不是路径。 矩形大于用于定义画笔的路径,因此某些矩形不会由画笔绘制。 下图显示了 (虚线) 矩形,以及路径渐变画笔绘制的矩形部分。

插图显示一个由虚线边界的矩形,部分由多色渐变绘制

自定义路径渐变

自定义路径渐变画笔的一种方法是设置其焦点比例。 焦点比例指定位于主路径内的内部路径。 中心颜色显示在该内部路径内的任何地方,而不是仅在中心点显示。 若要设置路径渐变画笔的焦点比例,请调用 PathGradientBrush::SetFocusScales 方法。

以下示例基于椭圆路径创建路径渐变画笔。 代码将边界颜色设置为蓝色,将中心颜色设置为水蓝色,然后使用路径渐变画笔填充椭圆路径。

接下来,代码设置路径渐变画笔的焦点比例。 x 焦点比例设置为 0.3,y 焦点比例设置为 0.8。 代码调用 Graphics 对象的 Graphics::TranslateTransform 方法,以便后续调用 Graphics::FillPath 填充位于第一个椭圆右侧的椭圆。

若要查看焦点比例的效果,请想象一个小椭圆,它与主椭圆共享其中心。 小(内)椭圆是主椭圆(围绕其中心)水平缩放 0.3 倍,垂直缩放 0.8 倍。 当你从外椭圆的边界移动到内椭圆的边界时,颜色会逐渐从蓝色变为水蓝色。 当你从内椭圆的边界移动到共享中心时,颜色仍为水蓝色。

// Create a path that consists of a single ellipse.
GraphicsPath path;
path.AddEllipse(0, 0, 200, 100);

// Create a path gradient brush based on the elliptical path.
PathGradientBrush pthGrBrush(&path);
pthGrBrush.SetGammaCorrection(TRUE);

// Set the color along the entire boundary to blue.
Color color(Color(255, 0, 0, 255));
INT num = 1;
pthGrBrush.SetSurroundColors(&color, &num);

// Set the center color to aqua.
pthGrBrush.SetCenterColor(Color(255, 0, 255, 255));
 
// Use the path gradient brush to fill the ellipse. 
graphics.FillPath(&pthGrBrush, &path);

// Set the focus scales for the path gradient brush.
pthGrBrush.SetFocusScales(0.3f, 0.8f);

// Use the path gradient brush to fill the ellipse again.
// Show this filled ellipse to the right of the first filled ellipse.
graphics.TranslateTransform(220.0f, 0.0f);
graphics.FillPath(&pthGrBrush, &path);

下图显示了上述代码的输出。 左侧的椭圆仅在中心点为水蓝色。 右侧的椭圆在内部路径内的任何地方均为水蓝色。

显示从水到蓝色的两个椭圆的插图:第一个椭圆几乎没有水;第二个

自定义路径渐变画笔的另一种方法是指定预设颜色数组和内插位置数组。

以下示例基于三角形创建路径渐变画笔。 该代码调用路径渐变画笔的 PathGradientBrush::SetInterpolationColors 方法,以指定一个插值颜色数组, (深绿色、水、蓝色) ,以及一个 (0、0.25、1) 的内插位置数组。 当你从三角形的边界移动到中心点时,颜色逐渐从深绿色更改为水蓝色,然后从水蓝色到蓝色。 从深绿色到水蓝色的变化发生在从深绿色到蓝色的 25% 的距离处。

// Vertices of the triangle
Point points[] = {Point(100, 0), 
                  Point(200, 200), 
                  Point(0, 200)};

// No GraphicsPath object is created. The PathGradient
// brush is constructed directly from the array of points.
PathGradientBrush pthGrBrush(points, 3);

Color presetColors[] = {
   Color(255, 0, 128, 0),    // Dark green
   Color(255, 0, 255, 255),  // Aqua
   Color(255, 0, 0, 255)};   // Blue

REAL interpPositions[] = {
   0.0f,   // Dark green is at the boundary of the triangle.
   0.25f,  // Aqua is 25 percent of the way from the boundary
           // to the center point.
   1.0f};  // Blue is at the center point.
                  
pthGrBrush.SetInterpolationColors(presetColors, interpPositions, 3);

// Fill a rectangle that is larger than the triangle
// specified in the Point array. The portion of the
// rectangle outside the triangle will not be painted.
graphics.FillRectangle(&pthGrBrush, 0, 0, 200, 200);

下图显示了上述代码的输出。

插图显示一个三角形,该三角形的阴影从中央的蓝色到水,边缘为绿色

设置中心点

默认情况下,路径渐变画笔的中心点位于用于构造画笔的路径的质心。 可以通过调用 PathGradientBrush 类的 PathGradientBrush::SetCenterPoint 方法更改 中心点 的位置。

以下示例基于椭圆创建路径渐变画笔。 椭圆的中心在 (70, 35),但路径渐变画笔的中心点设置为 (120, 40)。

// Create a path that consists of a single ellipse.
GraphicsPath path;
path.AddEllipse(0, 0, 140, 70);

// Use the path to construct a brush.
PathGradientBrush pthGrBrush(&path);

// Set the center point to a location that is not the centroid of the path.
pthGrBrush.SetCenterPoint(Point(120, 40));

// Set the color at the center point to blue.
pthGrBrush.SetCenterColor(Color(255, 0, 0, 255));

// Set the color along the entire boundary of the path to aqua.
Color colors[] = {Color(255, 0, 255, 255)};
int count = 1;
pthGrBrush.SetSurroundColors(colors, &count);

graphics.FillEllipse(&pthGrBrush, 0, 0, 140, 70);

下图显示了填充的椭圆和路径渐变画笔的中心点。

显示从一端附近的中心点填充从蓝色到水的椭圆的插图

可将路径渐变画笔的中心点设置为用于构造画笔的路径外部的位置。 在前面的代码中,如果将 对 PathGradientBrush::SetCenterPointpthGrBrush.SetCenterPoint(Point(145, 35))调用替换为 ,将得到以下结果。

显示从椭圆边缘外部的中心点从红色到黄色填充的椭圆的插图

在上图中,椭圆最右侧的点不是纯蓝色的(尽管它们非常接近)。 渐变中的颜色被定位为允许填充达到 145、35) (点,颜色将达到纯蓝色 (0、0、255) 。 但填充永远不会到达 (145, 35),因为路径渐变画笔仅在其路径内绘制。