3

我正在使用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()？

谢谢

4

3 回答 3

2

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

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

试试看 ：）

于 2012-11-16T06:56:30.893 回答
1

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

cursor.setDragBoundFunc(function(pos, event){
    var posX = event.offsetX;
    posX = Math.floor(posX/WIDTH * caseNum) * caseWidth;
    ...
于 2012-11-14T16:34:46.717 回答
1

该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/

于 2012-11-14T16:13:26.580 回答