그룹에서 요소 오프셋을 찾는 방법은 무엇입니까?

Question

두 그룹으로 중첩 된 시각적 요소가 있습니다. 상위 그룹에서 해당 요소의 X 및 Y 오프셋을 어떻게 찾을 수 있습니까?

<group id="rootGroup"> 
    <group id="parentGroup" x="30" y="50"> 
     <button id="myButton" x="40" y="20" /> 
    </group> 
</group> 

버튼 위치가 시간에 따라 변화 할뿐만 아니라, 상위 그룹의 총수 : 여기

코드이다. 그래서 localToGlobal과 같은 것을 사용하려고했습니다.

Answer 1

다음은이를 수행하는 방법을 보여주는 예제 응용 프로그램입니다. 기본 개념은 대상 객체 (버튼) 좌표를 localToGlobal() 인 전역 좌표로 변환하는 것입니다. 그런 다음 globalToLocal()을 사용하여 전역 좌표를 원하는 좌표 공간으로 변환하십시오.

가장 중요한 단계는 첫 번째 부분입니다. 버튼의 좌표를 전역 좌표로 변환하려면 버튼의 부모를 사용합니다. 버튼이 부모의 좌표 공간에 "존재"하기 때문입니다. 이것은 내가 할 때 항상 약간 혼란 스럽네요 :)

이 응용 프로그램을 실행하고 함께 놀아. 실제로 테스트하려면 root의 좌표 공간이 전역 좌표 공간과 같지 않도록 "rootGroup"주위에 BorderContainer을 하나 더 추가하고 "rootGroup"을 몇 픽셀만큼 오프셋합니다.

<?xml version="1.0" encoding="utf-8"?> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
       xmlns:s="library://ns.adobe.com/flex/spark" 
       xmlns:mx="library://ns.adobe.com/flex/mx" 
       creationComplete="onCreationComplete()"> 

    <fx:Script> 
     <![CDATA[ 
      private function onCreationComplete():void 
      { 
       var p:Point = new Point(childButton.x, childButton.y); 
       trace(p); // (x=50, y=50) 
       // convert the button's coordinates to Global coordinate space 
       // note since the button exists in the parent object's coordinate plane 
       // you do this conversion using the parent 
       var global:Point = parentGroup.localToGlobal(p); 
       trace(global); // (x=151, y=151) <-- 1 extra pixel from border of the BorderContainer 

       // now that we have global coordinates, use globalToLocal() to convert 
       // these coordinates into the desired coordinate plane 
       var rootLocal:Point = rootGroup.globalToLocal(global); 
       trace(rootLocal); // (x=151, y=151) 
       var parentLocal:Point = parentGroup.globalToLocal(global); 
       trace(parentLocal); // (x=50, y=50) 
      } 
     ]]> 
    </fx:Script> 

    <s:BorderContainer id="rootGroup" borderColor="#FF0000"> 
     <s:BorderContainer id="parentGroup" x="100" y="100" borderColor="#00FF00"> 
      <s:Button id="childButton" x="50" y="50" label="Click Me"/> 
     </s:BorderContainer> 
    </s:BorderContainer> 
</s:Application>