图片拖动类:
package prx.drag
{
import mx.core.UIComponent;
import mx.core.DragSource;
import mx.controls.Image;
import mx.events.DragEvent;
import mx.managers.DragManager;
import flash.display.DisplayObject;
import flash.display.BitmapData;
import flash.display.Bitmap;
import flash.events.MouseEvent;
public class DragUtil
{
public function DragUtil() {
}
/**
* 开始拖拽
* */
public static function dragHandler(event:MouseEvent):void
{
// 定义拖拽挂载数据源
var dsragSource:DragSource = new DragSource();
// 定义拖拽图标
var copy:Image = new Image();
// 拖拽对象
var target:Image = event.currentTarget as Image;
// 添加拖拽数据源数据
dsragSource.addData(target, "img");
dsragSource.addData(event.localX, "x");
dsragSource.addData(event.localY, "y");
// 拖拽图标
copy.source = new Bitmap(getBitmapData(target.content));
// 执行拖拽
DragManager.doDrag(target, dsragSource, event, copy);
}
/**
* 进入拖放区域
* */
public static function dragEnterHandler(event:DragEvent):void
{
// 进入区域, 设置状态为允许拖放
if (event.dragSource.hasFormat("img"))
DragManager.acceptDragDrop(event.target as UIComponent);
}
/**
* 释放拖拽
* */
public static function dragDropHandler(event:DragEvent):void
{
var img:Image = event.dragSource.dataForFormat("img") as Image;
// 处理图片防止位置
img.x = event.currentTarget.mouseX - (event.dragSource.dataForFormat("x") as Number);
img.y = event.currentTarget.mouseY - (event.dragSource.dataForFormat("y") as Number);
}
/**
* 获取图片信息
* */
private static function getBitmapData(target:DisplayObject):BitmapData
{
var res:BitmapData = new BitmapData(target.width, target.height);
res.draw(target);
return res;
}
}
}
使用方法:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
width="624"
height="458"
minWidth="350"
minHeight="136"
backgroundColor="#ffffff"
>
<mx:Script>
<![CDATA[
import prx.drag.DragUtil;
]]>
</mx:Script>
<mx:Canvas id="testArea" backgroundColor="#ffffff" width="300" height="400"
dragEnter="DragUtil.dragEnterHandler(event);" dragDrop="DragUtil.dragDropHandler(event);" >
<mx:Image source="images/stop.png" mouseDown="DragUtil.dragHandler(event);" />
<mx:Image source="images/sound.png" mouseDown="DragUtil.dragHandler(event);" />
</mx:Canvas>
</mx:Application>
分享到:
相关推荐
在图片拖动的场景中,我们可以将图片作为一个flex项目,利用flexbox的特性来调整图片的位置和尺寸。 图片画线则可能涉及SVG(Scalable Vector Graphics)技术。SVG是一种基于XML的矢量图像格式,它可以被用来创建可...
在Flex开发中,图片的旋转、缩放和拖动功能是常见的交互效果,尤其是在构建富互联网应用程序(RIA)时。Flex作为一个基于ActionScript 3.0的开源框架,提供了强大的图形处理和用户交互能力,使得实现这些特效成为...
在本文中,我们将深入探讨如何在Flex环境中实现鼠标拖动图片的功能,并在鼠标松开时停止拖动。Flex是一种基于ActionScript 3.0的开放源代码框架,用于构建富互联网应用程序(RIAs)。它提供了丰富的用户界面组件库,...
在这个场景中,我们关注的是Flex实现的拖拽控件,这是一种交互式UI元素,允许用户通过鼠标操作移动元素,提供了丰富的用户体验。 拖拽功能在Flex中可以通过使用内置的DragManager类和Event类来实现。DragManager类...
在本主题中,我们将深入探讨如何在Flex4中实现图片的拖放功能,包括两种模式:拖动图片不删除原图和拖动图片后删除原图。 首先,我们需要了解Flex4中的DragManager类,它是实现拖放操作的核心。DragManager提供了...
### Flex 拖拽图片代码解析 #### 一、引言 本文主要解析一份关于Flex 3.0中实现图片拖拽功能的代码。通过详细分析这份代码,可以帮助读者更好地理解Flex中的拖拽机制以及如何在实际项目中应用这一功能。 #### 二、...
在这个“flex 两个图片播放小程序”项目中,我们可以看到它被用来创建一个图片浏览应用,支持图片的放大和缩小功能,提供了用户友好的交互体验。接下来,我们将深入探讨Flex在图片浏览中的应用及其关键技术。 首先...
在Flex图片查看器中,"zoomin" 和 "zoomout" 是两个关键功能,它们允许用户对图片进行放大和缩小操作。这一特性在很多应用场景中都非常实用,比如在线看图、产品细节展示或者图像分析等。Zoomin功能允许用户点击或...
通过拖动图片至回收站区域即可完成删除操作,而要恢复则只需将图片从回收站移回,体现了良好的用户友好性。 5. 图片别名设置:用户可以为每张图片设置别名,这个别名将在上传时作为参数传递给后台系统。别名的使用...
一、Flex图片预览组件基础 在Flex中,我们可以利用MX或Spark组件库中的Image组件来展示单张图片。然而,为了实现多图预览和滚动效果,我们需要自定义组件或者使用现有的第三方库,如在本例中的"photocoverflowLayout...
标题中的"一个Flex鼠标拖拽图片的简单例子(附源码)"表明我们将讨论如何在Flex项目中创建一个可拖动的图片元素。在Flex中,实现这一功能主要涉及事件监听、坐标转换和图形渲染等技术。以下是具体步骤和知识点: 1....
标题提及的"“FLEX 图片浏览功能可以轻松实现图片浏览”",这指的是使用Flex3开发的图片查看器应用,它允许用户方便地查看和浏览图片,同时可能还支持一些高级特性,如缩放、旋转、平移等。Flex3提供了强大的图形...
在开发Flex图片编辑器时,主要涉及以下知识点: 1. **Flex SDK**:Flex SDK是开发Flex应用程序的基础,包括ActionScript编译器和MXML编译器,以及用于构建、测试和部署应用的工具。开发者需要下载并安装SDK来开始...
总结来说,创建一个Flex图片浏览应用,需要掌握Flex的组件系统、事件处理机制以及图形渲染的基础知识。通过结合MXML和ActionScript,我们可以构建出一个具有缩放和平移功能的图片浏览器,提供用户友好的体验。在实际...
"flex剪裁图片demo"是一个利用CSS Flexbox布局技术来实现图片剪裁功能的示例。下面将详细介绍如何使用Flexbox来创建一个可调整大小的图片剪裁框。 **一、Flexbox简介** Flexbox(弹性盒布局)是CSS3中的一种布局...
以上就是创建Flex图片缩放移动组件的主要步骤和技术要点。通过熟练掌握这些知识,开发者可以构建出具有交互性、可扩展性的图像操作界面,提升用户体验。在实际应用中,可能还需要考虑触摸设备的支持、多线程优化、...
flex写的一个可拖拽的容器系统 有点像背包系统 但背包内元素是图标 这个是容器里面愿意放什么放什么(如列表、日历等) 本资源非原创 从老外那找的 里面是纯代码生成的 支持技术研究(如果是图片格式请不要下载,...
### FLEX 容器内多个图片分别拖动 在Adobe Flex框架中实现多个图片的独立拖动是一项实用且常见的功能,特别是在开发具有交互性的应用程序时。本文将详细解析如何使用Flex实现这一功能,并深入探讨其背后的原理和...
flex单击图片拖动,双击图片旋转,双击单击同时用,虽然不难,但对初学者很有帮助的,找到一个很好的例子来学习flex会事半功倍
通过以上步骤,我们可以构建一个功能完备的Flex图片裁剪应用。在实际开发中,还需要考虑性能优化、错误处理、兼容性等问题,确保应用在各种环境下的稳定运行。同时,对于源码的学习和分析,可以帮助开发者更深入理解...