GWT - How to draw with the mouse on a canvas?

Question

I would like to draw a line on a canvas be pressing the mouse holding the mouse press drawing the line and releasing the mouse press. Similar to drawing a line in a simple paint program.

However, this seems to be very complicated in GWT. So far I added a canvas but adding mouse event handlers to my canvas object does not track anything.

Searching the internet didn't help me any further since I did not find anything that addresses my issue.

Does anyone know a resource for my request or could somebody give an example. That would be great. Thanks!

Answer 1

Paint using mouse events in GWT + RxJava https://github.com/ibaca/rxcanvas-gwt/blob/master/src/main/java/rxcanvas/client/RxCanvas.java

Subscribe to canvas mouse move events since mouse down and until mouse up, during the down-up period use DOM capture to allow off-the-canvas events. Finally pair the mouse move event and draw the diff as a line.

Answer 2

Managing a canvas with mouse inputs requires you to add HandlerRegistration's to it. Here's how I've done it which may help you to put something together.

This class in my current project gets passed back and forth between modules.

/* PreviewCanvas replaces Canvas which makes it more reliable when
 * adding and removing mouse handlers as the reference gets passed
 * through to the editing module and then through to the size bar.
 * At least now it can remove any handlers when initiating another
 * module editor.
 */

public class PreviewCanvas {

    public Canvas canvas;

    // handler registrations (allows sharing across modules)

    public HandlerRegistration mousedown = null;
    public HandlerRegistration mouseup = null;
    public HandlerRegistration mousemove = null;

    public PreviewCanvas() {}

    public void setHandlers(HandlerRegistration mousedownhandler, 
            HandlerRegistration mouseuphandler,
            HandlerRegistration mousemovehandler) {
        mousedown = mousedownhandler;
        mouseup = mouseuphandler;
        mousemove = mousemovehandler;
    }

    public void removeHandlers() {
        if (mousedown != null) {
            mousedown.removeHandler();
            mousedown = null;
        }

        if (mouseup != null) {
            mouseup.removeHandler();
            mouseup = null;
        }

        if (mousemove != null) {
            mousemove.removeHandler();
            mousemove = null;
        }
    }
}

To setup the handlers for your own use:

canvas.clearHandlers();

HandlerRegistration mousedownhandler = canvas.canvas.addMouseDownHandler(new MouseDownHandler() {

    @Override
    public void onMouseDown(MouseDownEvent event) { // mouse DOWN
        int x = event.getX();
        int y = event.getY();
        // etc ...
    }
});

HandlerRegistration mouseuphandler = canvas.canvas.addMouseUpHandler(new MouseUpHandler() {

    @Override
    public void onMouseUp(MouseUpEvent event) { // mouse UP
        if (mousedown) {
            int x = event.getX();
            int y = event.getY();
            // etc ...
        }
        mousedown = false;
    }
});

HandlerRegistration mousemovehandler = canvas.canvas.addMouseMoveHandler(new MouseMoveHandler() {

    @Override
    public void onMouseMove(MouseMoveEvent event) { // mouse MOVE
        if (mousedown) {
            int x = event.getX();
            int y = event.getY();
            // etc ...
        }
    }
});

// PreviewCanvas var
canvas.setHandlers(mousedownhandler, mouseuphandler, mousemovehandler);

Hope this helps...