GWT - マウスでキャンバスに描画する方法は？

Question

私はキャンバス上に線を描きたいと思います。マウスを押しながら線を引いてマウスを押してください。単純なペイントプログラムで線を描くのと同様です。

しかし、これはGWTでは非常に複雑なようです。これまでキャンバスを追加しましたが、キャンバスオブジェクトにマウスイベントハンドラを追加しても何も追跡されません。

私の問題に対処するものが見つからなかったので、インターネットを検索してもそれ以上は役に立ちませんでした。

誰かが私の要求のためのリソースを知っているか、誰かが例を挙げることができますか？それは素晴らしいだろう。ありがとう！ GWT + RxJava https://github.com/ibaca/rxcanvas-gwt/blob/master/src/main/java/rxcanvas/client/RxCanvas.java

で

Answer 1

ペイント使用してマウスイベントは、オフ・キャンバスのイベントを許可するようにダウンアップ期間の使用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); 

希望...