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

最新推荐文章于 2021-09-17 18:32:11 发布

原创最新推荐文章于 2021-09-17 18:32:11 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

Flex 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了Flex中的三种坐标系统——全局坐标、本地坐标和内容坐标，并通过一个实例展示了如何使用坐标转换方法实现元素定位。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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为例，描述坐标转换的使用方法

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
	<fx:Declarations>
		<!--当前示例为：有一排按钮，一个漂浮窗口，点击按钮，漂浮窗口至于当前按钮正上方-->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			private function setContainerPosition(event:MouseEvent):void
			{
				var btn:Button=event.currentTarget as Button;
				var point:Point= new Point();
				//获取触发点击事件当前按钮的全局坐标
				point=btn.localToGlobal(point);
				//相对于整个Application下，获取触发事件按钮的本地坐标
				//即漂浮容器container的父容器（当前为Application）调用globalToLocal方法
				point=this.globalToLocal(point);
				//设置漂浮面板坐标，同为相对于整个Application下的本地坐标
				container.x=point.x-container.width/2+btn.width/2;
				container.y=point.y-container.height;
			}
		]]>
	</fx:Script>
	<s:HGroup width="500" height="60" bottom="5" left="200" gap="20">
		<s:Button id="btn1" label="btn1" click="setContainerPosition(event)"/>
		<s:Button id="btn2" label="btn2" click="setContainerPosition(event)"/>
		<s:Button id="btn3" label="btn3" click="setContainerPosition(event)"/>
	</s:HGroup>
	<s:BorderContainer id="container" cornerRadius="4" width="200" height="100">
		<s:Label text="漂浮容器"/>
	</s:BorderContainer>
</s:Application>