kineticjs 마우스에 그룹 부착하기

Question

kineticJs에서 그룹을 레이어에 추가 한 후에 그룹을 사용자 마우스 포인터에 바인딩하여 사용자가 그룹을 원하는 위치로 이동할 수 있습니까? 그런 다음 해당 위치를 클릭하여 드롭합니다.

Answer 1

이렇게하면됩니다. 사용자가 레이어에 그룹을 추가하려고 할 때 다음 코드가 실행됩니다.

layer.add(group); 
layer.draw(); 
console.log(stage.getMousePosition()); 
stage.on('mousemove', 
    function(){ 
     var mouse = stage.getMousePosition(); 
     group.setX(mouse.x); 
     group.setY(mouse.y); 
     layer.draw(); 
    }); 
stage.on('click', 
    function(){ 
     stage.off('mousemove'); 
    }); 

잊혀지지 않습니다. 스테이지가 계속 mousemove 이벤트를 가져 오려면 빈 영역에서 작동하지 않으므로 불투명도 0 인 경우에도 일부 레이어에 직사각형을 그려 무대에 추가하십시오.

Answer 2

그룹을 만들 때 그룹 속성을 draggable : true로 설정할 수도 있고 생성 후 드래그 가능으로 설정할 수도 있습니다.

<script> 
    // make draggable on creation 
    var group = new Kinetic.Group({ 
    draggable: true; 
    }); 

    // make draggable after creation 
    group.setDraggable(true); 
</script> 

이러한 방법은 그룹을 동일한 방법으로 이동 한 후에 끌 수 있습니다.

http://www.html5canvastutorials.com/kineticjs/html5-canvas-drag-and-drop-a-group-with-kineticjs/