Question

我想在画布上画一条线，按住鼠标按住鼠标按下画线并释放鼠标。类似于在简单的绘图程序中绘制一条线。

然而，这在GWT中似乎非常复杂。到目前为止，我添加了一个画布，但是向我的画布对象添加鼠标事件处理程序不会跟踪任何内容

搜索互联网对我没有任何帮助，因为我没有找到解决我问题的任何内容。

有没有人知道我的请求的资源，或者有人举个例子。那太好了。谢谢！

Answer 1

使用GWT + RxJava https://github.com/ibaca/rxcanvas-gwt/blob/master/src/main/java/rxcanvas/client/RxCanvas.java

中的鼠标事件进行绘制

订阅画布鼠标移动事件，因为鼠标按下直到鼠标向上，在停机期间使用DOM捕获来允许画布外事件。最后配对鼠标移动事件并将diff绘制为一条线。

Answer 2

使用鼠标输入管理画布需要您向其添加HandlerRegistration。这就是我如何做到这一点，这可以帮助你把东西放在一起。

我当前项目中的这个类在模块之间来回传递。

/* 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;
        }
    }
}

设置供您自己使用的处理程序：

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);

希望这会有所帮助......

GWT - 如何在画布上用鼠标绘图？

2 个答案: