GWT Mouse Movement

Question

J'essaye de dessiner une chaîne à un point précis en fonction de la position de la souris (seulement lorsque je suis en train de glisser).

Le problème est, qu'il semble mettre à l'échelle les x et y. Quand je suis à 0,0 avec la souris, la ficelle s'affiche au bon endroit, mais au fur et à mesure que je m'éloigne, la ficelle s'éloigne de plus en plus de ma souris ce qui me fait penser à une mise à l'échelle cachée ...

J'utilise event.getX() et la position du canevas, dois-je utiliser une autre combinaison pour obtenir la bonne position de la souris?

ci-dessous est le code

 final Canvas canvas = Canvas.createIfSupported(); 
     final AsyncBool mouseDown = new AsyncBool(false); 

     final Context2d context = canvas.getContext2d(); 
     context.setFont("bold 8px sans-serif"); 

     canvas.setWidth("100%"); 
     canvas.setHeight("100%"); 

     canvas.addMouseMoveHandler(new MouseMoveHandler() { 
      @Override 
      public void onMouseMove(MouseMoveEvent event) 
      { 
       if(mouseDown.getBool()) 
       { 

        context.fillText("Bored.", event.getX() - canvas.getAbsoluteLeft(), event.getY() - canvas.getAbsoluteTop()); 
       } 

      } 
     }); 
     canvas.addMouseDownHandler(new MouseDownHandler() { 
      @Override 
      public void onMouseDown(MouseDownEvent event) 
      { 
       mouseDown.setBool(true); 
      } 
     }); 
     canvas.addMouseUpHandler(new MouseUpHandler() { 
      @Override 
      public void onMouseUp(MouseUpEvent event) 
      { 
       mouseDown.setBool(false); 
      } 
     }); 



     RootPanel.get().add(canvas); 

Answer 1

Votre code devrait fonctionner pour une toile qui est pas redimensionnée. Mais si vous redimensionnez votre canevas, vous devez également mettre à jour l'espace de coordonnées du canevas. Par exemple, pour une 500px, 500px taille toile, vous pouvez y parvenir en:

canvas.setSize("500px","500px"); 
canvas.setCoordinateSpaceHeight(500); 
canvas.setCoordinateSpaceWidth(500); 

dans votre cas, vous la taille de votre toile en utilisant des valeurs de pourcentage, vous pouvez utiliser:

canvas.setSize("100%","100%"); 
canvas.setCoordinateSpaceHeight(Window.getClientHeight()); 
canvas.setCoordinateSpaceWidth(Window.getClientWidth()); 

puisque ces méthodes don N'acceptez pas les valeurs en pourcentage, vous devez calculer la largeur du conteneur parent et la hauteur en pixels.