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 displaysthe IViewport actual and content sizes, as well as the current scroll positions. Hopefullyseeing 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事件。小弟在此请教了。