「Canvas(HTML5)」 VS 「ASP.NET」で図形描画

ASP.NET

Webで図形描画といえばHTML5のCanvasが今や常識ですが、
今回はASP.NETで図形描画してみました。


Ajaxの基本技術で一覧表示高速化はこちら！

処理概要

  1. 描画領域のPanelコントロールを作成
  2. PictureBoxコントロールに図形を描画→VB.NETによる図形描画と同じ
  3. PictureBoxコントロールをPanelコントロールに追加→Panelコントロール.Controls.Add(PictureBoxコントロール)
  4. PanelコントロールからBitmapコントロールを作成
  5. BitmapコントロールをGif形式に型変換して画面に書き出し

コードビハインドページのPGコード

ざっくり書くと以下のとおりです

        '描画領域のパネルを設定
        Dim pnlView As New Panel
        '図形を描画するグラフィックスを準備する
        Dim g As Graphics = Nothing

        '図形を描画するピクチャボックスを準備する(サイズ(300,500)、)
        Dim picBase As New PictureBox
        With picBase
            .Width = 300
            .Height = 500
            .SizeMode = PictureBoxSizeMode.AutoSize
            .BackColor = Color.White
            .Image = New Bitmap(200, 400)		'サイズ(200,400)
            g = Graphics.FromImage(.Image)
        End With

        '座標(20,20)から座標(40,40)に線(色：黒,サイズ：1)を引く
        g.DrawLine(New Pen(Color.Black, 1), 20, 20, 40, 40)

        '座標(50,50)から座標(100,100)に四角形(色：黒,サイズ：1)を引く
        g.DrawRectangle(New Pen(Color.Black, 1), 50, 50, 100, 100)

        '画像を追加
        bmp = Nothing
        bmp = New Bitmap("画像ファイルパス")
        '座標(150,200)にサイズ(横幅：50,縦幅：100)
        g.DrawImage(bmp, 150, 200, 50, 100)

        picBase.Name = "PIC"
        pnlView.Controls.Add(picBase)
        picBase.Parent = pnlView
        g.Dispose()

        Dim pnlSize As System.Drawing.Size = pnlView.Controls.Item("PIC").Size
        pnlView.Width = pnlSize.Width
        pnlView.Height = pnlSize.Height
        pnlView.AutoScroll = True
        pnlView.AutoSize = True

        'ビットマップを画面に送信
        Dim aViewBitMap As System.Drawing.Bitmap =  _
                New System.Drawing.Bitmap(pnlSize.Width, pnlSize.Height)
        Try
            pnlView.DrawToBitmap(aViewBitMap,  _
                        (New System.Drawing.Rectangle(0, 0, pnlSize.Width, pnlSize.Height)))
            Response.ContentType = "image/gif"
            aViewBitMap.Save(Response.OutputStream,System.Drawing.Imaging.ImageFormat.Gif)
        Catch ex As Exception
            'エラー処理
        Finally
            aViewBitMap.Dispose()
        End Try

まとめ

  • ASP.NETで図形描画する場合はビットマップに図形を描画してGifに変換してHTMLに出力(レスポンス)
  • 図形が画面のサイズより大きい場合、ブラウザの機能で自動的に画像が縮小表示されるのが問題！