KineticJS - 组/图像dragable的设置部分

Question

这是我需要KineticJS：

我有一个大的300x300的图像，我希望能够拖动它，但只有当我点击并拖动在上四分之一的图像。如果我试图拖动这个图像的其余部分，我不希望它移动。这可能吗？另外，如果我试图拖动这个图像，我怎么才能让它拖动组中的其余项目呢？

Answer 1

在这里看到：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. 
}; 

另一种选择是对窗口鼠标松开鼠标按下上创建一个拖动手柄对象，group.setDraggable(true)对于拖动手柄，然后group.setDraggable(false)。第二个选项可能更清洁。

Answer 2

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

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