在flex中，使用VBox堆叠组件时如何获取坐标？

Question

在 flex 中，我使用 VBox 和 HBox 来堆叠组件。当我尝试获取组件的 x,y 坐标时，我总是得到 0。如果我指定像 mx:VBox x="120" 这样的坐标，那么我会得到值。

如何在不明确说明的情况下获得坐标。

Answer 1

您可以将坐标相对于舞台进行平移。查看下面的代码：

var box:VBox = new VBox;
var child:DisplayObject = new DisplayObject;

box.addChild(child);

child.addEventListener(FlexEvent.UPDATE_COMPLETE, updateCompleteHandler);

...

private function updateCompleteHandler(fe:FlexEvent):void{
  // find global coordinates
  var globalCoords:Point = child.localToGlobal(new Point(0,0));

  // coordsInBox is what you are looking for
  var coordsInBox:Point = box.globalToLocal(globalCoords); 
}

重点是对子组件使用localToGlobal，然后使用globalToLocal 转换全局坐标，使其相对于盒子容器表达。

请注意，直到UPDATE_COMPLETE 被子对象调用后，坐标才会被处理。

Answer 2

组件的 X 和 Y 值始终与组件的父级相关。 directionsHelp.x 和 directionsHelp.y 都将返回相对于包含它们的 VBox 的位置，除非您明确设置值或在其周围插入其他组件，否则默认情况下将为 0。

关于localToGlobal() 要记住的一点是你必须从孩子那里调用它。如果您有一个Application 并且您只是调用localToGlobal( new Point(child.x, child.y) )，它将尝试返回应用程序中相对于舞台的给定点（因为您没有指定“本地”是什么），因此不会进行任何转换，因此它将保持等于 (0, 0)。

如果您调用child.localToGlobal( new Point(child.x, child.y) )，它将返回孩子相对于舞台的位置值，将给定点转换为孩子在舞台上的偏移量。

这里有一个快速应用来演示：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"    backgroundColor="#FFFFFF">
    <mx:Script>
        <![CDATA[
            private function updateCoords():void
            {
                var point:Point = new Point(directionsHelp.x, directionsHelp.y);
                point = directionsHelp.localToGlobal(point);
                directionsHelp.text = "My stage coordinates are ("+point.x+", "+point.y+")";
            }
        ]]>
    </mx:Script>
    <mx:VBox>
        <mx:Box height="100" width="100" borderStyle="solid" borderColor="#000000"
            horizontalAlign="center" verticalAlign="middle">
            <mx:Label text="100 x 100" />
        </mx:Box>
        <mx:VBox>
            <mx:Text id="directionsHelp" color="#4FA4CD" fontSize="8" fontWeight="bold"
                text="Click the button to display my position on the stage." />
            <mx:Button label="Get Position" click="updateCoords()" />
        </mx:VBox>
    </mx:VBox>
</mx:Application>