2012年11月29日木曜日

[C#] 画像描画と背景透過

[共通] 当 Blog の投稿に関する基本事項について
→ http://fuunyan.blogspot.jp/2012/09/blog.html


画像描画と銘打っていますが、実のところ先行して投稿した下記2記事の続きと言ってもいいかもしれません。

[C#] ListView のカラム部分に画像表示

[C#] ListView のカラム部分に画像表示(其の2:HDITEM版)

其の2の中で、実は背景が透過していないため色の指定次第で画像背景が目立ってしまうと問題定義しておいたことに対する対策方法となります。
タイトルを引き続き利用しようかとも考えたのですが、基本的に内容が異なるために別タイトルとしました。

前置きはこのくらいにして本題に入りましょう。
今回は前提無しです。
でいきなりコードとなります(説明はのちほど)
// OdrIdx:表示する数字
// Odr   :三角形の向き
private Bitmap CreateSortOrderBmp(int OdrIdx, int Odr)
{
    // やっていること
    // 背景塗りつぶし → ソート順により三角形作成 → フォント描画(上下中央右寄せ)
    Bitmap img = new Bitmap(16, 16);
    Graphics g = Graphics.FromImage(img);

    // 背景を塗りつぶし(透過色)
    g.FillRectangle(new SolidBrush(this.TransparencyKey), g.VisibleClipBounds); // ①

    // 三角描画
    Point[] pnt = new Point[4];
    switch (Odr)
    {
        case 1: // 上三角
            pnt = new Point[4] { new Point(4, 2), new Point(0, 10), new Point(8, 10), new Point(4, 2) };
            break;
        case 2: // 下三角
            pnt = new Point[4] { new Point(4, 13), new Point(0, 5), new Point(8, 5), new Point(4, 13) };
            break;
        case 0: // 非表示化
        default:
            // 無印化するので描画処理をやらずに終了
            g.Dispose();
            return img;
    }
    g.FillPolygon(Brushes.Gray, pnt);   // 先に塗りつぶし
    g.DrawPolygon(Pens.Black, pnt);     // 次に、線描画

    // 文字を描画
    Font fnt = new Font("MS ゴシック", 8, FontStyle.Bold);
    StringFormat sfmt = new StringFormat();

    sfmt.Alignment = StringAlignment.Far;           // 横の表示位置
    sfmt.LineAlignment = StringAlignment.Center;    // 縦の表示位置

    g.DrawString(OdrIdx.ToString(), fnt, Brushes.Red, new RectangleF(new PointF(0, 0), new SizeF(16, 16)), sfmt);

    // 描画作業が完了したのでグラフィッククラスを解放
    g.Dispose();

    // 作成した画像を戻り値に
    return img;
}
御覧の通り、今回はメソッドとなります。
画像描画を書いたことある人には、なんてことない内容となっています。
やりたかったことは、リストのカラムをクリックすることでソートするので、それの昇順と降順、選択順番を明記するために画像を表示しようと考えていました。
そんなこんなの描画部分についてはソースを見ていただくとして、今回メインとなる背景透過の部分について。
ズバリ①の部分です。
コメントにも書いてあるのでわかるかと思いますが対象画像の背景をフォームで透過色と指定されている色で塗りつぶしています。
こうすることでカラム部分に表示しても昇降を示す三角と数字以外は表示されないことになります。
あとはそうして作成した Bitmap を ImageList の該当する部分に登録してあげれば対策完了です。
当然ですが ImageList の項目数 = カラム数と言うことになるので、他にもアイコンやらを使う予定がある場合はあらかじめ ImageList の配置仕様を検討しておく必要があると思います。

あと当たり前の話ですが、事前に ImageList に画像を登録して、それを利用する場合は登録する画像の背景を this.TransparencyKey で指定する色と同じにしておく必要があるので注意です。

0 件のコメント:

コメントを投稿