2013年2月25日月曜日

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

GWTでHTMLCanvasを利用するには、過去にはサードパーティ製のライブラリ、例えば、
などがありましたが、今では 「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
後記事の
のほうがオススメです。


0 件のコメント:

コメントを投稿