GWTでCanvasがないか探してたらGWT IncubatorのGWTCanvasというのが見つかった。使い方はHTML5のCanvasとほぼ同じだが、addMouseDownHandlerのようなメソッドが用意されておらず、どうやってイベント取得すればいいのかわからなかった。しかし、Googleで検索すると、すぐにでてきたきしだのはてな GWTCanvasでイベントの取得に書いてあったので、それを採用。Canvas継承してaddDomHandler使えばいいようだ。それで、試しにマウスで左ボタン押してる間、点を打ちつづけるようなプログラム作成した。Canvasの領域が見えないのは不便だと思ったので、境界に線を書いておいた。以下ソース
package canvas.client; import com.google.gwt.core.client.EntryPoint; import com.google.gwt.user.client.ui.RootPanel; import com.google.gwt.widgetideas.graphics.client.Color; import com.google.gwt.widgetideas.graphics.client.GWTCanvas; import com.google.gwt.event.dom.client.MouseEvent; import com.google.gwt.event.dom.client.MouseDownHandler; import com.google.gwt.event.dom.client.MouseDownEvent; import com.google.gwt.event.dom.client.MouseMoveHandler; import com.google.gwt.event.dom.client.MouseMoveEvent; import com.google.gwt.event.dom.client.MouseUpHandler; import com.google.gwt.event.dom.client.MouseUpEvent; public class MainEntryPoint implements EntryPoint { public MainEntryPoint() { } public void onModuleLoad() { DrawCanvas canvas = new DrawCanvas(400, 400); RootPanel.get().add(canvas); } private static class DrawCanvas extends GWTCanvas{ private boolean isMouseDown; protected DrawCanvas(int width, int height){ super(width, height); setStrokeStyle(Color.BLACK); beginPath(); moveTo(0, 0); lineTo(width, 0); lineTo(width, height); lineTo(0, height); closePath(); stroke(); isMouseDown = false; addDomHandler(new MouseDownHandler(){ public void onMouseDown(MouseDownEvent e){ isMouseDown = true; dotMousePosition(e); } }, MouseDownEvent.getType()); addDomHandler(new MouseMoveHandler(){ public void onMouseMove(MouseMoveEvent e){ if(isMouseDown) dotMousePosition(e); } }, MouseMoveEvent.getType()); addDomHandler(new MouseUpHandler(){ public void onMouseUp(MouseUpEvent e){ isMouseDown = false; } }, MouseUpEvent.getType()); } private void dotMousePosition(MouseEvent<?> e){ setFillStyle(Color.RED); fillRect(e.getX() - 4, e.getY() - 4, 8, 8); } } }