マイペースなプログラミング日記

DTMやプログラミングにお熱なd-kamiがマイペースに書くブログ

GWTCanvasで簡単なお絵描き

GWTCanvasがないか探してたらGWT IncubatorのGWTCanvasというのが見つかった。使い方はHTML5Canvasとほぼ同じだが、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);
        }
    }
}