请教：这样的拖动效果是怎样实现？

[shukewu]

请教，http://map.qq.com/中拖动地图的这种效果在flex中怎么实现。
用flex中什么控件去实现的。

[lzp4881]

private function onMouseMove(event:MouseEvent):void{
this.coordinateLabel.text = "当前坐标（x,y）：" + event.localX.toString() + "," + event.localY.toString(); //相对图片的坐标
if(event.buttonDown){
var x:Number = event.stageX - oldX;
var y:Number = event.stageY - oldY;
oldX = event.stageX;
oldY = event.stageY;
map.move(map.x + x,map.y + y);
}
}

private function onMouseDown(event:MouseEvent):void{
oldX = event.stageX;
oldY = event.stageY;
}


<mx:Canvas id="mapArea" width="100%" height="100%" horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:Image id="map" source="img/map.jpg" scaleContent="false" mouseMove="onMouseMove(event)" mouseDown="onMouseDown(event)" />
</mx:Canvas>

[jack_qdb]

FLEX 可以直接用GOOGLE MAP！你去网上下一个！看看怎么用的

[shukewu]

[Quote=引用 1 楼 lzp4881 的回复:]
private function onMouseMove(event:MouseEvent):void{
this.coordinateLabel.text = "当前坐标（x,y）：" + event.localX.toString() + "," + event.localY.toString(); //相对图片的坐标
if(event.buttonDown){
var x:……
[/Quote]

好像没有达到想象中的那种效果，可能我没有说清楚。这个可以实现了拖动，在map.qq.com那里，鼠标拖动起来之后地图还会往前运动一点。你鼠标拖动力度大的话，好像惯性运动的距离也要大些。

[passself]

楼主你要那么多的效果，直接用flash算了

[shukewu]

[Quote=引用 3 楼 lieri111 的回复:]
楼主你要那么多的效果，直接用flash算了
[/Quote]

不会用flash，我是在用flex做地图这块，动画这块就不是很熟悉了。

您会嘛？用什么控件实现呀？

[zhushoudong]

你可以这样嘛，你拖放鼠标到一定的坐标之后你手动的添加或者减少一定的坐标不久行了

[chinazhousheng]

我也做地图，其实就是看你拖动鼠标的速度而已，然后你再做一个缓动平移不就完事了？

[jwxkk]

其实你要的是一个缓动公式
地图是自己的api
我理解lz的意思是用flex做一个类似的效果
其实是用缓冲函数
给你个大概思路

private var easeOut:Number = 0.3;
private var reachX:Number = 0.5;
private var reachY:Number = 0.5;
private var reachZ:Number = 0.05;
在循环下面方法()方法中加入:
mc.x += (xDist - camera.x * reachX) * easeOut;

更多的缓动公式在:
http://www.robertpenner.com/easing/

[寒勿语]

用Flex来实现控件的拖动实在是太方便了，夸张点来说用两行代码即可实现。

在控件的mouseDown事件中调用 e.currentTarget.startDrag(); 就可以实现拖动。

在控件的mouseUp事件中调用 e.currentTarget.stopDrag(); 就可以停止拖动。

在这个例子里要注意一个地方，就是e.stopPropagation(); 的使用。

包含在容器中的子控件如果子控件和父控件都可以拖动则要加上e.stopPropagation(); 让时间不再继续分发，这样才能让子控件在容器中拖动。

做了个简单的例子：

是否有试过搬家的时候很烦恼那么多家具怎么摆放比较有条理而且节省空间呢？

我们可以实现一个WEB应用，让用户在房子平面图上按照实际情况摆放家具，这样用户就可以在未移动家具之前模拟移动后的效果了，哈，是不是很酷呢？

演示的例子如下：

http://www.ilinker.net.cn/flexexample/dragdrop/moveobject.html


代码：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
private function mouseDownHandler(e:MouseEvent):void
{
e.currentTarget.startDrag();
e.stopPropagation();
}

private function mouseUpHandler(e:MouseEvent):void
{
e.currentTarget.stopDrag();
e.stopPropagation();
}
]]>
</mx:Script>
<mx:Style source="defaults.css"/>
<mx:Image id="imgBg" x="0" y="0" source="images/bg.jpg"/>
<mx:Image mouseDown="mouseDownHandler(event)" mouseUp="mouseUpHandler(event)" id="imgTv" x="10" y="479" source="images/tv.png"/>
<mx:Image mouseDown="mouseDownHandler(event)" mouseUp="mouseUpHandler(event)" id="imgTvGig" x="388" y="340" source="images/tvbig.png"/>
<mx:Image mouseDown="mouseDownHandler(event)" mouseUp="mouseUpHandler(event)" id="imgBed" x="122" y="93" source="images/bed.png"/>
<mx:Image mouseDown="mouseDownHandler(event)" mouseUp="mouseUpHandler(event)" id="imgBeg2" x="122" y="462" source="images/bed2.png"/>
<mx:Label mouseDown="mouseDownHandler(event)" mouseUp="mouseUpHandler(event)" id="labTest" x="489" y="277" text="可以拖动的文本"/>
<mx:Panel mouseDown="mouseDownHandler(event)" mouseUp="mouseUpHandler(event)" x="485" y="0" width="107" height="246" layout="absolute">
<mx:Image mouseDown="mouseDownHandler(event)" mouseUp="mouseUpHandler(event)" x="10" y="24" source="images/tv.png"/>
</mx:Panel>
</mx:Application>

[谁在哀伤望月]

那个地图不是flex