Flex中的座標系轉換

Flex包含3種座標:全局座標、本地座標、內容座標

全局座標stage級別,座標原點爲舞臺的左上角,如MouseEventstageXstageY座標。

本地座標:組件級別的座標系,相對座標,座標原點爲相對的組件的左上角MouseEventlocalXlocalY座標,以及容器中組件的xy屬性都爲本地相對座標。

內容座標:組件級別的座標系,相對座標,在有滾動條的情況下,全部內容所佔的區域的座標系,座標原點爲相對的組件的左上角,可以理解爲包含滾動條的整個內容面板爲一個座標系。如組件的contentMouseXcontentMouseY屬性爲內容座標。

下圖爲官方提供的圖說明三類座標的關係:


全局座標、本地座標、內容座標可以通過系統內置方法互相轉換


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>






發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章