createJS/easelJS에서 여러 객체를 동시에 이동

Question

저는 프로젝트를위한 createJS 프레임 워크 내에서 easelJS를 사용 해왔고 최근에로드 블록을 치기까지는 많은 즐거움을 느꼈습니다. 그룹 중 하나를 끌 때 동시에 움직이고 싶은 여러 객체가 있습니다. 빨간색 원이 이동할 때 내가 뭘하려는 것은

, 빨간 십자는 또한 그들이 원에 "고정"을 한 것으로 나타났습니다 너무 움직일 것입니다 : 여기에 내 현재의 상황이다. 녹색 원과 동일합니다.

이 질문에 대한 답변에서 언급 한 바와 같이 나는, 컨테이너에 원과 십자선을 추가하여이 매우 가까운 무언가를 달성 할 수 있었다 :

Easeljs Scrollable Container

하지만 발생하는 문제이다 컨테이너는 사실 직사각형이므로 원과 십자선 사이의 아무 곳이나 클릭하여 컨테이너에 포함 된 다양한 객체를 이동할 수 있습니다. 대신 원을 클릭하면 객체가 이동 에만 있습니다.

누구에게 어떤 방법으로 아이디어를 얻을 수 있습니까? 이것이 easelJS 컨테이너로 어떻게 든 완성 될 수 있다고 생각하면 맞습니까?

Answer 1

컨테이너가 좋을 것입니다. 십자형 머리를 무시할 수 있도록 mouseEnabled을 십자형으로 끌 수 있습니다.

십자형/원마다 오프셋을 저장하고 원이 움직일 때 십자형 머리말 위치 만 설정할 수도 있습니다. http://jsfiddle.net/lannymcnie/kah9of6e/

// Set the offset when the circle is pressed 
circle.on("mousedown", function(e) { 
    circle.offset = new createjs.Point(crosshair.x-circle.x, crosshair.y-circle.y); 
}); 

// Add drag and drop to each shape 
circle.on("pressmove", handleDrag); 
crosshair.on("pressmove", handleDrag); 

function handleDrag(e) { 
    // Move the target to the mouse 
    e.target.x = e.stageX; e.target.y = e.stageY; 

    // If the target is the circle, also move the cross-hair 
    if (e.target == circle) { 
    // Move the cross-hair 
    crosshair.x = circle.x + circle.offset.x; 
    x.y = circle.y + circle.offset.y; 
    } 
}