KineticJS를 사용하여 캔버스에서 두 개의 드래그 가능한 요소를 항상 연결하는 선

Question

Kinetic JS를 사용하여 HTML5 캔버스에서 유스 케이스 작성기를 만들려고합니다. 이제까지 두 요소를 마우스 오른쪽 버튼으로 클릭하여 줄을 만들 수 있습니다 (액터 및 사용 사례) 연결하고 싶습니다.

그러나이 줄은 연결된 요소 중 하나를 끌 때 고정되어 있습니다. 둘 중 하나가 드래그 된 경우에도 항상 두 요소를 연결하는 선이 필요합니다.

다른 말로하면, 라인이 연결된 요소가 라인의 앵커 역할을하도록합니다.

나는 this을 이해하려고 시도했지만 구현에 실패했습니다.

Answer 1

액터 또는 유스 케이스를 끌 때 연결선의 위치를 ​​변경하여 액터 + 유스 케이스를 연결된 상태로 유지할 수 있습니다.

으로하는 동적 라인

1. 배우 노드,
2. 유스 케이스 노드를 연결하기에 전념 :
   는 3 개 운동 노드 또는 그룹을 가정합니다.

액터 및 useCase에 대한 dragmove 이벤트 핸들러를 설정하십시오.

// when the actor is dragged, reposition the connecting line 

actor.on('dragmove', function() { 
    connectThem(actor,useCase,connectingLine); 
}); 

// when the useCase is dragged, reposition the connecting line 

useCase.on('dragmove', function() { 
    connectThem(actor,useCase,connectingLine); 
}); 

dragmove 처리기에서 액터와 케이스 위치를 가져 와서 연결선의 위치를 ​​변경하십시오.

// reposition the line to connect the actor & useCase 

function connectThem(actor,useCase,connectingLine){ 

    // get the XY of the actor+useCase to connect 
    var x1 = actor.getX(); 
    var y1 = actor.getY(); 
    var x2 = useCase.getX(); 
    var y2 = useCase.getY(); 

    // reposition the connecting line 
    connectingLine.setPoints([x1,y1,x2,y2]); 

    // send the connecting line to the back 
    connectingLine.setZIndex(0); 

    // redraw the layer 
    layer.draw(); 
};