Как найти смещение элемента в группе?

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() для преобразования глобальных координат в нужное координатное пространство.

Важнейшим шагом является первая часть. Чтобы преобразовать координаты кнопки в глобальные координаты, мы фактически используем родителя кнопки - потому что кнопка «существует» в его координатном пространстве родителя. Это всегда немного запутывает, когда я это делаю :)

Запустите это приложение и поиграйте с ним. Чтобы действительно протестировать его, добавьте еще один BorderContainer вокруг «rootGroup» и смещайте «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>