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>