Question

我正在使用kineticjs在画布上绘制一些小部件。此小部件宽度为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不代表画布中的鼠标位置，而是鼠标从拖拽事件开始的位置（即使我从画布的中间开始拖动，pos也是0,0）。

此处有一个问题示例：http://jsfiddle.net/H9rpz/

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

由于

Answer 1

这一确切功能已在KineticJS手动测试中实施。这是您正在寻找的代码：

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

试一试：）

Answer 2

似乎setDragBoundFunc函数接受两个参数，第二个是event对象，可能包含你所追求的内容：

cursor.setDragBoundFunc(function(pos, event){
   var posX = event.offsetX;
   ....
});

在函数开头也有数学逻辑错误。它应该是：

cursor.setDragBoundFunc(function(pos, event){
   var caseSize = WIDTH / caseNum;
   var posX = event.offsetX;
   posX = Math.floor(posX /  caseSize) *  caseSize; // This right here
   ...
});

工作示例： http://jsfiddle.net/H9rpz/3/

Answer 3

除了@ Jan的回答，你的数学还有点偏差：

cursor.setDragBoundFunc(function(pos, event){
    var posX = event.offsetX;
    posX = Math.floor(posX/WIDTH * caseNum) * caseWidth;
    ...

dragBoundFunc中的鼠标位置

3 个答案: