GWT - Wie zeichne ich mit der Maus auf einer Leinwand?

Question

Ich möchte eine Linie auf einer Leinwand zeichnen, die Maus gedrückt halten, die Maus drücken, die Linie zeichnen und die Maustaste loslassen, drücken. Ähnlich wie beim Zeichnen einer Linie in einem einfachen Malprogramm.

Allerdings scheint dies in GWT sehr kompliziert zu sein. Bisher habe ich einen Canvas-Bereich hinzugefügt, aber das Hinzufügen von Maus-Event-Handlern zu meinem Canvas-Objekt verfolgt nichts.

Die Suche im Internet hat mir nicht weiter geholfen, da ich nichts gefunden habe, was mein Problem angeht.

Kennt jemand eine Ressource für meine Anfrage oder könnte jemand ein Beispiel geben. Das wäre großartig. Vielen Dank!

Answer 1

Male mit der Maus Ereignisse in GWT + RxJava https://github.com/ibaca/rxcanvas-gwt/blob/master/src/main/java/rxcanvas/client/RxCanvas.java

abonnieren Leinwand Mausbewegungsereignisse da die Maus nach unten und bis Maus nach oben, während der Abwärtsperiode Einsatz DOM-Capture-off-the-Leinwand Veranstaltungen zu ermöglichen. Schließlich koppeln Sie das Mausbewegungsereignis und zeichnen Sie das Diff als eine Linie.

Answer 2

Zum Verwalten einer Zeichenfläche mit Mauseingaben müssen Sie HandlerRegistration hinzufügen. Hier ist, wie ich es getan habe, was Ihnen helfen könnte, etwas zusammenzufügen.

Diese Klasse in meinem aktuellen Projekt wird zwischen den Modulen hin- und hergereicht.

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

So richten Sie die Handler für den eigenen Gebrauch:

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

hoffe, das hilft ...