KineticJS - 设置可拖动的组/图像部分

Question

这就是我在KineticJS中所需要的：

我有一个300x300的大图像，我希望能够拖动它，但只有当我在图像的上四分之一点击拖动时才会这样。如果我试图拖动此图像的其余部分，我不希望它移动。这可能吗？

此外，如果我尝试拖动此图片，如何将其拖动到组中的其余项目？

Answer 1

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

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

Answer 2

见这里：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.
};

另一种选择是在该拖动句柄的mousedown上创建拖动句柄对象group.setDraggable(true)，然后在窗口鼠标上创建group.setDraggable(false)。第二种选择可能更清洁。