apache-flex - 如何找到组中的元素偏移量？

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>