`
传说の黄花菜
  • 浏览: 201984 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

使用Flex坐标系统及转换

    博客分类:
  • Flex
阅读更多

 

 

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

          全局的就是(stage级别的)

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

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

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

    全局

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

    本地

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

    内容

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

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

 


 

A. Content bounds B. Component bounds C. Stage bounds

 

 

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

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> 

执行效果图如下:


 

  • 大小: 6.3 KB
  • 大小: 7.8 KB
分享到:
评论
1 楼 tianbianfei 2012-04-19  

相关推荐

    FLEX 实现坐标系转换

    坐标转换通常涉及到将坐标从一个坐标系统转换到另一个坐标系统,例如从WGS84(全球定位系统使用的坐标系统)到UTM(统一世界坐标系统),或者从笛卡尔坐标到极坐标等。这个过程涉及到数学公式和地理坐标系统的理解。...

    Flex客户端自定义投影坐标转换

    `Flex客户端自定义投影坐标转换.pdf`可能是详细的教程文档,它可能涵盖如何在Flex环境中使用SuperMap iClient API进行坐标转换的步骤和示例代码。`ClientProjection`可能是一个类或库,提供了坐标转换的具体实现。 ...

    flex arcengine开发坐标转换

    根据提供的信息,我们可以总结出以下详细的IT知识点,主要聚焦于使用Flex进行GIS开发中的坐标转换技术。 ### 一、背景介绍 在地理信息系统(GIS)领域中,坐标系统的选择对于地图数据的准确性和有效性至关重要。...

    Flex:获得鼠标所在位置的经纬度坐标.doc

    因此,在进行坐标转换时需要注意坐标系统的匹配。 #### 五、注意事项 1. **坐标精度**:屏幕坐标转换为经纬度坐标时,可能会因为屏幕分辨率、地图缩放级别等因素导致一定的精度损失。 2. **地图服务限制**:如果...

    Flex地图,可以自己添加坐标点,添加信息

    反向地理编码则是将坐标转换为地址。Flex地图可以集成第三方服务,如Google Maps API的`Geocoder`类,实现这些功能。 8. **地图操作**: 用户可以进行缩放、平移等操作,开发者可以通过监听地图的`zoomChanged`、`...

    flex 地图 画圆

    2. **地理坐标与屏幕坐标转换**:地图上的每一个位置都有对应的经纬度坐标,而屏幕上的每个像素则有对应的x,y坐标。在画圆时,我们需要将用户指定的半径(通常是地理距离)转换为屏幕上的像素距离。这涉及到地理坐标...

    flex图形特效,类似于百度定位地图

    在Flex中,我们需要理解经纬度坐标与像素坐标之间的关系,这通常涉及到地理坐标系到投影坐标系的转换,例如Web墨卡托投影。这个过程需要数学算法支持,例如将经度和纬度转换为X和Y坐标。 对于“类似于百度定位地图...

    flex 百度地图 实例下载

    5. **地理坐标转换**:由于Flex使用的是直角坐标系,而百度地图使用的是墨卡托坐标系,因此在进行标注、绘制等操作时,需要进行坐标系统的转换。 6. **标注和覆盖物**:在Flex中,你可以创建自定义的标注或者使用...

    如何使用flex 开发拓扑图

    1. 使用位图缓存:将复杂图形转换为位图,减少重绘次数。 2. 分层渲染:将静态背景和动态元素分开,减少不必要的重绘。 3. 动画平滑过渡:使用Tween类创建平滑的动画效果,提升用户体验。 总的来说,使用Flex开发...

    利用flex画一个扇形区域

    在本文中,我们将深入探讨...这涉及到坐标计算、角度转换、线条样式和填充设置,以及使用`curveTo`方法模拟圆弧。这种技术在创建自定义图形用户界面或数据可视化应用时非常有用,能够帮助开发者创造出丰富的视觉效果。

    googleMap-Flex

    这通常需要理解每个API的用法,比如请求地图瓦片、转换坐标系统等。开发者需要编写适配器或者封装类,以便在Flex应用中统一调用这些不同的地图服务。 在Flex中实现这样的功能,还需要熟悉ActionScript编程,因为它...

    Flex 3D标签云

    Flex 3D标签云是一种在Flex平台上创建动态、立体效果的标签展示技术,它通过将传统的二维标签转换为三维空间中的旋转元素,为用户提供了更直观、更具视觉吸引力的交互体验。这种技术常用于网站、应用程序或者数据...

    arcgis server flex API 函数及调用实例

    使用`GeocodingTask`和`AddressCandidate`类,可以实现地址的查找和坐标转换。例如,寻找一个地址: ```actionscript var geocoder:GeocodingTask = new GeocodingTask(...

    Flex 果冻特效Demo

    "Flex 果冻特效Demo"是一个利用Flex技术实现的交互效果,它为用户界面添加了趣味性和吸引力,尤其适用于弹出窗口或页面转换场景。果冻特效,顾名思义,就是使元素在动效过程中呈现出如同果冻般柔软、弹性的视觉效果...

    flex地图应用教程

    开发者需要知道如何在不同坐标系统之间转换,以正确显示地理位置。 5. **标记和图元**:在地图上添加自定义图标或图形(标记和图元)是常见的需求。Flex地图API提供了方法来创建和定位这些元素,如设置标记的位置、...

    arcgis for flex 加载高德地图

    可能需要进行坐标转换或调整图层的`SpatialReference`属性。 7. **事件监听和交互**: 为了实现地图的交互功能,如点击、拖动等,可以监听地图对象上的相应事件,然后调用自定义图层的方法进行处理。 8. **优化和...

    FLEX地图应用教程

    4. **地理编码和反地理编码**:学习如何将地址转换为坐标(地理编码)和将坐标转换为地址(反地理编码),以便实现地址查询和定位。 5. **标记与图层**:创建和管理地图上的标记,可以包含图标、文本和自定义视图。...

    flex3D效果

    这些类可能包括了3D坐标系统、矩阵变换、渲染引擎等相关组件。 4. **配置文件**:项目可能包含XML配置文件,用于设置舞台大小、视口参数、3D环境设置等,方便调整和优化3D效果。 5. **测试文件**:`Flash3DTest....

    Flex详细文档.pdf

    - **ActionScript**: ActionScript是Flex的应用逻辑部分使用的编程语言,它基于ECMAScript标准。ActionScript提供了强大的面向对象编程能力,包括类、接口等高级特性。 - **CSS**: CSS用于控制Flex应用程序中的样式...

Global site tag (gtag.js) - Google Analytics