Kineticjs和hammerjs:拖动舞台时正确更新鼠标位置

Kineticjs and hammerjs: Update Mouseposition correctly when stage was dragged

本文关键字：更新 鼠标 位置 舞台 hammerjs 拖动 Kineticjs      更新时间：2023-09-26

所以，我有一个可拖动的舞台，我向它添加了新的形状（双击/点击）。现在我的问题是，当我拖动舞台并在它之后创建一些新对象时，我的对象在舞台的错误位置上创建。这是我迄今为止的代码（摘录）：

$('#toolbox_container').hammer().on('doubletap', function(e) {
        //console.log('x:' + e.gesture.center.pageX + ' y: ' + e.gesture.center.pageY);
        var xPos = e.gesture.center.pageX - this.offsetLeft;
        var yPos = e.gesture.center.pageY - this.offsetTop;
        // call addnode with position of tap/mouse
        addNode(xPos, yPos);
    });

在这里添加更多行之前，我制作了这个简化的jsfiddle来显示问题所在。只需双击（/tap）舞台即可。然后拖动舞台。然后，双击=>错误的位置：http://jsfiddle.net/4vfBY/7/

如果有人能在这里帮我就太好了。我认为我的问题是错误地定义了xPos和yPos，但我对如何做到这一点没有更好的想法。

谨致问候，Dominik

所以，现在就开始工作了。我所要做的就是在拖动后从舞台上获得X和Y坐标，并将它们添加到我的xPos/yPos中，如下所示：

$('#toolbox_container').hammer().on('doubletap', function (e) {
    stageX = stage.getX();
    stageY = stage.getY();
    var xPos = e.gesture.center.pageX - this.offsetLeft - stageX; //apply stageX
    var yPos = e.gesture.center.pageY - this.offsetTop - stageY; //apply stageY
    // call addnode with position of tap/mouse
    addNode(xPos, yPos);
});

你可以在这里看到一个工作演示：http://jsfiddle.net/s9PAD/1/

相关文章：