0

这就是我在 KineticJS 中需要的：

我有一个 300x300 的大图像，我希望能够拖动它，但前提是我在图像的上半部分单击拖动。如果我尝试拖动此图像的其余部分，我不希望它移动。这可能吗？

此外，如果我尝试拖动此图像，如何使其将组中的其余项目与它一起拖动？

4

2 回答 2

2

最简单的方法是创建一个自定义命中区域函数，该函数在图像的右上角定义一个矩形区域。这是一个例子：

http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-custom-hit-function-tutorial/

于 2012-12-19T15:49:26.727 回答
0

See here: http://jsfiddle.net/NnD5q/

box.on('mousedown', function(e){
    var bX = box.attrs.x, bY = box.attrs.y;

    // set draggable false if they aren't in our click range 
    // (a 20x20 square in the top left)
    if (e.x > bX + 20 || e.y > bY + 20)
        box.setDraggable(false);          
});
window.onmouseup = function(e){
    box.setDraggable(true);  // set draggable true on **window** mouseup.
};

Another option would be to create a drag handle object, group.setDraggable(true) on mousedown for that drag handle, then group.setDraggable(false) on window mouseup. This second option is likely much cleaner.

于 2012-12-13T00:03:53.593 回答