DOBON.NET
Top > プログラミング > .NET Tips > 画像、印刷(GDI+)

半透明の線や文字を描画する

注意：画像の表示方法が分からないという方は、まず「コントロールやフォームに画像を表示する」をご覧ください。また、文字列を描画させる方法は「文字を書く」をご覧ください。

ColorオブジェクトをColor.FromArgbメソッドで作成するとき、アルファ値を指定することができます。このアルファ値で透明度を指定することができます。アルファ値は0から255までの整数で、0は完全な透明、255が完全な不透明です。このようにして取得したColorオブジェクトからPenやBrushオブジェクトを作成すれば、半透明の図形や文字を描画することができます。

以下に半透明な四角と文字を描画する例を示します。

VB.NET
コードを隠すコードを選択
'Imports System.Drawing

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

'画像を背景に描画する
Dim bmp As New Bitmap("C:\test.jpg")
g.DrawImage(bmp, 0, 0, bmp.Width, bmp.Height)
bmp.Dispose()

'半透明のPenを作成する
Dim p As New Pen(Color.FromArgb(128, Color.Red), 12)
'四角を描画する
g.DrawRectangle(p, New Rectangle(10, 60, 260, 60))
p.Dispose()

'半透明のブラシを作成する
Dim b = New SolidBrush(Color.FromArgb(128, Color.Yellow))
Dim f As New Font("Arial", 30)
'文字列を描画する
g.DrawString("DOBON.NET", f, b, 15, 70)
b.Dispose()
f.Dispose()

'Graphicsオブジェクトのリソースを解放する
g.Dispose()

'PictureBox1に表示する
PictureBox1.Image = canvas
C#
コードを隠すコードを選択
//using System.Drawing;

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

//画像を背景に描画する
Bitmap bmp = new Bitmap("C:\\test.jpg");
g.DrawImage(bmp, 0, 0, bmp.Width, bmp.Height);
bmp.Dispose();

//半透明のPenを作成する
Pen p = new Pen(Color.FromArgb(128, Color.Red), 12);
//四角を描画する
g.DrawRectangle(p, new Rectangle(10, 60, 260, 60));
p.Dispose();

//半透明のブラシを作成する
Brush b = new SolidBrush(Color.FromArgb(128, Color.Yellow));
Font f = new Font("Arial", 30);
//文字列を描画する
g.DrawString("DOBON.NET", f, b, 15, 70);
b.Dispose();
f.Dispose();

//Graphicsオブジェクトのリソースを解放する
g.Dispose();

//PictureBox1に表示する
PictureBox1.Image = canvas;
半透明の線や文字を描画する

品質レベルを指定する

半透明の図形を描画して複数の画像が重ね合わさるとき、その品質レベルをGraphics.CompositingQualityプロパティで指定することができます。CompositingQualityプロパティに指定できるCompositingQuality列挙体の値とその意味は次のようなものです（MSDNからの抜粋）。

CompositingQuality列挙体のメンバ名説明
AssumeLinear線形の値であると想定します。
Default既定の品質。
GammaCorrectedガンマ補正を使用します。
HighQuality高品質で、低速の複合。
HighSpeed高速で低品質。
Invalid無効な品質。

以下にCompositingQualityを変更して描画する例を示します。

VB.NET
コードを隠すコードを選択
'Imports System.Drawing

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

'画像を背景に描画する
Dim bmp As New Bitmap("C:\test.jpg")
g.DrawImage(bmp, 0, 0, bmp.Width, bmp.Height)
bmp.Dispose()

'半透明のPenを作成する
Dim p As New Pen(Color.FromArgb(128, Color.Yellow), 20)
'普通に線を描画する
g.DrawLine(p, 10, 30, 100, 30)
'ガンマ補正を使用して線を描画する
g.CompositingQuality = _
    System.Drawing.Drawing2D.CompositingQuality.GammaCorrected
g.DrawLine(p, 10, 60, 100, 60)

p.Dispose()
g.Dispose()

'PictureBox1に表示する
PictureBox1.Image = canvas
C#
コードを隠すコードを選択
//using System.Drawing;

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

//画像を背景に描画する
Bitmap bmp = new Bitmap("C:\\test.jpg");
g.DrawImage(bmp, 0, 0, bmp.Width, bmp.Height);
bmp.Dispose();

//半透明のPenを作成する
Pen p = new Pen(Color.FromArgb(128, Color.Yellow), 20);
//普通に線を描画する
g.DrawLine(p, 10, 30, 100, 30);
//ガンマ補正を使用して線を描画する
g.CompositingQuality =
    System.Drawing.Drawing2D.CompositingQuality.GammaCorrected;
g.DrawLine(p, 10, 60, 100, 60);

p.Dispose();
g.Dispose();

//PictureBox1に表示する
PictureBox1.Image = canvas;
ガンマ補正を使用して線を描画する

背景を上書きして描画する

今までの例では、半透明の図形は背景の色と混ざり合って（ブレンドされて）描画されます。しかしGraphicsオブジェクトのCompositingModeメソッドをSourceCopyにすると、背景と混ざることなく、上書きされて描画されるようになります。なおCompositingModeメソッドをSourceOverにすると、通常通り混ざり合って描画されます。

通常通り描画したときと、CompositingModeメソッドをSourceCopyにしたときでどのように変わるかを調べるコードを以下に示します。

VB.NET
コードを隠すコードを選択
'Imports System.Drawing

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

'画像を背景に表示する
Dim bmp As New Bitmap("C:\test.jpg")
g.DrawImage(bmp, 0, 0, bmp.Width, bmp.Height)
bmp.Dispose()

'半透明のPenを作成する
Dim p As New Pen(Color.FromArgb(160, Color.Yellow), 20)

'普通に線を描画する
g.DrawLine(p, 10, 30, 100, 30)
'背景色を上書きするように変更する
g.CompositingMode = _
    System.Drawing.Drawing2D.CompositingMode.SourceOver
g.DrawLine(p, 10, 60, 100, 60)

p.Dispose()
g.Dispose()

'PictureBox1に表示する
PictureBox1.Image = canvas
C#
コードを隠すコードを選択
//using System.Drawing;

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

//画像を背景に表示する
Bitmap bmp = new Bitmap("C:\\test.jpg");
g.DrawImage(bmp, 0, 0, bmp.Width, bmp.Height);
bmp.Dispose();

//半透明のPenを作成する
Pen p = new Pen(Color.FromArgb(160, Color.Yellow), 20);

//普通に線を描画する
g.DrawLine(p, 10, 30, 100, 30);
//背景色を上書きするように変更する
g.CompositingMode =
    System.Drawing.Drawing2D.CompositingMode.SourceOver;
g.DrawLine(p, 10, 60, 100, 60);

p.Dispose();
g.Dispose();

//PictureBox1に表示する
PictureBox1.Image = canvas;
CompositingModeメソッド
  • 履歴：
  • 2012/8/3 表示する方法を、PictureBox.Imageプロパティを使った方法に変更。

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

  • このサイトで紹介されているコードの多くは、例外処理が省略されています。例外処理については、こちらをご覧ください。
  • コードの先頭に記述されている「Imports ??? がソースファイルの一番上に書かれているものとする」（C#では、「using ???; がソースファイルの一番上に書かれているものとする」）の意味が分からないという方は、こちらをご覧ください。
  • Windows Vista以降でUACが有効になっていると、ファイルへの書き込みに失敗する可能性があります。詳しくは、こちらをご覧ください。
  • .NET Tipsをご利用いただく際は、注意事項をお守りください。
共有する
この記事への評価
この記事へのコメント
この記事に関するコメントを投稿するには、下のボタンをクリックしてください。投稿フォームへ移動します。通常のご質問、ご意見等は掲示板へご投稿ください。