Flex 以不同的坐标系统跟踪鼠标位置
mouseMove="trace(this.contentMouseX+' : '+this.contentMouseY);
height="300"">
<mx:Panel width="400">
<mx:Label text="Center" horizontalCenter="200"/>
</mx:Panel>
<mx:Panel width="400">
<mx:Label text="Center" horizontalCenter="200"/>
</mx:Panel>
</mx:HBox>
因为HBox 两个子组件的和为812像素,当你滚动鼠标到HBox 右边时,你会发现x 值已经超出HBox 的设置值。容器定义了异恶contentPane 属性,它是容纳添加进来的所有子组件的私有的DisplayObject。如果子组件的高或宽超出容器自身设置的高或宽,那超出部分将被隐藏。而contentMouseX 和contentMouseY 属性就是测量鼠标在保护内容DisplayObject 上的位置。下面是完整代码:
Code View:
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="300"
height="500" paddingTop="10" paddingLeft="10" verticalGap="15"
mouseMove="traceMousePosition(event)">
<mx:Script>
<![CDATA[
private function
traceMousePosition(event:MouseEvent):void
{
trace(" MouseEvent local position "+event.localX+"
"+event.localY);
trace(" MousePosition stage position
"+event.stageX+" "+event.stageY);
trace(" MouseEvent position from w/in component
"+this.mouseX+" "+this.mouseY);
trace(" Content Mouse Position
"+this.contentMouseX+" "+this.contentMouseY);
}
]]>
</mx:Script>
<mx:Image source="@Embed('../../assets/image.png')"/>
<mx:Image source="@Embed('../../assets/image.png')"/>
<mx:Image source="@Embed('../../assets/image.png')"/>
<mx:Image source="@Embed('../../assets/image.png')"/>
</mx:VBox>
当鼠标移到VBox 组件时函数将被调用,输出mouseX 和mouseY 值。