夜鹰教程网-程序员的加油站
 当前位置:文章中心 >> 技术辅导
Flex坐标系统及转换
夜鹰教程网 来源:www.yyjcw.com 日期:2016-11-30 13:53:15
flash和flex针对不同的目的,提供了3种不同的坐标系。 
flash和flex针对不同的目的,提供了3种不同的坐标系。

          全局的就是(stage级别的)

          本地坐标系(组件级别的)

          内容坐标系(相对于本地坐标系说的)

    这些坐标系的点是可以转换的,并且有相应的方法,看来adobe想得挺周到。我们一个一个的说一下:

    全局

           这个坐标系的原点在整个flash舞台的左上角,MouseEvent实例的stageX,stageY就是这个坐标系中的值。

    本地

        坐标原点是相对的组件的左上角,MouseEvent中的localX,localY就是相对这个坐标系说的。

    内容

        这个东西比较抽象了UIComponent类实例的contentMouseX  和 contentMouseY 就是了,这个主要针对有滚动条的组件说的,有滚动条了,内容肯定不少,内容所占的区域的坐标就是这个坐标系了。

坐标转换还有现成的方法:

contentMouseX

返回mouse的内容坐标x值

contentMouseY

返回mouse的内容坐标Y值

contentToGlobal   

将内容坐标转换成全局坐标

contentToLocal 

将内容坐标转换成内容坐标

globalToContent   

将全局的转成内容坐标

globalToLocal 

全局的转成本地的

localToContent

本地到内容坐标

localToGlobal 

本地到全局坐标

下面是一个小例子:

  1. <?xml version="1.0"?>  
  2. <!-- containers\intro\MousePosition.mxml -->  
  3. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"  
  4.     backgroundColor="white">  
  5.      
  6.     <mx:Script>  
  7.         <!--[CDATA[  
  8.           import mx.controls.Alert;  
  9.           // Handle the mouseDown event generated  
  10.           // by clicking in the application.  
  11.           private function handleMouseDown(event:MouseEvent):void {  
  12.                  
  13.             // Convert the mouse position to global coordinates.  
  14.             // The localX and localY properties of the mouse event contain  
  15.             // the coordinates at which the event occurred relative to the  
  16.             // event target, typically one of the  
  17.             // colored internal Canvas controls.  
  18.             // A production version of this example could use the stageX  
  19.             // and stageY properties, which use the global coordinates,  
  20.             // and avoid this step.  
  21.             // This example uses the localX and localY properties only to  
  22.             // illustrate conversion between different frames of reference.  
  23.             var pt:Point = new Point(event.localX, event.localY);  
  24.             pt = event.target.localToGlobal(pt);  
  25.                  
  26.             // Convert the global coordinates to the content coordinates  
  27.             // inside the outer c1 Canvas control.  
  28.             pt = c1.globalToContent(pt);  
  29.                 
  30.             // Figure out which quadrant was clicked.  
  31.             var whichColor:String = "border area";  
  32.                
  33.             if (pt.x < 150) {  
  34.                 if (pt.y < 150)  
  35.                     whichColor = "red";  
  36.                 else  
  37.                     whichColor = "blue";  
  38.             }  
  39.             else {  
  40.                 if (pt.y < 150)  
  41.                     whichColor = "green";  
  42.                 else  
  43.                     whichColor = "magenta";  
  44.             }  
  45.                  
  46.             Alert.show("You clicked on the " + whichColor);  
  47.           }  
  48.         ]]-->  
  49.     </mx:Script>  
  50.     <!-- Canvas container with four child Canvas containers -->  
  51.     <mx:Canvas id="c1"  
  52.         borderStyle="none"  
  53.         width="300" height="300"  
  54.         mouseDown="handleMouseDown(event);">  
  55.          
  56.         <mx:Canvas  
  57.             width="150" height="150"  
  58.             x="0" y="0"  
  59.             backgroundColor="red">  
  60.             <mx:Button label="I'm in Red"/>  
  61.         </mx:Canvas>  
  62.         <mx:Canvas  
  63.             width="150" height="150"  
  64.             x="150" y="0"  
  65.             backgroundColor="green">  
  66.             <mx:Button label="I'm in Green"/>  
  67.         </mx:Canvas>  
  68.         <mx:Canvas  
  69.             width="150" height="150"  
  70.             x="0" y="150"  
  71.             backgroundColor="blue">  
  72.             <mx:Button label="I'm in Blue"/>  
  73.         </mx:Canvas>  
  74.         <mx:Canvas  
  75.             width="150" height="150"  
  76.             x="150" y="150"  
  77.             backgroundColor="magenta">  
  78.             <mx:Button label="I'm in Magenta"/>  
  79.         </mx:Canvas>  
  80.     </mx:Canvas>  
  81. </mx:Application> 
复制链接 网友评论 收藏本文 关闭此页
上一条: 不一般的flex里播放声音的方法  下一条: 怎样调用Flash使之符合Web网页标准?
夜鹰教程网成立于2008年,目前已经运营了将近 13 年,发布了大量关于 html5/css3/C#/asp.net/java/python/nodejs/mongodb/sql server/android/javascript/mysql/mvc/easyui/vue/echarts原创教程。 我们一直都在坚持的是:认证负责、一丝不苟、以工匠的精神来打磨每一套教程,让读者感受到作者的用心。我们默默投入的时间,确保每一套教程都是一件作品,而不是呆板的文字和视频! 目前我们推出在线辅导班试运营,模式为一对一辅导,教学工具为QQ。我们的辅导学科包括 java 、android原生开发、webapp开发、商城开发、C#和asp.net开发,winform和物联网开发、web前端开发,但不仅限于此。 普通班针对的是国内学员,例如想打好基础的大学生、想转行的有志青年、想深入学习的程序员、想开发软件的初学者或者业余爱好者等。 就业办针对即将毕业上岗的大四学生,或者打算转行的初级开发工程师。 留学生班针对的是在欧美、加拿大、澳洲、日本、韩国、新加坡等地留学的中国学子,目的是让大家熟练地掌握编程技能,按时完成老师布置的作业,并能顺利地通过考试。 详细咨询QQ:1416759661   夜鹰教程网  基于角色的权限管理系统(c-s/b-s)。
  夜鹰教程网  基于nodejs的聊天室开发视频教程
  夜鹰教程网  Git分布式版本管理视频教程
  夜鹰教程网  MVC+EasyUI视频教程
  夜鹰教程网  在线考试系统视频教程
  夜鹰教程网  MongoDB视频教程。
  夜鹰教程网 Canvas视频教程
  夜鹰教程网 报表开发视频教程
  热点推荐
FLASH加载xml,txt,swf实例代码
Flash,Actionscript,AS延时执行语…
入门Flash CS3 ActionScript 3.0
播放器的制作方法
JavaScript控制Flash播放器的方法…
FLASH变量和作用域[这是一篇比较好…
用FLASH8.0轻松制作简易计算器
FLASH动画禁止右键菜单
FLASH AS教程:响应键盘事件的四种…
最常用的Flash语句(汇总)
Flash制作坦克游戏视频教程
创建FLEX自定义组件(1)
FLASH与ASP通信原理入门
Flash教程:加载外部文本文件的3种…
创建FLEX自定义组件(3)
  最近更新
在线考试系统
常见项目开发
学生公寓管理系统的设计与实现
校园电话查询系统设计与实现
校园机动车停车位申请系统的设计与…
C#支付宝接口集成服务
常见项目开发
常用UML建模工具
FLASH加载xml,txt,swf实例代码
视频教程卡住的解决办法
播放器的制作方法
常见定制系统开发
入门Flash CS3 ActionScript 3.0
flex code
Flex 开发架构渐变

关于我们 | 网站建设 | 技术辅导 | 常见问题 | 联系我们 | 友情链接

夜鹰教程网 版权所有 www.yyjcw.com All rights reserved 备案号:蜀ICP备08011740号3