次の方法で共有

方法: 線形グラデーションを作成する

  • [アーティクル]

GDI+ では、水平方向、垂直方向、および対角方向の線状グラデーションが提供します。 既定では、線状グラデーションの色は一律に変化します。 ただし、線状グラデーションをカスタマイズして、一律でない方法で色が変化するようにできます。

注意

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

次の例では、水平方向の線状グラデーション ブラシを使用して、直線、楕円、および四角形を塗りつぶします。

LinearGradientBrush コンストラクターは 4 つの引数 (2 つのポイントと 2 つの色) を取ります。 最初のポイント (0, 10) には最初の色 (赤) が関連付けられ、2 番目のポイント (200, 10) には 2 番目の色 (青) が関連付けられます。 予想どおり、(0, 10) から (200, 10) に引かれた直線は、徐々に赤から青に変化します。

ポイント (0, 10) および (200, 10) の 10 は重要ではありません。 重要なのは、2 つのポイントの 2 番目の座標が同じであることです。つまり、それらを結ぶ直線が水平になります。 楕円と四角形でも、水平座標 0 から 200 に向かって、徐々に赤から青に変化します。

次の図は、直線、楕円、および四角形を示しています。 水平座標が 200 を超えると色のグラデーションが繰り返されることに注意してください。

A line, an ellipse, and a rectangle filled with a color gradient.

水平方向の線状グラデーションを使用するには

  • 3 番目と 4 番目の引数として不透明な赤と不透明な青をそれぞれ渡します。

    public void UseHorizontalLinearGradients(PaintEventArgs e)
{
    LinearGradientBrush linGrBrush = new LinearGradientBrush(
       new Point(0, 10),
       new Point(200, 10),
       Color.FromArgb(255, 255, 0, 0),   // Opaque red
       Color.FromArgb(255, 0, 0, 255));  // Opaque blue

    Pen pen = new Pen(linGrBrush);

    e.Graphics.DrawLine(pen, 0, 10, 200, 10);
    e.Graphics.FillEllipse(linGrBrush, 0, 30, 200, 100);
    e.Graphics.FillRectangle(linGrBrush, 0, 155, 500, 30);
}

    Dim linGrBrush As New LinearGradientBrush( _
   New Point(0, 10), _
   New Point(200, 10), _
   Color.FromArgb(255, 255, 0, 0), _
   Color.FromArgb(255, 0, 0, 255))
Dim pen As New Pen(linGrBrush)

e.Graphics.DrawLine(pen, 0, 10, 200, 10)
e.Graphics.FillEllipse(linGrBrush, 0, 30, 200, 100)
e.Graphics.FillRectangle(linGrBrush, 0, 155, 500, 30)

前の例では、水平座標 0 から水平座標 200 に向かって、色の要素が線状に変化します。 たとえば、最初の座標が 0 と 200 の中間にあるポイントでは、青の要素が 0 と 255 の間になります。

GDI+ を使用すると、グラデーションの端から端へとどのように色が変化するかを調整できます。 次の表に従って黒から赤に変化するグラデーション ブラシを作成するとします。

水平座標 RGB 要素
0 (0, 0, 0)
40 (128, 0, 0)
200 (255, 0, 0)

0 から 200 までの距離において水平座標がまだ 20% の位置であっても、赤の要素の濃度は半分であることに注意してください。

次の例では、LinearGradientBrush.Blend プロパティを設定して、3 つの相対濃度を 3 つの相対位置に関連付けます。 前の表のように、相対濃度 0.5 が相対位置 0.2 に関連付けられます。 このコードによって、楕円と四角形がグラデーション ブラシで塗りつぶされます。

次の図は、結果として生成される楕円と四角形を示したものです。

An ellipse and a rectangle filled with a horizontal color gradient.

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

  • 3 番目と 4 番目の引数として不透明な黒と不透明な赤をそれぞれ渡します。

    public void CustomizeLinearGradients(PaintEventArgs e)
{
    LinearGradientBrush linGrBrush = new LinearGradientBrush(
       new Point(0, 10),
       new Point(200, 10),
       Color.FromArgb(255, 0, 0, 0),     // Opaque black
       Color.FromArgb(255, 255, 0, 0));  // Opaque red

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

    //Create a Blend object and assign it to linGrBrush.
    Blend blend = new Blend();
    blend.Factors = relativeIntensities;
    blend.Positions = relativePositions;
    linGrBrush.Blend = blend;

    e.Graphics.FillEllipse(linGrBrush, 0, 30, 200, 100);
    e.Graphics.FillRectangle(linGrBrush, 0, 155, 500, 30);
}

    Dim linGrBrush As New LinearGradientBrush( _
   New Point(0, 10), _
   New Point(200, 10), _
   Color.FromArgb(255, 0, 0, 0), _
   Color.FromArgb(255, 255, 0, 0))

Dim relativeIntensities As Single() = {0.0F, 0.5F, 1.0F}
Dim relativePositions As Single() = {0.0F, 0.2F, 1.0F}

'Create a Blend object and assign it to linGrBrush.
Dim blend As New Blend()
blend.Factors = relativeIntensities
blend.Positions = relativePositions
linGrBrush.Blend = blend

e.Graphics.FillEllipse(linGrBrush, 0, 30, 200, 100)
e.Graphics.FillRectangle(linGrBrush, 0, 155, 500, 30)

前の例のグラデーションは水平方向でした。つまり水平方向の直線に沿って色が徐々に変化します。 また、垂直方向のグラデーションおよび対角方向のグラデーションを定義することもできます。

次の例では、LinearGradientBrush コンストラクターにポイント (0, 0) と (200, 100) を渡します。 青は (0, 0) に関連付けられており、緑は (200, 100) に関連付けられています。 直線 (ペン幅 10) と楕円が線状グラデーション ブラシで塗りつぶされます。

次の図は、直線および楕円を示しています。 楕円の色は (0, 0) と (200, 100) を通過する直線と平行なすべての直線に沿って徐々に変化することに注意してください。

A line and an ellipse filled with a diagonal color gradient.

対角方向の線状グラデーションを作成するには

  • 3 番目と 4 番目の引数として不透明な青と不透明な緑をそれぞれ渡します。

    public void CreateDiagonalLinearGradients(PaintEventArgs e)
{
    LinearGradientBrush linGrBrush = new LinearGradientBrush(
       new Point(0, 0),
       new Point(200, 100),
       Color.FromArgb(255, 0, 0, 255),   // opaque blue
       Color.FromArgb(255, 0, 255, 0));  // opaque green

    Pen pen = new Pen(linGrBrush, 10);

    e.Graphics.DrawLine(pen, 0, 0, 600, 300);
    e.Graphics.FillEllipse(linGrBrush, 10, 100, 200, 100);
}

    Dim linGrBrush As New LinearGradientBrush( _
   New Point(0, 0), _
   New Point(200, 100), _
   Color.FromArgb(255, 0, 0, 255), _
   Color.FromArgb(255, 0, 255, 0))
' opaque blue
' opaque green
Dim pen As New Pen(linGrBrush, 10)

e.Graphics.DrawLine(pen, 0, 0, 600, 300)
e.Graphics.FillEllipse(linGrBrush, 10, 100, 200, 100)

関連項目