GWT: 標準ライブラリのHTML5Canvasを利用する ～UiBinder編～

GWTでHTML5Canvasを利用するのであれば、UiBinderを利用するとラクになります。

Inheritsの設定

<inherits name="com.google.gwt.canvas.Canvas">

と書きます。

UiBinderの書き方

xmlns:c="urn:import:com.google.gwt.canvas.client"
 <c:Canvas ui:field="canvas"/>

と書きます。

Javaファイルの書き方
ここはいくつか注意事項があります。

@UiField(provided = true)
Canvas canvas;
public MyCanvas() {
 canvas = Canvas.createIfSupported();
 initWidget(uiBinder.createAndBindUi(this));

 canvas.setWidth("800px");
 canvas.setHeight("800px"); 
 canvas.setCoordinateSpaceWidth(400);
 canvas.setCoordinateSpaceHeight(600);
}

上記を見てもらうとわかりますが、

• @UifFieldのところに、(provided = true)が必要
• canvas = Canvas.createIfSupported()の処理が必要で、さらにそれは initWidgetの前にしなければならない

ということです。

以上で、普通にCanvasを利用できます。イベント処理も楽になるのではないでしょうか。

GWT: 標準ライブラリのHTML5Canvasを利用する

GWTでHTMLCanvasを利用するには、過去にはサードパーティ製のライブラリ、例えば、

• GWT Incubator
• lib-gwt-svg 　・・・　本BLOGでも紹介

などがありましたが、今では　「com.google.gwt.canvas」の中に取り込まれています。以下、簡単な使い方です。

  Canvas canvas = Canvas.createIfSupported();
  canvas.setWidth("400px");
  canvas.setHeight("400px"); 
  canvas.setCoordinateSpaceWidth(400);
  canvas.setCoordinateSpaceHeight(400);
　Context2d context = canvas1.getContext2d();

上記には少しポイントがありまして、Canvas領域のサイズを変更するには、

setCoordinateSpace****();

というのを使わないといけないということ（これを理解するのに苦労しました）。

あとは、Context2dに対して描画のメソッドを呼ぶだけです。例えば下記のようにです。

context.fillRect(x,y,w,h);//塗りつぶした四角形を描く。尚、塗りつぶす色の指定はfillStyleプロパティで設定する。
context.strokeRect(x,y,w,h);//線だけの四角形を描く。尚、線の色の指定はstrokeStyleプロパティで設定する。
context.clearRect(x,y,w,h);//四角形の内容を消去する。
context.rect(x,y,w,h);//他のパスと組み合わせて四角形を描く。
context.fillText(text,x,y,[maxWidth]);//塗りつぶしのテキストを指定座標に描画する。
context.strokeText(text,x,y,[maxWidth]);//線だけのテキストを指定座標に描画する。
context.moveTo(x,y);//パスを作成する際に指定座標に移動させる。
context.lineTo(x,y);//直線を描画する。
context.stroke();//lineToメソッドなどで描画したパスを表示する。

その他にも、図形の回転、イメージ・映像の描画、描画した内容の保存などができるメソッドがあり、様々な表現がCanvas上で実現できるようになっています。

P.S
後記事の

• UiBinder編

のほうがオススメです。

GWT：HTML5Canvas用ライブラリ”Lienzo”

GWT関係のライブラリ紹介です。

現在、GWTではHTML5対応が進んでいて、HTML5Canvasをデフォルトで使うことができます。ネイティブのCanvasの仕様に準拠しているため、ある意味ガリガリとコードを書いていく必要があります。

で、emitorom社がLienzoと呼ぶオープンソースのHTML5Canvas対応ライブラリを公開しています。

Lienzo:An open source cross-platform structured graphics toolkit.

詳細説明は省きますが、個人的に気に入っているのは、

• ViewPortによるCanvas描画イメージの管理（JSon形式でシリアライズ出力可能）
• タブレットも含めた各種マウス・タッチイベントへの対応
• アニメーション処理、画像処理の実装

などが挙げられます。個人的には、ViewPortに一番関心がありますね。描画データを別に管理できるわけですから、ここがキモだと思ってます。

このライブラリは、Apache License Version 2.0で公開されていおり、おちラボでも正式採用の可能性大です！