Flex中的坐标系转换

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

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

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

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

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

全局坐标、本地坐标、内容坐标可以通过系统内置方法互相转换

contentToGlobal	内容to全局
contentToLocal	内容to本地
globalToContent	全局to内容
globalToLocal	全局to本地
localToContent	本地to内容
localToGlobal	本地to全局

以下为例子，将VBox中的内容坐标转换为Application的本地坐标

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 

layout="absolute" minWidth="955" minHeight="600">

<mx:Script>

<![CDATA[

import com.PopupView;

import mx.collections.ArrayCollection;

import mx.managers.PopUpManager;

protected function button1_clickHandler(event:MouseEvent):void

{

//弹出界面可以随便自己定义，供测试即可，该源码不提供

var customView:PopupView = new PopupView();

PopUpManager.addPopUp(customView, this);

//寻找坐标系参照物，localButton在VBox里的内容坐标系内的坐标要转换为本地坐标系（Application）

var localPoint:Point = new Point(localButton.x, localButton.y + localButton.height);

var contenPoint:Point = container.contentToLocal(localPoint);

customView.x = contenPoint.x;

customView.y = contenPoint.y;

}

]]>

</mx:Script>

<mx:VBox id="container" width="400" height="100" borderColor="red" borderStyle="solid" paddingLeft="40">

<mx:TextInput/>

<mx:TextInput/>

<mx:TextInput/>

<mx:TextInput/>

<mx:TextInput/>

<mx:TextInput/>

<mx:TextInput/>

<mx:TextInput/>

<mx:TextInput id="test"/>

<mx:Button id="localButton" label="test" click="button1_clickHandler(event)"/>

</mx:VBox>

</mx:Application>