Flex各类型坐标转换(全局、本地、内容坐标间转换)

Flex包含3种坐标：全局坐标、本地坐标、内容坐标

全局坐标：stage级别，坐标原点为舞台的左上角，如MouseEvent的stageX、stageY坐标。

本地坐标：组件级别的坐标系，相对坐标，坐标原点为相对的组件的左上角，如MouseEvent的localX、localY坐标，以及容器中组件的x、y属性都为本地相对坐标。

内容坐标：组件级别的坐标系，相对坐标，在有滚动条的情况下，全部内容所占的区域的坐标系，坐标原点为相对的组件的左上角，可以理解为包含滚动条的整个内容面板为一个坐标系。如组件的contentMouseX、contentMouseY属性为内容坐标。

下图为官方提供的图说明三类坐标的关系：

有一个示例，以localToGlobal和globalToLocal为例，描述坐标转换的使用方法

[html] view plaincopy

1. <?xml version="1.0" encoding="utf-8"?>
2. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
3. xmlns:s="library://ns.adobe.com/flex/spark"
4. xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
5. <fx:Declarations>
6. <!--当前示例为：有一排按钮，一个漂浮窗口，点击按钮，漂浮窗口至于当前按钮正上方-->
7. </fx:Declarations>
8. <fx:Script>
9. <![CDATA[
10. private function setContainerPosition(event:MouseEvent):void
11. {
12. var btn:Button=event.currentTarget as Button;
13. var point:Point= new Point();
14. //获取触发点击事件当前按钮的全局坐标
15. point=btn.localToGlobal(point);
16. //相对于整个Application下，获取触发事件按钮的本地坐标
17. //即漂浮容器container的父容器（当前为Application）调用globalToLocal方法
18. point=this.globalToLocal(point);
19. //设置漂浮面板坐标，同为相对于整个Application下的本地坐标
20. container.x=point.x-container.width/2+btn.width/2;
21. container.y=point.y-container.height;
22. }
23. ]]>
24. </fx:Script>
25. <s:HGroup width="500" height="60" bottom="5" left="200" gap="20">
26. <s:Button id="btn1" label="btn1" click="setContainerPosition(event)"/>
27. <s:Button id="btn2" label="btn2" click="setContainerPosition(event)"/>
28. <s:Button id="btn3" label="btn3" click="setContainerPosition(event)"/>
29. </s:HGroup>
30. <s:BorderContainer id="container" cornerRadius="4" width="200" height="100">
31. <s:Label text="漂浮容器"/>
32. </s:BorderContainer>
33. </s:Application>

Flex各类型坐标转换(全局、本地、内容坐标间转换)