EaselJS - 스케일 된 부모의 자식 드래그

참고 : ** 이제 해결되었습니다. 내 답변에 '수정'을 참조하십시오. 알 맞는 정보를 자유롭게 주입하십시오.EaselJS - 스케일 된 부모의 자식 드래그

처음에는 localToGlobal, localToLocal 및 globalToLocal을 공부하고 인터넷 검색을 해왔지만, 달성하려는 목표를 달성하기에 충분할 정도로 이러한 방법을 이해하지 못했습니다. 즉, 규모가 확대 된 상위 항목에서 항목을 드래그하는 것입니다.

일부 그래픽 노드가 포함 된 컨테이너가 있습니다. 컨테이너의 scaleX 및 scaleY는 0.5 (또는 임의의 다른 임의의 수)입니다.

노드를 드래그 할 때 e.mouseX/Y (Stage.mousX/Y와 같음)와 함께 인라인으로 크기 조정 된 상위 컨테이너 내에서 이동해야합니다.

아래는

없음 스케일 입증하기 위해 몇 가지 jsfiddles 있습니다 - 표준 드래그 WIH 잘 작동/드롭 코드 : - : 당신으로 http://jsfiddle.net/MZ6LE/3/

스케일 http://jsfiddle.net/MZ6LE/1/

표준 드래그 실패/코드를 드롭 마지막 피들과 함께 볼 수있는 '노드'는 사용자의 마우스 동작에 '고정'되지 않습니다.

규모가 조정 된 상위 노드의 전역 좌표를 변환해야한다고 생각합니다. 그럼에도 불구하고 노드의 x/y를 이벤트의 stageX 및 stageY로 설정하는 것이 요소의 크기 조정이 없을 때 어떻게 작동하는지 보지 못합니다.

스케일링을 사용하지 않으면 노드는 여전히 주 스테이지가 아닌 상위 컨테이너 내에 있으며 부모와 관련된 좌표를 가져야합니다. 부모가 50으로 오프셋되고 노드가 부모 내에서 0, 0으로 시작하면 전역 stageX/Y 속성이 일종의 변환없이 노드의 x/y를 나타내서는 안됩니다.

아래 코드와 같이이 기능을 어떻게 활용할 수 있으며 크기를 조정 한 상위 요소를 드래그하여 조절할 수 있습니까?

function handleClick(event) { 
    node.offset = {'x' : node.x - event.stageX, 'y' : node.y - event.stageY}; 
} 

function handleMove(event) { 
    node.x = event.stageX + node.offset.x; 
    node.y = event.stageY + node.offset.y; 
    stage.update(); 
}

도움을 주시면 감사하겠습니다.

감사합니다.

출처

2014-01-28 egaudette

좋아, 그래서 나는 동료의 도움을했고 그는 내 문제를 지적 :

function handleClick(e) { var global = container.localToGlobal(node.x, node.y); node.offset = {'x' : global.x - e.stageX, 'y' : global.y - e.stageY}; } function handleMove(e) { var local = container.globalToLocal(e.stageX + node.offset.x, e.stageY + node.offset.y); node.x = local.x; node.y = local.y; stage.update(); }

업데이트 된 바이올린은 여기에있다. 수정 사항은 위에 명시되어 있습니다. – egaudette

고정 : '노드'또는 항목을 드래그하여 좌표를 변환하려고했지만 실제로 크기가 조정되지 않았습니다. 부모가 스케일링을 적용한 항목 이었기 때문에 좌표를 변환해야했습니다! http://jsfiddle.net/MZ6LE/9/

출처

2014-01-28 16:55:35 egaudette

EaselJS - 스케일 된 부모의 자식 드래그

답변

관련 문제