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>