分享

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

 ilovepesx 2013-10-10

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全局


有一个示例,以localToGlobal和globalToLocal为例,描述坐标转换的使用方法

  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>  



    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多