首页 > 代码库 > Flex各类型坐标转换(全局、本地、内容坐标间转换)

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

2024-07-14 16:06:21   227人阅读

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>  


联系
我们