Javascript dragBoundFunc中的鼠标位置

我在画布上画一些小部件。此小部件的宽度为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
    }
});

cursor.setDragBoundFunc（函数（pos）{
var caseSize=宽度/caseNum；
var posX=数学轮（pos.x/caseNum）*案例大小；
如果（posX>（宽度-箱子尺寸））{
posX=宽度-箱子尺寸；
}
if（posX<0）{
posX=0；
}
返回{
x:posX，
y:cursor.getAbsolutePosition（）.y
}
});

问题是

pos.x

并不表示鼠标在画布中的位置，而是从拖动事件开始时的鼠标位置（即使我从画布中间开始拖动，pos也将为0,0）

下面是问题的一个例子：

如何在

setDragBoundFunc（）

中获取画布中的鼠标位置

---

谢谢

似乎

setDragBoundFunc

函数接受两个参数，第二个参数是一个

事件

对象，可能包含您想要的内容：

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
   ...
});

工作示例：

---

除了@Jan的答案，你的数学有点不对劲：

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

---

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

---

试试看：）

你能设置一个jsFiddle来演示这个问题吗？

console.log（pos）

将

pos

的内容记录到你的浏览器中。然后你可以检查这个对象，看看它是否包含你想要的东西。@shmiddy:这是小提琴：。查看控制台以查看pos.x的值。如果通过单击蓝色矩形的右侧部分开始拖动该矩形，则pos.x位于0I，用于记录整个

pos

对象，以防它包含更多变量。但是它没有，只有x和y…而且，每次调用

draw

，看起来都在创建一个新的层，这会在DOM中产生一个新的画布。

floor

可能比

round

更合适。太糟糕了，我以前没有看到它^ ^，我将对github repo进行更多的研究，谢谢。