KineticJS 그룹/이미지 dragable의 설정 부분은

Question

이것은 내가 KineticJS에 필요한 것입니다 :

내가 큰 최대 300x300 이미지를 가지고, 내가 드래그 할 수 있도록하려면,하지만 난 상단에서 드래그를 클릭하는 경우에만 이미지의 1/4. 이 이미지의 나머지 부분을 드래그하려고하면 움직이기를 원하지 않습니다. 이것이 가능한가?

또한이 이미지를 드래그하려고하면 나머지 그룹의 항목을 드래그 할 수 있습니까?

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. 
}; 

또 다른 옵션은 윈도우와 mouseUp에 다음 group.setDraggable(false), 그 드래그 핸들에 대한 mousedown에 group.setDraggable(true)을 드래그 핸들 객체를 생성하는 것입니다. 이 두 번째 옵션은 훨씬 더 깨끗합니다.

Answer 2

가장 쉬운 방법은 이미지의 오른쪽 상단 구석에 직사각형 영역을 정의하는 맞춤 히트 영역 함수를 만드는 것입니다.

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