flex实现拖动图片（参考过来的）

2012-08-02 04:01:32 296 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

微信小程序之虚拟摇杆练习这段时间研究了一下微信小程序，对小程序有了大概的了解，由于项目需要做一个虚拟摇杆，查了一下发现跟小程序相关的教程非常少，更别说是具体的一些功能实现如虚拟摇杆，所以还是自己动手做一个吧。本教程适合对微信小程序有一些了解的新手，至于大神分分钟能实现自己想要的功能。虚拟摇杆成品如下： OK，如果你觉得效果还行那就开始吧。我们可以先拆解虚拟摇杆的内容，一步一步实现，步骤如下： ... 阅读详情

<?xml version="1.0" encoding="utf-8"?>
<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" minWidth="800" minHeight="600">
<fx:Declarations>

</fx:Declarations>

<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.MoveEvent;
private var oldX,oldY:Number;
private function onMouseMove(event:MouseEvent):void{
lbl.text = "Local (x,y):" + event.localX.toString() + ","+event.localX.toString();
lbl2.text = "Stage (x,y):" + event.stageX.toString() + ","+event.stageY.toString();
lbl3.text="图片位置（x,y）:"+img.x+","+img.y;
if(event.buttonDown){
var x:Number = event.stageX - oldX;
var y:Number = event.stageY - oldY;
oldX = event.stageX;
oldY = event.stageY;
//限制图片水平方向的移动
if(img.x<=0){
if(img.x>=(panel.width-img.width)){

imgMove(x,y);
}else{
img.x=(panel.width-img.width);
}
}else{
img.x=0;
}
//限制图片竖直方向的移动
if(img.y<=0){
if(img.y>=(panel.height-img.height)){
imgMove(x,y);
}else{
img.y=(panel.height-img.height);

}

}else{
img.y=0;
imgMove(x,y);
}
}
}

private function imgMove(x:Number,y:Number):void{
img.move(img.x+x,img.y+y);
}
private function onMouseDown(event:MouseEvent):void{
oldX = event.stageX;
oldY = event.stageY;
}
]]>
</fx:Script>
<mx:Label x="10" y="10" text="" id="lbl"/>
<mx:Label x="10" y="27" text="" id="lbl2"/>

<mx:Panel x="14.5" y="55" width="400" height="300" id="panel" layout="absolute"
horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:Image id="img" x="0" y="0" source="file:///F:/ip.JPG"
mouseMove="onMouseMove(event)"
mouseDown="onMouseDown(event)"/>
</mx:Panel>
<s:Label id="lbl3" x="310" y="19"/>

</s:Application>

...全文