本文共 2000 字，大约阅读时间需要 6 分钟。

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

前提：理解什么是视域

失败：其实在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事件。小弟在此请教了。

转载地址：http://aybxi.baihongyu.com/