GDI+で画像のアルファブレンディング

Rev.2を表示中。最新版はこちら。

概要

WindowsではGDI+を使うことで、JPEG画像の表示も簡単にできるようになった。GDI+のImageオブジェクトで画像を表示する際にアルファブレンディング(半透明処理)を行う方法のメモ。

アルファブレンディングの指定

画像を描画する際にアルファブレンディングを行うには、DrawImage()の引数で一発指定、、、のようなことはできず、ImageAttributesでColorMatrixの指定を行う。ColorMatrixは5×5の行列で表示時のRGBA各チャネルの割合い(0.0〜1.0)を指定する。

ColorMatrixの指定:

[0][0]:Red
[1][1]:Green
[2][2]:Blue
[3][3]:Alpha
[4][4]:必ず1
その他の要素は0

半透明処理を行って画像を重ねるコード

void CChildView::OnPaint() 
{
    CPaintDC dc(this); // 描画のデバイス コンテキスト

// TODO: ここにメッセージ ハンドラ コードを追加します。
    using namespace Gdiplus;

    Graphics *g = Graphics::FromHWND(GetSafeHwnd());

    Image img1(L"Blue hills.jpg");
    Image img2(L"Water lilies.jpg");
    g->DrawImage(&img1, RectF(0.0f, 0.0f, 200.0f, 200.0f));

    ImageAttributes attr;
    ColorMatrix cmat = {
        1.0f, 0.0f, 0.0f, 0.0f, 0.0f,   // Red
        0.0f, 1.0f, 0.0f, 0.0f, 0.0f,   // Green
        0.0f, 0.0f, 1.0f, 0.0f, 0.0f,   // Blue
        0.0f, 0.0f, 0.0f, 0.7f, 0.0f,   // Alpha (70%)
        0.0f, 0.0f, 0.0f, 0.0f, 1.0f    // must be 1
    };
    attr.SetColorMatrix(&cmat);
    g->DrawImage(&img2, Rect(100, 100, 200, 200),
        0, 0, img2.GetWidth(), img2.GetHeight(),
        UnitPixel, &attr, NULL, NULL);

    delete g;

    // メッセージの描画のために CWnd::OnPaint() を呼び出さないでください。
}

上記のコードで70%透過表示を行った結果

アルファ値以外も指定できるので、以下のようなColorMatrixでRed,Green要素を0にしてしまえば、青のみ抽出するようなこともできる。

ColorMatrix cmat = {
    0.0f, 0.0f, 0.0f, 0.0f, 0.0f,   // Red
    0.0f, 0.0f, 0.0f, 0.0f, 0.0f,   // Green
    0.0f, 0.0f, 1.0f, 0.0f, 0.0f,   // Blue
    0.0f, 0.0f, 0.0f, 1.0f, 0.0f,   // Alpha
    0.0f, 0.0f, 0.0f, 0.0f, 1.0f    // must be 1
};

青だけ抽出した結果