3

ドラッグ可能でズーム可能なステージで kineticjs を使用しています。ノードの絶対stage.getAbsoluteMousePosition()位置を取得できるので、取得する方法があるかどうか知りたいです。

ユース ケースを示すjsfiddleを次に示します。ズームイン/ズームアウトするときのツールチップの位置に注意してください。

興味深い部分は次のとおりです。

circle.on('mouseover mousemove',function(){

     var mousePos = stage.getMousePosition();
     tooltip.setPosition(mousePos.x-stage.getAbsolutePosition().x,mousePos.y-stage.getAbsolutePosition().y);
     tooltip.setVisible(true);
     tooltip.moveToTop();
     layer.draw();        
});

私はそれを機能させるのに問題があり、私はそれgetAbsoluteMousePositionを修正すると信じています.

一番、

編集：この質問は時代遅れです。

4

2 に答える 2

3

古い回答

わかりました、私が望んでいた絶対位置を使用していないと思っていても、自分で修正しました。

これがjsfiddleです。適切な方法は次のとおりです。

 circle.on('mouseover mousemove', function () {
         var mousePos = stage.getMousePosition();
         tooltip.setPosition(mousePos.x/ui.scale-stage.getAbsolutePosition().x/ui.scale+stage.getOffset().x,
         mousePos.y/ui.scale-stage.getAbsolutePosition().y/ui.scale+stage.getOffset().y);
         tooltip.setVisible(true);
         tooltip.moveToTop();
         layer.draw();
    });
于 2013-06-28T00:07:11.533 に答える
2

私が正しく理解していれば、マウスポインタの画面への絶対位置を取得したい場合は、次のようにすることができます。

circle.on('mouseover mousemove', function (e) {
    var mousePos = stage.getMousePosition();
    var absoluteX = e.screenX;
    var absoluteY = e.screenY;
    tooltip.setPosition(mousePos.x - absoluteX, mousePos.y - absoluteY);
    tooltip.setVisible(true);
    tooltip.moveToTop();
    layer.draw();
});

マウスの (x,y) 座標は、画面ではなくキャンバスを基準にする必要があるため、これは答えを解決しません。なぜうまくいかないtooltip.setPosition(mousePos.x, mousePos.y);のか正確にはわかりません.ズームがmousePos座標を何らかの形で台無しにしているに違いありません.

とにかく、ツールチップを正しいノードの上に置くだけで、マウスの位置をたどらないようにする必要がある場合は、これでうまくいくはずです。

tooltip.setPosition(this.getX(), this.getY());

また、必要に応じて、高さ (半径) の半分など、特定の量だけオフセットすることもできます。

tooltip.setPosition(this.getX(), this.getY()-this.getHeight()/2);

http://jsfiddle.net/projeqht/nDpYr/

于 2013-06-27T04:15:50.950 に答える