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

PathGradientBrush クラスを使用すると、徐々に変化する色で図形を塗りつぶす方法をカスタマイズできます。 たとえば、パスの中心に 1 つの色を指定し、パスの境界に別の色を指定できます。 パスの境界に沿って複数のポイントごとに個別の色を指定することもできます。

この記事の例は、コントロールの Paint イベント ハンドラーから呼び出されるメソッドです。

パスグラデーションで楕円を塗りつぶすには

• 次の例は、楕円をパス グラデーション ブラシで塗りつぶす例です。 中心の色は青に設定され、境界の色はアクアに設定されます。 次の図は、塗りつぶされた楕円を示しています。

  

  既定では、パス グラデーション ブラシはパスの境界の外側には拡張されません。 パス グラデーション ブラシを使用して、パスの境界を越えて表示される図形を塗りつぶした場合、パスの外側の画面領域は塗りつぶされません。

  次の図は、次のコードの Graphics.FillEllipse 呼び出しを e.Graphics.FillRectangle(pthGrBrush, 0, 10, 200, 40)に変更した場合の動作を示しています。

  

  public void FillEllipseWithPathGradient(PaintEventArgs e)
  {
      // 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);
  }
  

  ' 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)
  
  

  前のコード例は Windows フォームで使用できるように設計されており、PaintEventArgsのパラメーターである PaintEventHandler e が必要です。

境界上のポイントを指定するには

• 次の使用例は、星形のパスからパス グラデーション ブラシを作成します。 このコードでは、 CenterColor プロパティを設定します。このプロパティは、星の重心の色を赤に設定します。 次に、SurroundColors プロパティを設定して、colors配列内の個々のポイントにあるさまざまな色 (points配列に格納) を指定します。 最後のコード ステートメントは、星形のパスにパス グラデーション ブラシを塗りつぶします。

  public void ConstructBrushFromStarShapedPath(PaintEventArgs e)
  {
      // 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);
  }
  

  ' 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)
  

• 次の例では、コード内に GraphicsPath オブジェクトを含まないパス グラデーションを描画します。 この例の特定の PathGradientBrush コンストラクターはポイントの配列を受け取りますが、 GraphicsPath オブジェクトは必要ありません。 また、 PathGradientBrush はパスではなく四角形を塗りつぶすために使用されることに注意してください。 四角形は、ブラシの定義に使用される閉じたパスよりも大きいので、一部の四角形はブラシによって描画されません。 次の図は、四角形 (点線) と、パス グラデーション ブラシによって塗りつぶされた四角形の部分を示しています。

  

  public void DrawPathGradentWthoutGraphicsPath(PaintEventArgs e)
  {
      // 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));
  }
  

  ' 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))
  

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

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

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

  次に、パス グラデーション ブラシのフォーカス スケールを設定します。 x フォーカス スケールは 0.3 に設定され、y フォーカス スケールは 0.8 に設定されます。 このコードは、TranslateTransform オブジェクトのGraphics メソッドを呼び出して、FillPathの後続の呼び出しが最初の楕円の右側にある楕円を埋めるようにします。

  フォーカス スケールの効果を確認するには、中心を主楕円と共有する小さな楕円を想像してください。 小さい (内側) 楕円は、水平方向に 0.3 倍、垂直方向に 0.8 倍にスケーリングされた主楕円です。 外側の楕円の境界から内側の楕円の境界に移動すると、色は青からアクアに徐々に変化します。 内側の楕円の境界から共有の中心に移動すると、色はアクアのままです。

  次の図は、次のコードの出力を示しています。 左側の楕円は、中心点でのみアクアです。 右側の楕円は、内側のパス全体がアクア色です。

public void CustomizePathGradientBrush(PaintEventArgs e)
{
    // 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);
}

' 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)

補間を用いてカスタマイズするには

• パス グラデーション ブラシをカスタマイズするもう 1 つの方法は、補間色の配列と補間位置の配列を指定することです。

  次の使用例は、三角形に基づいてパス グラデーション ブラシを作成します。 このコードでは、パス グラデーション ブラシの InterpolationColors プロパティを設定して、補間の色の配列 (濃い緑、アクア、青) と補間位置の配列 (0,0.25, 1) を指定します。 三角形の境界から中心点に移動すると、色は濃い緑からアクアに、次に水色から青に徐々に変化します。 濃い緑からアクアへの変化は、濃い緑から青までの距離の 25% で発生します。

  次の図は、カスタム パス グラデーション ブラシで塗りつぶされた三角形を示しています。

  

  public void CustomizeWithInterpolation(PaintEventArgs e)
  {
      // 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);
  }
  

  ' 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)
  
  

中心点を設定するには

• 既定では、パス グラデーション ブラシの中心点は、ブラシの作成に使用されるパスの重心に位置しています。 中心点の位置を変更するには、CenterPoint クラスのPathGradientBrushプロパティを設定します。

  次の使用例は、楕円に基づいてパス グラデーション ブラシを作成します。 楕円の中心は (70, 35) ですが、パス グラデーション ブラシの中心点は (120, 40) に設定されます。

  public void SetCenterPoint(PaintEventArgs e)
  {
      // 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);
  }
  

  ' 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)
  

  次の図は、塗りつぶされた楕円とパス グラデーション ブラシの中心点を示しています。

  

• パス グラデーション ブラシの中心点を、ブラシの構築に使用されたパスの外側の位置に設定できます。 次の例では、前のコードで CenterPoint プロパティを設定する呼び出しを置き換えます。

  public void SetCenterPointOutsidePath(PaintEventArgs e)
  {
      // 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(145, 35);
  
      // 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);
  }
  

  pthGrBrush.CenterPoint = New PointF(145, 35)
  

  次の図は、この変更による出力を示しています。

  

  上の図では、楕円の右端の点は純粋な青ではありません (ただし、非常に近いです)。 グラデーションの色は、塗りつぶしがポイント (145, 35) に達した場合に、色が純粋な青 (0, 0, 255) になるかのように配置されています。 しかし、パス グラデーション ブラシはそのパス内でのみ描画するため、(145, 35) の位置まで塗りつぶされることはありません。

コードのコンパイル

上記の例は Windows フォームで使用できるように設計されており、PaintEventArgs イベント ハンドラーのパラメーターであるePaintが必要です。

こちらも参照ください

• グラデーション ブラシを使用して図形を塗りつぶす