javascript-dragBoundFunc中的鼠标位置

我正在使用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()中获取鼠标在画布中的位置？

谢谢

解决方法:

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

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

标签：kineticjs,canvas,javascript
来源： https://codeday.me/bug/20191031/1977330.html