MFCで2つの描画を重ね合わせて透過描画させる方法

2016年9月22日

​MFCで2つの描画を重ね合わせて透過描画させたときのログです。

今回は、以下のコードでの描画を透過させます。

// デバイスコンテキストの取得.
CPaintDC dc(this);

// Pentagon.
DrawPentagon(&dc);

// Ellipse.
DrawEllipse(&dc);

透過処理を入れる前は、この状態です。
20150205_AlphaBlend_Before

この描画を透過させるために、描画処理を作り変えます。
今回は、CDC::Alphablend() を使用して透過処理を行うようにします。

// デバイスコンテキストの取得.
CPaintDC dc(this);
   
// 表示領域全体のRECT.
CRect rcWindow;
GetClientRect(&rcWindow);

// 透過用デバイスコンテキストの宣言と生成.
CDC alphaDC1;
alphaDC1.CreateCompatibleDC(&dc);
CDC alphaDC2;
alphaDC2.CreateCompatibleDC(&dc);

// 透過用ビットマップの宣言と生成.
CBitmap alphaBmp1;
alphaBmp1.CreateCompatibleBitmap(&dc, rcWindow.Width(), rcWindow.Height());
CBitmap alphaBmp2;
alphaBmp2.CreateCompatibleBitmap(&dc, rcWindow.Width(), rcWindow.Height());

// 透過用ビットマップを,透過用デバイスコンテキストへ設定する.
alphaDC1.SelectObject(alphaBmp1);
alphaDC2.SelectObject(alphaBmp2);

// 背景を透過用デバイスコンテキストへコピーする.
alphaDC1.BitBlt(0, 0, rcWindow.Width(), rcWindow.Height(), &dc, 0, 0, SRCCOPY);
alphaDC2.BitBlt(0, 0, rcWindow.Width(), rcWindow.Height(), &dc, 0, 0, SRCCOPY);

// 透過対象をそれぞれ透過用デバイスコンテキスト描画する.
// Pentagon.
DrawPentagon(&alphaDC1);

// Ellipse.
DrawEllipse(&alphaDC2);

// AlphaBlend(); を行う際の設定を行う.
BLENDFUNCTION bf;
bf.BlendOp = AC_SRC_OVER;
bf.BlendFlags = 0;
bf.AlphaFormat = 0;

// 透過率の設定.
// 0 = 0%(完全透過), 255 = 100%(不透過).
bf.SourceConstantAlpha = 200;

// AlphaBlend(); を使用して,デバイスコンテキストへのコピーを行う.
dc.AlphaBlend(rcWindow.left, rcWindow.top, rcWindow.Width(), rcWindow.Height(), &alphaDC1, rcWindow.left, rcWindow.top, rcWindow.Width(), rcWindow.Height(), bf);

// 透過率の設定.
bf.SourceConstantAlpha = 128;

// AlphaBlend(); を使用して,デバイスコンテキストへのコピーを行う.
dc.AlphaBlend(rcWindow.left, rcWindow.top, rcWindow.Width(), rcWindow.Height(), &alphaDC2, rcWindow.left, rcWindow.top, rcWindow.Width(), rcWindow.Height(), bf);

上記の処理を追加して描画すると、このように描画されます。
20150205_AlphaBlend_After

AlphaBlend では、SourceConstantAlpha の値を調整して、透過の濃淡を調整できます。
この描画方法だと、先に描画した部分に後から描画した部分の透過処理が影響してきます。
このため、後に描画する方の SourceConstantAlpha を 255 に設定すると、先に描画した部分は見えなくなります。
上記のサンプルでは、先に描画する際の SourceConstantAlpha を少し大きくすることで、最終的に同じくらいの色味になるようにしています。

おしまい。

スポンサーリンク