DOBON.NET プログラミング道: .NET Framework, VB.NET, C#, Visual Basic, Visual Studio, インストーラ, ...

グラデーションをかける

注意:画像の表示方法が分からないという方は、まず「コントロールやフォームに画像を表示する」をご覧ください。また、塗りつぶした図形の描画法については、「塗りつぶした図形を描く」をご覧ください。

線形グラデーション

線形グラデーションは実に簡単で、LinearGradientBrushオブジェクト(System.Drawing.Drawing2D名前空間)をブラシとして使用するだけです。

次の例ではピクチャボックス(PictureBox1)をグラデーション(縦に白から黒)をかけて塗りつぶしています。ここでは縦にグラデーションをかけているためLinearGradientModeにVerticalを指定していますが、右上から左下へのグラデーションにはBackwardDiagonal、左上から右下へのグラデーションにはForwardDiagonal、左から右へのグラデーションにはHorizontalを指定します。また、LinearGradientModeの代わりに、グラデーションの方向(x軸から時計回りで計測した角度)をfloat型で指定することも出来ます。

VB.NET
コードを隠すコードを選択
'Imports System.Drawing
'Imports System.Drawing.Drawing2D
'がソースファイルの一番上に書かれているものとする

'描画先とするImageオブジェクトを作成する
Dim canvas As New Bitmap(PictureBox1.Width, PictureBox1.Height)
'ImageオブジェクトのGraphicsオブジェクトを作成する
Dim g As Graphics = Graphics.FromImage(canvas)

'縦に白から黒へのグラデーションのブラシを作成
'g.VisibleClipBoundsは表示クリッピング領域に外接する四角形
Dim gb As New LinearGradientBrush( _
    g.VisibleClipBounds, _
    Color.White, _
    Color.Black, _
    LinearGradientMode.Vertical)

'四角を描く
g.FillRectangle(gb, g.VisibleClipBounds)

'リソースを解放する
gb.Dispose()
g.Dispose()

'PictureBox1に表示する
PictureBox1.Image = canvas
C#
コードを隠すコードを選択
//using System.Drawing;
//using System.Drawing.Drawing2D;
//がソースファイルの一番上に書かれているものとする

//描画先とするImageオブジェクトを作成する
Bitmap canvas = new Bitmap(PictureBox1.Width, PictureBox1.Height);
//ImageオブジェクトのGraphicsオブジェクトを作成する
Graphics g = Graphics.FromImage(canvas);

//縦に白から黒へのグラデーションのブラシを作成
//g.VisibleClipBoundsは表示クリッピング領域に外接する四角形
LinearGradientBrush gb = new LinearGradientBrush(
        g.VisibleClipBounds,
        Color.White,
        Color.Black,
        LinearGradientMode.Vertical);

//四角を描く
g.FillRectangle(gb, g.VisibleClipBounds);

//リソースを解放する
gb.Dispose();
g.Dispose();

//PictureBox1に表示する
PictureBox1.Image = canvas;

ガンマ補正を有効にする

LinearGradientBrushのGammaCorrectionプロパティをTrueにすることにより、ガンマ補正を有効にして描画することができます。

GammaCorrectionプロパテを変更しないとき(Falseのまま)とTrueにしたときでどのように違うか確かめるためのコードを以下に示します。

VB.NET
コードを隠すコードを選択
'Imports System.Drawing
'Imports System.Drawing.Drawing2D
'がソースファイルの一番上に書かれているものとする

'描画先とするImageオブジェクトを作成する
Dim canvas As New Bitmap(PictureBox1.Width, PictureBox1.Height)
'ImageオブジェクトのGraphicsオブジェクトを作成する
Dim g As Graphics = Graphics.FromImage(canvas)

'グラデーションのブラシを作成
Dim gb As New LinearGradientBrush(New Point(0, 0), New Point(200, 0), _
    Color.Red, Color.Yellow)

'普通に四角を描く
g.FillRectangle(gb, New Rectangle(0, 0, 200, 40))

'ガンマ補正を有効にして四角を描く
gb.GammaCorrection = True
g.FillRectangle(gb, New Rectangle(0, 50, 200, 40))

'リソースを解放する
gb.Dispose()
g.Dispose()

'PictureBox1に表示する
PictureBox1.Image = canvas
C#
コードを隠すコードを選択
//using System.Drawing;
//using System.Drawing.Drawing2D;
//がソースファイルの一番上に書かれているものとする

//描画先とするImageオブジェクトを作成する
Bitmap canvas = new Bitmap(PictureBox1.Width, PictureBox1.Height);
//ImageオブジェクトのGraphicsオブジェクトを作成する
Graphics g = Graphics.FromImage(canvas);

//グラデーションのブラシを作成
LinearGradientBrush gb =
    new LinearGradientBrush(new Point(0, 0), new Point(200, 0),
    Color.Red, Color.Yellow);

//普通に四角を描く
g.FillRectangle(gb, new Rectangle(0, 0, 200, 40));

//ガンマ補正を有効にして四角を描く
gb.GammaCorrection = true;
g.FillRectangle(gb, new Rectangle(0, 50, 200, 40));

//リソースを解放する
gb.Dispose();
g.Dispose();

//PictureBox1に表示する
PictureBox1.Image = canvas;

結果は、次のようになります。下がガンマ補正を有効にして描画したものです。

ガンマ補正

複雑なグラデーション

さらに複雑なグラデーションを作るには、PathGradientBrushクラスを使います。PathGradientBrushにより、パス(GraphicsPathオブジェクト)の内部をグラデーションで塗りつぶすBrushオブジェクトを作成できます。次のその一例を示します。

VB.NET
コードを隠すコードを選択
'Imports System.Drawing
'Imports System.Drawing.Drawing2D
'がソースファイルの一番上に書かれているものとする

'描画先とするImageオブジェクトを作成する
Dim canvas As New Bitmap(PictureBox1.Width, PictureBox1.Height)
'ImageオブジェクトのGraphicsオブジェクトを作成する
Dim g As Graphics = Graphics.FromImage(canvas)

'四角のパスを作成する
Dim gp As New GraphicsPath
gp.AddRectangle(g.VisibleClipBounds)

'PathGradientBrushオブジェクトの作成
Dim gb As New PathGradientBrush(gp)
'パスグラデーションの中心の色を白にする
gb.CenterColor = Color.White
'パス内の点に対応している色を指定する
gb.SurroundColors = New Color() _
    {Color.Yellow, Color.Green, Color.Blue, Color.Red}

'四角を描く
g.FillRectangle(gb, g.VisibleClipBounds)

'リソースを解放する
gb.Dispose()
g.Dispose()

'PictureBox1に表示する
PictureBox1.Image = canvas
C#
コードを隠すコードを選択
//using System.Drawing;
//using System.Drawing.Drawing2D;
//がソースファイルの一番上に書かれているものとする

//描画先とするImageオブジェクトを作成する
Bitmap canvas = new Bitmap(PictureBox1.Width, PictureBox1.Height);
//ImageオブジェクトのGraphicsオブジェクトを作成する
Graphics g = Graphics.FromImage(canvas);

//四角のパスを作成する
GraphicsPath gp = new GraphicsPath();
gp.AddRectangle(g.VisibleClipBounds);

//PathGradientBrushオブジェクトの作成
PathGradientBrush gb = new PathGradientBrush(gp);
//パスグラデーションの中心の色を白にする
gb.CenterColor = Color.White;
//パス内の点に対応している色を指定する
gb.SurroundColors = 
    new Color[] {Color.Yellow, Color.Green, Color.Blue, Color.Red};

//四角を描く
g.FillRectangle(gb, g.VisibleClipBounds);

//リソースを解放する
gb.Dispose();
g.Dispose();

//PictureBox1に表示する
PictureBox1.Image = canvas;

  • 履歴:
  • 2007/2/27 「ガンマ補正を有効にする」を追加。
  • 2012/8/3 表示する方法を、PictureBox.Imageプロパティを使った方法に変更。

注意:この記事では、基本的な事柄の説明が省略されているかもしれません。初心者の方は、特に以下の点にご注意ください。

  • このサイトで紹介されているコードの多くは、例外処理が省略されています。例外処理については、こちらをご覧ください。
  • コードの先頭に記述されている「Imports ??? がソースファイルの一番上に書かれているものとする」(C#では、「using ???; がソースファイルの一番上に書かれているものとする」)の意味が分からないという方は、こちらをご覧ください。
  • .NET Tipsをご利用いただく際は、注意事項をお守りください。