当前位置:软件学习 > Flash >>

Flash-Flex坐标系统及转换

flash和flex针对不同的目的,提供了3种不同的坐标系。

          全局的就是(stage级别的)

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

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

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

    全局

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

    本地

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

    内容

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

下面有个官方的图说明了三个坐标系的关系及位置:

.net/art/20091003/r91tmcxl6ZxHY7O.jpg" target="_blank">Flash-Flex坐标系统及转换

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

contentMouseX

返回mouse的内容坐标x值

contentMouseY

返回mouse的内容坐标Y值

contentToGlobal   

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

contentToLocal 

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

globalToContent   

将全局的转成内容坐标

globalToLocal 

全局的转成本地的

localToContent

本地到内容坐标

localToGlobal 

本地到全局坐标

下面是一个小例子:

  1. <?xml version="1.0"?>  
  2. <!-- containersintroMousePosition.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> 
补充:flash教程,As3.0 
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,