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

Flex包含3种坐标:全局坐标、本地坐标、内容坐标

全局坐标:stage级别,坐标原点为舞台的左上角,如MouseEvent的stageX、stageY坐标。

本地坐标:组件级别的坐标系,相对坐标,坐标原点为相对的组件的左上角,如MouseEvent的localX、localY坐标,以及容器中组件的x、y属性都为本地相对坐标。

内容坐标:组件级别的坐标系,相对坐标,在有滚动条的情况下,全部内容所占的区域的坐标系,坐标原点为相对的组件的左上角,可以理解为包含滚动条的整个内容面板为一个坐标系。如组件的contentMouseX、contentMouseY属性为内容坐标。

下图为官方提供的图说明三类坐标的关系:Flex各类型坐标转换(全局、本地、内容坐标间转换)

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

Flex包含3种坐标:全局坐标、本地坐标、内容坐标

全局坐标:stage级别,坐标原点为舞台的左上角,如MouseEvent的stageX、stageY坐标。

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>
上一篇:rabbitmq.config配置参数详解


下一篇:[ZigBee] 9、ZigBee之AD剖析——AD采集CC2530温度串口显示