HOW TO：建立路徑漸層

發行項
08/21/2008

更新：2007 年 11 月

PathGradientBrush 類別可讓您自訂使用漸層色彩填滿形狀的方式。例如，您可以為路徑的中央指定一種色彩，為路徑的界限指定另外一種色彩。也可以在路徑的界限上每幾個點就指定不同的色彩。

注意事項：
在 GDI+ 中，路徑是由 GraphicsPath 物件維護的線條和曲線序列。如需 GDI+ 路徑的詳細資訊，請參閱GDI+ 中的圖形路徑和建構和繪製路徑。

若要使用路徑漸層填滿橢圓形

下列範例會使用路徑漸層筆刷來填滿橢圓形。中心色彩設定為藍色，界限色彩設定為青色。下圖顯示的是已填滿的橢圓形。

漸層路徑

根據預設，路徑漸層筆刷不會延伸到路徑界限之外。如果您使用路徑漸層筆刷來填入延伸到路徑界限外的圖形，路徑外的螢幕區域將不會被填入。

漸層路徑

' Create a path that consists of a single ellipse.
Dim path As New GraphicsPath()
path.AddEllipse(0, 0, 140, 70)

' Use the path to construct a brush.
Dim pthGrBrush As New PathGradientBrush(path)

' Set the color at the center of the path to blue.
pthGrBrush.CenterColor = Color.FromArgb(255, 0, 0, 255)

' Set the color along the entire boundary 
' of the path to aqua.
Dim colors As Color() = {Color.FromArgb(255, 0, 255, 255)}
pthGrBrush.SurroundColors = colors

e.Graphics.FillEllipse(pthGrBrush, 0, 0, 140, 70)

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

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

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

// Set the color along the entire boundary 
// of the path to aqua.
Color[] colors = { Color.FromArgb(255, 0, 255, 255) };
pthGrBrush.SurroundColors = colors;

e.Graphics.FillEllipse(pthGrBrush, 0, 0, 140, 70);

若要指定界限上的點

下列範例會從星形路徑建構出路徑漸層筆刷。程式碼會設定 CenterColor 屬性，這個屬性會將星形中心點的色彩設定為紅色。然後程式碼會在 points 陣列中，於個別點上設定 SurroundColors 屬性以指定不同的色彩 (儲存在 colors 陣列中)。程式碼中的最後一個陳述式會使用路徑漸層筆刷來填滿星形路徑。

' Put the points of a polygon in an array.
Dim points As Point() = { _
   New Point(75, 0), _
   New Point(100, 50), _
   New Point(150, 50), _
   New Point(112, 75), _
   New Point(150, 150), _
   New Point(75, 100), _
   New Point(0, 150), _
   New Point(37, 75), _
   New Point(0, 50), _
   New Point(50, 50)}

' Use the array of points to construct a path.
Dim path As New GraphicsPath()
path.AddLines(points)

' Use the path to construct a path gradient brush.
Dim pthGrBrush As New PathGradientBrush(path)

' Set the color at the center of the path to red.
pthGrBrush.CenterColor = Color.FromArgb(255, 255, 0, 0)

' Set the colors of the points in the array.
Dim colors As Color() = { _
   Color.FromArgb(255, 0, 0, 0), _
   Color.FromArgb(255, 0, 255, 0), _
   Color.FromArgb(255, 0, 0, 255), _
   Color.FromArgb(255, 255, 255, 255), _
   Color.FromArgb(255, 0, 0, 0), _
   Color.FromArgb(255, 0, 255, 0), _
   Color.FromArgb(255, 0, 0, 255), _
   Color.FromArgb(255, 255, 255, 255), _
   Color.FromArgb(255, 0, 0, 0), _
   Color.FromArgb(255, 0, 255, 0)}

pthGrBrush.SurroundColors = colors

' Fill the path with the path gradient brush.
e.Graphics.FillPath(pthGrBrush, path)

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

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

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

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

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

pthGrBrush.SurroundColors = colors;

// Fill the path with the path gradient brush.
e.Graphics.FillPath(pthGrBrush, path);

下列範例將繪製路徑漸層，但程式碼中沒有 GraphicsPath 物件。範例中特定的 PathGradientBrush 建構函式會接收點陣列，但是不需要 GraphicsPath 物件。此外，請注意 PathGradientBrush 是用來填滿矩形，而非路徑。矩形比用來定義筆刷的封閉路徑大，因此有部分矩形不會用筆刷來繪製。下圖顯示的是矩形 (虛線) 和使用路徑漸層筆刷繪製的矩形部分。

' Construct a path gradient brush based on an array of points.
Dim ptsF As PointF() = { _
   New PointF(0, 0), _
   New PointF(160, 0), _
   New PointF(160, 200), _
   New PointF(80, 150), _
   New PointF(0, 200)}

Dim pBrush As New PathGradientBrush(ptsF)

' An array of five points was used to construct the path gradient
' brush. Set the color of each point in that array.  
'Point (0, 0) is red
'Point (160, 0) is green
'Point (160, 200) is green
'Point (80, 150) is blue
'Point (0, 200) is red
Dim colors As Color() = { _
   Color.FromArgb(255, 255, 0, 0), _
   Color.FromArgb(255, 0, 255, 0), _
   Color.FromArgb(255, 0, 255, 0), _
   Color.FromArgb(255, 0, 0, 255), _
   Color.FromArgb(255, 255, 0, 0)}
pBrush.SurroundColors = colors

' Set the center color to white.
pBrush.CenterColor = Color.White

' Use the path gradient brush to fill a rectangle.
e.Graphics.FillRectangle(pBrush, New Rectangle(0, 0, 160, 200))

// Construct a path gradient brush based on an array of points.
PointF[] ptsF = {
   new PointF(0, 0), 
   new PointF(160, 0), 
   new PointF(160, 200),
   new PointF(80, 150),
   new PointF(0, 200)};

PathGradientBrush pBrush = new PathGradientBrush(ptsF);

// 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.FromArgb(255, 255, 0, 0),  // (0, 0) red
   Color.FromArgb(255, 0, 255, 0),  // (160, 0) green
   Color.FromArgb(255, 0, 255, 0),  // (160, 200) green
   Color.FromArgb(255, 0, 0, 255),  // (80, 150) blue
   Color.FromArgb(255, 255, 0, 0)}; // (0, 200) red

pBrush.SurroundColors = colors;

// Set the center color to white.
pBrush.CenterColor = Color.White;

// Use the path gradient brush to fill a rectangle.
e.Graphics.FillRectangle(pBrush, new Rectangle(0, 0, 160, 200));

若要自訂路徑漸層

自訂路徑漸層筆刷的其中一個方式是設定它的 FocusScales 屬性。焦點比例 (Focus Scale) 會指定位於主要路徑內的內部路徑。這個內部路徑全部都會顯示為中心色彩，而不只是中心點。

下列範例會根據橢圓形路徑來建立路徑漸層筆刷。程式碼會將界限色彩設定為藍色，將中心色彩設定為青色，然後使用路徑漸層筆刷來填滿橢圓形路徑。

接下來，程式碼會設定路徑漸層筆刷的焦點比例。x 焦點比例會設定為 0.3，y 焦點比例設定為 0.8。程式碼會呼叫 Graphics 物件的 TranslateTransform 方法，使後續的 FillPath 呼叫會填滿位於第一個橢圓形右邊的橢圓形。

若要查看焦點比例的效果，假設有一個小的橢圓形與主要橢圓形共用同一個中心。小的 (內部) 橢圓形是以水平縮放因數 0.3 和垂直縮放因數 0.8 縮放主要橢圓形 (從中心)。當您從外部橢圓形的界限移動到內部橢圓形的界限時，色彩會從藍色逐漸變成青色。當您從內部橢圓形的界限移動到共用中心時，色彩會保持為青色。

下圖顯示下列程式碼的輸出。左邊的橢圓形只有中心點是青色。右邊的橢圓形則是在內部路徑中全部是青色。

' Create a path that consists of a single ellipse.
Dim path As New GraphicsPath()
path.AddEllipse(0, 0, 200, 100)

' Create a path gradient brush based on the elliptical path.
Dim pthGrBrush As New PathGradientBrush(path)

' Set the color along the entire boundary to blue.
' Changed variable name from color
Dim blueColor As Color() = {Color.Blue}
pthGrBrush.SurroundColors = blueColor

' Set the center color to aqua.
pthGrBrush.CenterColor = Color.Aqua

' Use the path gradient brush to fill the ellipse. 
e.Graphics.FillPath(pthGrBrush, path)

' Set the focus scales for the path gradient brush.
pthGrBrush.FocusScales = New PointF(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.
e.Graphics.TranslateTransform(220.0F, 0.0F)
e.Graphics.FillPath(pthGrBrush, path)

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

// Create a path gradient brush based on the elliptical path.
PathGradientBrush pthGrBrush = new PathGradientBrush(path);

// Set the color along the entire boundary to blue.
Color[] color = { Color.Blue };
pthGrBrush.SurroundColors = color;

// Set the center color to aqua.
pthGrBrush.CenterColor = Color.Aqua;

// Use the path gradient brush to fill the ellipse. 
e.Graphics.FillPath(pthGrBrush, path);

// Set the focus scales for the path gradient brush.
pthGrBrush.FocusScales = new PointF(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.
e.Graphics.TranslateTransform(220.0f, 0.0f);
e.Graphics.FillPath(pthGrBrush, path);

若要使用插補來自訂

自訂路徑漸層筆刷的另一個方式是指定內插色彩陣列和內插位置陣列。

下列範例會根據三角形來建立路徑漸層筆刷。程式碼會設定路徑漸層筆刷的 InterpolationColors 屬性，以指定插補色彩陣列 (深綠色, 青色, 藍色) 和插補位置陣列 (0, 0.25, 1)。當您從三角形的界限移動到中心點時，色彩會從深綠色逐漸變成青色，然後再從青色變成藍色。從深綠色變成青色是發生在深綠色到藍色之間的 25% 位置。

下圖顯示的是使用自訂路徑漸層筆刷填滿的三角形。

漸層路徑

' Vertices of the outer triangle
Dim points As Point() = { _
   New Point(100, 0), _
   New Point(200, 200), _
   New Point(0, 200)}

' No GraphicsPath object is created. The PathGradientBrush
' object is constructed directly from the array of points.
Dim pthGrBrush As New PathGradientBrush(points)

' Create an array of colors containing dark green, aqua, and  blue.
Dim colors As Color() = { _
   Color.FromArgb(255, 0, 128, 0), _
   Color.FromArgb(255, 0, 255, 255), _
   Color.FromArgb(255, 0, 0, 255)}

' Dark green is at the boundary of the triangle.
' Aqua is 40 percent of the way from the boundary to the center point.
' Blue is at the center point.
Dim relativePositions As Single() = { _
   0.0F, _
   0.4F, _
   1.0F}

Dim colorBlend As New ColorBlend()
colorBlend.Colors = colors
colorBlend.Positions = relativePositions
pthGrBrush.InterpolationColors = colorBlend

' 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.
e.Graphics.FillRectangle(pthGrBrush, 0, 0, 200, 200)

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

// No GraphicsPath object is created. The PathGradientBrush
// object is constructed directly from the array of points.
PathGradientBrush pthGrBrush = new PathGradientBrush(points);

Color[] colors = {
   Color.FromArgb(255, 0, 128, 0),    // dark green
   Color.FromArgb(255, 0, 255, 255),  // aqua
   Color.FromArgb(255, 0, 0, 255)};   // blue

float[] relativePositions = {
   0f,       // Dark green is at the boundary of the triangle.
   0.4f,     // Aqua is 40 percent of the way from the boundary
             // to the center point.
   1.0f};    // Blue is at the center point.

ColorBlend colorBlend = new ColorBlend();
colorBlend.Colors = colors;
colorBlend.Positions = relativePositions;
pthGrBrush.InterpolationColors = colorBlend;

// 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.
e.Graphics.FillRectangle(pthGrBrush, 0, 0, 200, 200);

若要設定中心點

依照預設，路徑漸層筆刷的中心點位於用來建構筆刷的路徑中心點。藉由設定 PathGradientBrush 類別的 CenterPoint 屬性，變更中心點的位置。

下列範例會根據橢圓形來建立路徑漸層筆刷。橢圓形的中心位於 (70, 35)，但是路徑漸層筆刷的中心點卻設定為 (120, 40)。

' Create a path that consists of a single ellipse.
Dim path As New GraphicsPath()
path.AddEllipse(0, 0, 140, 70)

' Use the path to construct a brush.
Dim pthGrBrush As New PathGradientBrush(path)

' Set the center point to a location that is not
' the centroid of the path.
pthGrBrush.CenterPoint = New PointF(120, 40)

' Set the color at the center of the path to blue.
pthGrBrush.CenterColor = Color.FromArgb(255, 0, 0, 255)

' Set the color along the entire boundary 
' of the path to aqua.
Dim colors As Color() = {Color.FromArgb(255, 0, 255, 255)}
pthGrBrush.SurroundColors = colors

e.Graphics.FillEllipse(pthGrBrush, 0, 0, 140, 70)

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

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

// Set the center point to a location that is not
// the centroid of the path.
pthGrBrush.CenterPoint = new PointF(120, 40);

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

// Set the color along the entire boundary 
// of the path to aqua.
Color[] colors = { Color.FromArgb(255, 0, 255, 255) };
pthGrBrush.SurroundColors = colors;

e.Graphics.FillEllipse(pthGrBrush, 0, 0, 140, 70);

下圖顯示的是填滿的橢圓形和路徑漸層筆刷的中心點。

漸層路徑

您可以將路徑漸層筆刷的中心點設定為用來建構筆刷的路徑之外的位置。下列範例可取代上述程式碼中用來設定 CenterPoint 屬性的呼叫。
```
pthGrBrush.CenterPoint = New PointF(145, 35)
```
```
pthGrBrush.CenterPoint = new PointF(145, 35);
```
下圖顯示的是包含這項變更的輸出。

漸層路徑

在上圖中，橢圓形最右邊的點不是純藍色 (但是非常接近)。漸層中色彩的位置和 (145, 35) 這點的填色一樣，色彩為純藍色 (0, 0, 255)。但是，因為路徑漸層筆刷只會繪製路徑的內部，因此填色絕不會到達 (145, 35)。

請參閱

其他資源

使用漸層筆刷填滿形狀

Share via

HOW TO：建立路徑漸層

若要使用路徑漸層填滿橢圓形

若要指定界限上的點

若要自訂路徑漸層

若要使用插補來自訂

若要設定中心點

請參閱

其他資源

其他資源