GWTマウス移動

Question

マウスの位置に基づいて特定のポイントに文字列を描画しようとしています（ドラッグしているときのみ）。

問題は、xとyを拡大縮小するように見えるということです。私がマウスで0,0になっているとき、文字列が正しい場所に表示されますが、私が離れていくと、文字列がマウスから遠く離れて描画され、隠しスケーリングのことが起こっていると思います。

正しいマウス位置を取得するために、他の組み合わせを使用する必要がありますが、私はevent.getX（）とキャンバスの位置を使用していますか？以下

はあなたのコードがリサイズされていないキャンバスのために働く必要がありますコード

 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

です。キャンバスのサイズを変更する場合は、キャンバスの座標空間も同様に更新する必要があります。例えば、500pxなど、500pxなどサイズのキャンバスのためにあなたがすることによってこれを達成することができます：あなたのケースで

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

、あなたがパーセント値を使用して、キャンバスのサイズを、あなたが使用することができます。これらのメソッドドン以来

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

パーセント値を受け入れる場合、親コンテナの幅と高さをピクセル単位で計算する必要があります。