FLEX 容器内多个图片分别拖动

 

其中的要点是，使用getObjectsUnderPoint来获取当前鼠标指针下的对象，得到的是一个多个对象的数组，需要用objects[i] is ImageSkin来判断是否是图片，如果是图片，则转换成拖动的图，比如：dragInitiator = objects[i].parent as Image ;

 

参考代码，flex4.5下测试通过：

 

<?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="955" minHeight="600"
applicationComplete="initDragAndDrop()"
>
<s:layout>
<s:VerticalLayout/>
</s:layout>
<fx:Declarations>
<!-- 将非可视元素（例如服务、值对象）放在此处 -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import flash.display.BitmapData;
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.text.TextField;
import mx.collections.ArrayCollection;
import mx.containers.Canvas;
import mx.controls.Alert;
import mx.controls.VideoDisplay;
import mx.core.DragSource;
import mx.core.UIComponent;
import mx.events.*;
import mx.graphics.ImageSnapshot;
import mx.graphics.codec.JPEGEncoder;
import mx.managers.DragManager;
import spark.components.Button;
import spark.components.Image;
import spark.skins.spark.ImageSkin;

private var _mask:Image = new Image() ;
private var _dragaImage:Image = new Image();
private var _xOff:Number;
private var _yOff:Number;
private var _transformX:int;
private var _transformY:int;

public function initDragAndDrop():void {
initMask();
}

public function initMask():void {
_mask.source = "panadaBg.png" ;
_mask.width = 200 ;
_mask.height = 200 ;
myGroup.addElement( new UIComponent() );
myGroup.addElement( _mask );
}

public function initJpgDrag(event:MouseEvent):void {
var dragInitiator:Image = Image(event.currentTarget);
var ds:DragSource = new DragSource();
ds.addData(dragInitiator.source, "source");
ds.addData(dragInitiator.width, "width");
ds.addData(dragInitiator.height, "height");
_xOff = event.currentTarget.mouseX;
_yOff = event.currentTarget.mouseY;
DragManager.doDrag(dragInitiator, ds, event);
}

public function phandleDragEnter(event:DragEvent):void {
DragManager.acceptDragDrop( spark.components.Group( event.target ) );
}

public function phandleDragOver(event:DragEvent):void
{
if ( event.ctrlKey )
{
DragManager.showFeedback( DragManager.COPY );
event.currentTarget.setStyle( 'borderColor', 'blue' );
}
else if (event.shiftKey)
{
DragManager.showFeedback( DragManager.LINK );
event.currentTarget.setStyle( 'borderColor', 'green' );
}
else
{
DragManager.showFeedback(DragManager.MOVE);
event.currentTarget.setStyle( 'borderColor', 'yellow' );
}
var dragInitiator:Image = myGroup.getChildAt( 0 ) as Image;
if ( dragInitiator != null )
{
dragInitiator.visible = false ;
}
}

public function phandleDrop(event:DragEvent):void
{
var dragaImage:Image = new Image();
dragaImage.source = event.dragSource.dataForFormat( "source" ) as String;
dragaImage.width = event.dragSource.dataForFormat( "width" ) as int;
dragaImage.height = event.dragSource.dataForFormat( "height" ) as int;

var tempX:int = event.currentTarget.mouseX - _xOff ;
var tempY:int = event.currentTarget.mouseY - _yOff ;
dragaImage.transform.matrix = tmpMatrix ;
dragaImage.x = tempX ;
dragaImage.y = tempY ;
myGroup.removeElement( _mask );
if( event.action == DragManager.MOVE && event.dragInitiator.owner == myGroup )
{
var dragaImage2:Image = event.dragInitiator as Image ;
dragaImage2.x = tempX ;
dragaImage2.y = tempY ;

}else{
myGroup.addElement( dragaImage );
}

myGroup.addElement( _mask );
}

public function phandleDragExit(event:DragEvent):void { }

public function snapShot():void {
var mergeImage:Image = new Image() ;
mergeImage.x = 300 ;
var c2:BitmapData = ImageSnapshot.captureBitmapData( myGroup );
var myCanvasBmp:BitmapData =
new BitmapData( myGroup.width, myGroup.height, true, 0x00000000 );
myCanvasBmp.draw(myGroup,new Matrix());
var bitmap : Bitmap = new Bitmap( myCanvasBmp );
mergeImage.source = c2 ;
this.addElement( mergeImage );
}

public function panadaImageMove(event:MouseEvent):void
{
var dragInitiator:Image = Image( event.currentTarget );
var ds:DragSource = new DragSource();
ds.addData( dragInitiator.source,"source" );
ds.addData( dragInitiator.width,"width" );
ds.addData( dragInitiator.height,"height" );
DragManager.doDrag( dragInitiator, ds, event );
}

private function initJpgDragInCanvas(event:MouseEvent):void
{

var objects:Array = myGroup.getObjectsUnderPoint
(
new Point( event.stageX, event.stageY )
);
objects.sort();
var dragInitiator:Image = new Image ;
for (var i:int=0; i < objects.length; i++)
{
if ( objects[i] is ImageSkin )
{
trace ( "***" + objects[i].parent ) ;
dragInitiator = objects[i].parent as Image ;
}
}

if ( dragInitiator == null )
{
return ;
}
var ds:DragSource = new DragSource();
ds.addData( dragInitiator, "img" );
ds.addData( dragInitiator.source, "source" );
ds.addData( dragInitiator.width, "width" );
ds.addData( dragInitiator.height, "height" );
var imageProxy:Image = new Image();
imageProxy.source = dragInitiator;
imageProxy.height = 100;
imageProxy.width = 100;
imageProxy.transform.matrix = null;
_xOff = event.currentTarget.mouseX - dragInitiator.x ;
_yOff = event.currentTarget.mouseY - dragInitiator.y ;
DragManager.doDrag( dragInitiator, ds, event, imageProxy, 0, 0 );
}

private var tmpMatrix:Matrix;
   
]]>
</fx:Script>
<s:VGroup id = "Catalog">
<s:Image id = "panada" source = "100.jpeg"
width = "100" height = "100"
mouseMove = "initJpgDrag(event)"
/>
</s:VGroup>
<s:Group id = "myGroup" width = "200" height = "200"
x = "200" y = "200"
clipAndEnableScrolling = "true"
dragEnter="phandleDragEnter( event )"
dragOver="phandleDragOver( event )"
dragDrop="phandleDrop( event )"
dragExit="phandleDragExit( event )" mouseMove="initJpgDragInCanvas( event )"
>
<s:Rect width = "100%" height = "100%" id = "bgRect">
<s:fill><s:SolidColor color = "0xFF0000" /></s:fill>
</s:Rect>
</s:Group>
<s:Button click="setTimeout( snapShot, 1000 )" label = "合成" />
 </s:Application>