javascript - dragBoundFunc 中的鼠标位置

Question

我正在使用 kineticjs在 Canvas 上绘制一些小部件。这个小部件是 600px 宽，由几个矩形组成(默认为 24​​)。在这个矩形上可以拖动另一个矩形，我们称它为“光标”。

我希望光标仅在我的鼠标足够远时才跳到其他矩形，而不是平滑拖动(如果您愿意，可以像步进拖动一样)。

例如，如果光标位于 0,0，而我总共有 24 个矩形，我希望仅当鼠标位于 25,0(600px/24 个矩形 = 25px)时，我的光标才移动到下一个矩形。

所以我已经实现了:

cursor.setDragBoundFunc(function(pos){
    var caseSize = WIDTH / caseNum;
    var posX = Math.round(pos.x/caseNum) * caseSize;
    if(posX > (WIDTH - caseSize)) {
        posX = WIDTH - caseSize;
    }

    if(posX < 0 ) {
        posX = 0;
    }

    return {
        x: posX, 
        y: cursor.getAbsolutePosition().y
    }
});

问题是 pos.x 不代表 Canvas 中的鼠标位置，而是从拖动事件开始时的鼠标位置(即使我从中间开始拖动，pos 也将为 0,0 Canvas )。

这里有一个问题的例子:http://jsfiddle.net/H9rpz/

如何在 setDragBoundFunc() 中获取鼠标在 Canvas 中的位置？

谢谢

Answer 1

此确切功能已在 KineticJS 手动测试中实现。这是您要查找的代码:

https://github.com/ericdrowell/KineticJS/blob/master/tests/js/manualTests.js#L1004

试一试:)