FLEX4 相片合成，支持拖动

FLEX4 照片合成，支持拖动

flex 4.5 下测试通过，将2张照片合成后生成合成图

<?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;

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

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' );
}
}

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.x = tempX ;
dragaImage.y = tempY ;
myGroup.removeAllElements();
myGroup.addElement( bgRect );
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 dragInitiator:Image = myGroup.getChildAt( 1 ) 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;
_xOff = event.currentTarget.mouseX - dragInitiator.x ;
_yOff = event.currentTarget.mouseY - dragInitiator.y ;
DragManager.doDrag( dragInitiator, ds, event, imageProxy, 0, 0 );
}
]]>
</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>