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

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

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

搜索互联网并没有帮助我进一步，因为我没有找到任何解决我的问题。

有没有人知道我的请求资源或有人可以举个例子。那太好了。谢谢！在GWT + RxJava https://github.com/ibaca/rxcanvas-gwt/blob/master/src/main/java/rxcanvas/client/RxCanvas.java

来源

2017-06-21 toom

我认为你在正确的方向的时候，并修补了“，但加入鼠标事件处理程序到我的画布对象不追踪任何“问题。 – Andrei

使用画图鼠标事件订阅帆布鼠标移动事件，因为鼠标下来，直到鼠标向上，向下期使用DOM在捕捉过程中允许现成的画布事件。最后配对鼠标移动事件并将diff作为一条线。

来源

2017-06-22 05:33:12

我实际上做了一组3个事件而不是2个绘制beizer曲线而不是一行，但这只是一个实验，使用buffer（2,1）就足够了。 –

使用鼠标输入管理画布需要添加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);

希望这有助于...

来源

2017-06-26 08:23:43 WLGfx

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

回答

相关问题