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/