Question

我只是在学习Kinetic.js，我真的很高兴使用HTML5 <canvas>元素。

我有一个大于“舞台”的大图层（使用Kinetic说法）但是可拖动。拖动功能似乎以两种不同的方式干扰点击处理程序：有些单击不会注册;而且，如果图层处于原始位置，那么该位置才是准确的。

Here's a fiddle显示我遇到的问题。在我的实际代码中，底层实际上是一个图像。

Answer 1

layer.on ('click', function(e) {
    console.log(e);
    var mousePos = stage.getMousePosition(); // mouse position relative to stage
    var xclick = mousePos.x;
    var yclick = mousePos.y;
    var circle = new Kinetic.Circle({
        x: xclick - layer.getX(), // since position is relative to stage, adjust by layer X
        y: yclick - layer.getY(), // same as above
        radius: 25,
        fill: 'red',
        opacity: 0.5
    });
    layer.add(circle);
    stage.draw();       // redraw the stage immediately
});

任何似乎未注册的点击都是由于可拖动的事件触发会覆盖点击事件。

如何在可拖动图层上单击时获得准确的指针位置？

1 个答案: