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

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

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

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

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

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

Flex包含3种坐标：全局坐标、本地坐标、内容坐标 全局坐标：stage级别，坐标原点为舞台的左上角，如MouseEvent的stageX、stageY坐标。
contentToGlobal	内容to全局
contentToLocal	内容to本地
globalToContent	全局to内容
globalToLocal	全局to本地
localToContent	本地to内容
localToGlobal	本地to全局

有一个示例，以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>