GeneralSanguo工作笔记2——使用Scroller实现背景的拖拽移动

目标：实现背景的拖拽移动，即在有限的视域内，通过鼠标的拖拽来显示大背景（背景图片尺寸大于视域尺寸）的不同位置

前提：理解什么是视域

失败：其实在flash中直接就有ScrollPane可以实现，但是我在Flex中却没有找到，还请高人指点。

正题：

1、直接上代码：

<?xml version="1.0" encoding="utf-8"?> <!-- This is a somewhat more complicated version of the example from the text. It displays the IViewport actual and content sizes, as well as the current scroll positions. Hopefully seeing all of this makes it a little easier to understand how the various parts fit together. --> <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"> <fx:Script> <!--[CDATA[ public var x1:int; //定义两个坐标点，分别是鼠标按下和移动过程中事件的触发点 public var x2:int; public var y1:int; public var y2:int; protected function enter(event:MouseEvent):void { x1 = event.stageX; y1 = event.stageY; img.addEventListener(MouseEvent.MOUSE_MOVE,moveMap) } protected function moveMap(event:MouseEvent):void { x2 = event.stageX; y2 = event.stageY; vp.horizontalScrollPosition = vp.horizontalScrollPosition - (x2-x1); //修改视域 vp.verticalScrollPosition = vp.verticalScrollPosition - (y2-y1); } protected function end(event:MouseEvent):void { img.removeEventListener(MouseEvent.MOUSE_MOVE,moveMap) } ]]--> </fx:Script> <s:Scroller horizontalScrollPolicy="off" verticalScrollPolicy="off" width="828" horizontalCenter="0" verticalCenter="0" height="797"> <s:Group id="vp" horizontalScrollPosition="0" verticalScrollPosition="0" width="400" height="400"> <mx:Image id="img" source="assets/logo.jpg" mouseDown="enter(event)" mouseUp="end(event)" horizontalCenter="0" verticalCenter="0"/> <s:Rect x="50" y="50" width="10" height="10" > <s:fill> <s:SolidColor color="#E41C16" /> </s:fill> </s:Rect> </s:Group> </s:Scroller> </s:Application>

 

其实就是监听了鼠标的Down和Up事件，另外我还绘制了一个红点，它代表的是在游戏地图中的某个建筑或者其他特别的东西。目前这个方法并不完美，使用起来感觉并不流畅，而且有时会监听不到Up事件。小弟在此请教了。