方法 : パス グラデーションを作成する

更新 : 2007 年 11 月

PathGradientBrush クラスを使用すると、図形を塗りつぶすときの段階的な色の変化をカスタマイズできます。たとえば、パスの中心に 1 つの色を指定し、パスの境界に別の色を指定できます。また、パスの境界上にある点ごとに個別の色を指定することもできます。

メモ :
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 プロパティを設定します。次に、SurroundColors プロパティを設定して、points 配列内の個々の点に、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));

パス グラデーションをカスタマイズするには

• パス グラデーション ブラシをカスタマイズする方法の 1 つとして、そのブラシの FocusScales プロパティを設定する方法があります。フォーカス スケールは、メイン パスの内側にある内部パスを指定します。中心の色は、中心点だけでなく、この内部パスの内側すべてに適用されます。

  楕円のパスに基づいてパス グラデーション ブラシを作成する例を次に示します。このコードでは、境界の色を青に設定し、中心の色を明るい緑青に設定してから、パス グラデーション ブラシで楕円のパスを塗りつぶします。

  次に、パス グラデーション ブラシのフォーカス スケールを設定します。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) まで達することはありません。

参照

その他の技術情報

グラデーション ブラシを使用した図形の塗りつぶし