`
lzj520
  • 浏览: 213505 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

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>

分享到:
评论

相关推荐

    Flex4实现拖拽功能

    在Flex4中,拖放(Drag and Drop,简称DnD)功能是一项强大的交互设计工具,它允许用户通过直观的拖动操作在界面上移动或转移数据。在本主题中,我们将深入探讨如何在Flex4中实现图片的拖放功能,包括两种模式:拖动...

    支持手动拖拽缩放flex组件的组件

    在给定的标题“支持手动拖拽缩放flex组件的组件”中,我们可以推断出这是一个专门针对Flex环境设计的组件,它允许用户通过手动拖拽和缩放操作来调整Flex应用中的组件大小。 描述中提到的“com.janisRadins.zip”很...

    flex pv3d 照片浏览 照片墙

    标题中的“flex pv3d 照片浏览 照片墙”指的是使用Adobe Flex技术结合PV3D库开发的一款3D照片浏览应用,它创建了一种类似照片墙的展示效果,让用户能够以三维视角来查看和浏览照片。这种技术在Web前端开发中常用于...

    flex4 实战 flex4 in action

    此外,Flex 4中的ActionScript 3.0有了显著增强,包括类的优化、访问修饰符的改进以及对ECMAScript for XML (E4X)的全面支持,使得数据处理更加简便。新的骨骼动画系统(Skinning and States)也是Flex 4的一大亮点...

    FLEX4_Flex4教程 - FLEX4从入门到精通,挺不错的值得一看

    7. **Services和Remoting**:Flex4支持与各种后端服务进行通信,包括AMF(Action Message Format)、SOAP、REST等,开发者可以方便地集成XML、JSON或自定义数据格式,实现数据的交换和处理。 8. **图形和动画**:...

    Flex 4 高级编程 Flex 4 高级编程

    9. **移动设备支持**:Flex 4 还支持Flash Player和Adobe AIR在移动设备上的部署,为开发跨平台的移动应用提供了可能。 10. **Flex Builder和Flex SDK**:Adobe Flex Builder作为IDE,提供了丰富的调试工具和代码...

    用Flex写的照片旋转

    标题中的“用Flex写的照片旋转”指的是使用Adobe Flex框架开发的一款功能,允许用户对照片进行旋转操作。Flex是一个开源的、基于ActionScript的框架,主要用于构建富互联网应用程序(RIA),它提供了一整套组件和...

    Flex3与Flex4对比

    - **FlexUnit支持**:FlexUnit是一种用于Flex项目的单元测试框架,仅在Flex4的高级版本中得到支持。 - **自动化功能测试**:Flex3与Flex4的高级版本均支持自动化功能测试,这对于确保应用质量至关重要。 ##### 3. ...

    flex 图片画线,拖动

    在IT行业中,尤其是在Web开发领域,"flex 图片画线,拖动"是一个常见的交互功能需求,用于增强用户体验。这个功能通常涉及到HTML5、CSS3和JavaScript等技术,特别是Flex布局和SVG图形技术。让我们详细探讨一下这个...

    flex拖拽

    在前端开发中,"flex拖拽"是一种常见交互设计,特别是在构建可自定义布局或需要用户手动调整元素位置的应用中。Flex布局(Flexible Box Layout)是CSS3的一种布局模式,它提供了一种更加灵活的方式来控制容器中子...

    Flex 4的十大变化

    Flex 4,也被称为Gumbo,是Adobe Flex框架的一个重大更新,它引入了许多关键变化以提升RIA(Rich Internet Applications)的开发效率和用户体验。以下是Flex 4中的十大变化的详细说明: 1. **Adobe Catalyst集成**...

    Flex4 一学就会 (Hello Flex4)

    Flex4,全称为Adobe Flex 4,是一款由Adobe公司开发的开源框架,主要用于构建富互联网应用程序(Rich Internet Applications,简称RIA)。Flex4以其强大的组件库、灵活的样式系统和优化的图形渲染引擎,极大地提升了...

    flex4 学习资料

    2. **Flex Builder/Flash Builder**:Adobe提供的集成开发环境(IDE),支持Flex4应用的创建、调试和部署,提供代码提示和图形化组件设计工具。 3. **Spark组件库**:Flex4引入的新组件集,相比Flex3的 Halo 组件,...

    Flex4开发实践PPT

    2. ActionScript 3.0:作为Flex4的编程语言,AS3提供面向对象的特性,支持类、接口、包等概念,具有高性能和丰富的库支持。 3. Spark组件:Flex4引入的新组件集,提供更高效、可定制的组件,支持数据绑定和复合组件...

    flex4 学习全部资料

    Flex4是一种强大的富互联网应用程序(RIA)开发框架,由Adobe公司推出,主要用于构建交互性强、视觉效果丰富的Web应用。在本资源包中,你将找到关于Flex4学习的所有必要资料,包括安装指南、API文档、学习文档以及...

    Flex3与flex4的区别

    首先,由于Flex4需要Flash Player 10的支持,确保应用程序针对此版本的播放器进行编译是至关重要的。其次,Flex4中的CSS字体选择器现在需要命名空间,这与Flex3不同。为了适应这一变化,开发者需要在CSS中添加命名...

    flex实现的拖拽控件

    在这个场景中,我们关注的是Flex实现的拖拽控件,这是一种交互式UI元素,允许用户通过鼠标操作移动元素,提供了丰富的用户体验。 拖拽功能在Flex中可以通过使用内置的DragManager类和Event类来实现。DragManager类...

    Flex4实战代码

    CH18 - "模块化与性能优化":Flex4支持模块化开发,有助于大型项目的组织和管理。这部分可能探讨了如何创建和使用模块,以及如何优化Flex应用的性能。 CH19 - "测试与调试":讲解了在Flex开发过程中如何进行有效的...

Global site tag (gtag.js) - Google Analytics