Canvas を柔軟に使うためのコントロール CanvasEx の製作(1)

Xojo のデスクトップアプリケーションにおいて、画像の表示などで Canvas を使用することが多いですが、Canvas の大きさが変化する場合、その大きさに合わせて再描画を行う必要があります。また、工夫をしないと別ウインドウの下になっていた部分に画像表示の欠けが発生したりする場合があります。このコラムでは「イメージバッファ」を利用して Canvas に描画を行う方法を解説します。

1.用語

Canvas コントロール
Canvas コントロールはデスクトップアプリケーションで画像を表示させる時に一般的に使用されるコントロールです。

Paint イベント
Paint イベント は、別のウインドウが閉じられて自分が最前面に表示されたときなど、Canvas が再描画の必要ありと判断した時に発生するイベントです。引数として g As Graphics が渡されますので、線を引く、画像を貼り付けるなどの描画操作はこの g に対して行います。三角形を描くプログラムをこのイベントに描いておけば、画面が更新されるときはいつでも三角形が描画されることになります。
その他、この Canvas に対して Invalidate メソッドを使用すると、強制的に Paint イベントを呼び出し実行することができます。アニメーションやゲームなどを表示するときのように、別ウインドウとの上下関係などには変更はないが Canvas 内を更新する必要がある場合には Invalidate メソッドを実行することで、強制的に Canvas 内を描き直すことができます。

イメージバッファ
ここで言うイメージバッファとは Canvas に表示する画像を保管しておく Picture を指します。初期化などの際に Picture に画像をあらかじめ読み込んでおくことで、Paint イベントが発生した時にすぐに描画を行うことができます。また、元の画像を保管しておくため、元の画像を Canvas に描画する際に元の画像イメージをそのまま保持したまま任意に拡大縮小転送描画を行うことができます。

2.仕様

今回は Canvas コントロールクラスに、以下の仕様を追加した Canvas クラスを親とした canvasEx コントロールを作成します。

仕様
・コントロール内にイメージバッファとなる Picture プロパティを作成する
・コントロール内に表示したい画像をイメージバッファに転送する初期化用メソッ
ドを作成する。
・Paint イベント発生時には、このイメージバッファの内容を描画する。

3.CanvasEx コントロールの作成

3.1 CanvasEx クラスを作成する

まず新規プロジェクトを用意し、以下の方法で CanvasEx クラスを作成します。

クラスの作成

3.1.1 プロジェクトリスト内で右クリックをしてメニューから「クラス」を選択します。

→ プロジェクト内に Class1 クラスが作成されます。

 

 

 

 

クラス名の変更

3.1.2 Class1 クラスの名称を CanvasEx に変更します。インスペクタボタンをクリックしてクラス名を表示、クラス名を編集して CanvasEx に変更します。また、親クラスを Canvas に変更します。

3.2 イメージバッファ用のプロパティを作成する

プロパティの設定を変更する

クラスにプロパティを追加します。Untitled As Integer というプロパティが作成されますので、3.1.2 と同様に名前を imageBuffer、型を Picture に設定します。

3.3 Init メソッドを作成する

クラスにメソッドを追加します。名称を Init として引数に p As Picture を引き渡すようにします。この p に渡された画像をイメージバッファの中に取り込むプログラムを書きます。

// イメージバッファに Picture のインスタンスを作成する
Self.imageBuffer = New Picture( p.width, p.height )

// 作成した Picture に画像を描画する
Self.imageBuffer.Graphics.DrawPicture( p, 0, 0 )

 

(つづく)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です