Flex裁剪图片

最新推荐文章于 2016-03-14 11:03:48 发布
原创 最新推荐文章于 2016-03-14 11:03:48 发布 · 257 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了在Flex中如何裁剪图片，包括通过Embed标签嵌入图片、使用Bitmap对象裁剪图片，以及裁剪图片的类和配置文件的详细流程。提供了具体的代码示例和调用方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

关于CSS裁剪图片参考->http://lpyyn.iteye.com/admin/blogs/2066496

Flex中引用图片的方式：

1.多个图片文件封装到swf中，使用Embed元数据标签声明图片引用的Class属性。具体操作参考附件“[Embed]标签嵌入外部资源  .rar”。

2.分别使用Embed标签嵌入单个图片文件。引用的方式和方式1一样，这是引用的图片文件是单个的图片文件。

3.直接在Imag标签中使用Embed引入图片、指定图片的路径、使用图片的bitmap对象。如下：

4.在flex中根据指定的位置（x、y）、裁剪图片宽度和高度裁剪图片。这种方式实现的效果类似于CSS样式对图片的裁剪。

裁剪图片类：

package com.imageSplit{
import flash.display.Bitmap;

public class ImageInfo{
	public function ImageInfo(source:Bitmap,width:Number,height:Number){
		this.source = source ;
		this.width = width ;
		this.height = height ;
	}
	[Bindable]
	public var source:Bitmap ;
	[Bindable]
	public var width:Number ;
	[Bindable]
	public var height:Number ;

}
}

裁剪图片配置文件：

<?xml version="1.0" ?>
<configuration>
	<srcImage source="com/markers_new.png">
		<!-- 在地图上结果标签 -->
		<image id="MAP_A" x="0" y="0" width="23" height="31"/>
		<image id="MAP_B" x="28" y="0" width="23" height="31"/>
		<image id="MAP_C" x="56" y="0" width="23" height="31"/>
		<image id="MAP_D" x="86" y="0" width="23" height="31"/>
		<image id="MAP_E" x="115" y="0" width="23" height="31"/>
		<image id="MAP_F" x="144" y="0" width="23" height="31"/>
		<image id="MAP_G" x="172" y="0" width="23" height="31"/>
		<image id="MAP_H" x="201" y="0" width="23" height="31"/>
		<image id="MAP_I" x="230" y="0" width="23" height="31"/>
		<image id="MAP_J" x="259" y="0" width="23" height="31"/>
		<!-- 地图上结果标签高亮显示 -->
		<image id="MAP_A_OVER" x="0" y="71" width="27" height="39"/>
		<image id="MAP_B_OVER" x="33" y="71" width="27" height="39"/>
		<image id="MAP_C_OVER" x="67" y="71" width="27" height="39"/>
		<image id="MAP_D_OVER" x="101" y="71" width="27" height="39"/>
		<image id="MAP_E_OVER" x="135" y="71" width="27" height="39"/>
		<image id="MAP_F_OVER" x="169" y="71" width="27" height="39"/>
		<image id="MAP_G_OVER" x="202" y="71" width="27" height="39"/>
		<image id="MAP_H_OVER" x="236" y="71" width="27" height="39"/>
		<image id="MAP_I_OVER" x="270" y="71" width="27" height="39"/>
		<image id="MAP_J_OVER" x="304" y="71" width="27" height="39"/>
		<!-- 查询项结果标签 -->
		<image id="RESULT_A" x="0" y="198" width="19" height="28"/>
		<image id="RESULT_B" x="24" y="198" width="19" height="28"/>
		<image id="RESULT_C" x="48" y="198" width="19" height="28"/>
		<image id="RESULT_D" x="72" y="198" width="19" height="28"/>
		<image id="RESULT_E" x="96" y="198" width="19" height="28"/>
		<image id="RESULT_F" x="120" y="198" width="19" height="28"/>
		<image id="RESULT_G" x="144" y="198" width="19" height="28"/>
		<image id="RESULT_H" x="168" y="198" width="19" height="28"/>
		<image id="RESULT_I" x="192" y="198" width="19" height="28"/>
		<image id="RESULT_J" x="216" y="198" width="19" height="28"/>
		<!-- 查询项结果标签高亮显示 -->
		<image id="RESULT_A_OVER" x="0" y="230" width="19" height="28"/>
		<image id="RESULT_B_OVER" x="24" y="230" width="19" height="28"/>
		<image id="RESULT_C_OVER" x="48" y="230" width="19" height="28"/>
		<image id="RESULT_D_OVER" x="72" y="230" width="19" height="28"/>
		<image id="RESULT_E_OVER" x="96" y="230" width="19" height="28"/>
		<image id="RESULT_F_OVER" x="120" y="230" width="19" height="28"/>
		<image id="RESULT_G_OVER" x="144" y="230" width="19" height="28"/>
		<image id="RESULT_H_OVER" x="168" y="230" width="19" height="28"/>
		<image id="RESULT_I_OVER" x="192" y="230" width="19" height="28"/>
		<image id="RESULT_J_OVER" x="216" y="230" width="19" height="28"/>
		
		<image id="BUFFER_CENTER" x="68" y="156" width="27" height="37"/>
	</srcImage>
</configuration>

 裁剪图片工具类，逻辑流程为：加载裁剪图片配置文件->加载图片->裁剪图片->保存裁剪的图片到ImageInfo中。

package com.imageSplit{

import com.esri.viewer.utils.Hashtable;

import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.Loader;
import flash.events.Event;
import flash.events.EventDispatcher;
import flash.events.IOErrorEvent;
import flash.geom.Point;
import flash.geom.Rectangle;
import flash.net.URLRequest;
import flash.text.StaticText;
import flash.utils.ByteArray;

import mx.controls.Alert;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
import mx.rpc.http.HTTPService;

public class ImageSplitUtil extends EventDispatcher{
	
	//默认配置文件的路径位于当前类包下
	public static var configURL:String = "com/ImageSplitInfo.xml" ;
	
	private static var srcImageList:XMLList = null ;
	/**
	 * 存储Image的ID与对应的Source属性
	 */
	private static var imageSourceMap:Hashtable = new Hashtable;
	/**
	 * 由构造函数加载需要裁剪的图片信息
	 */
	public function ImageSplitUtil(){
	}
	/**
	 * 根据图片ID获取指定的图片
	 */
	public static function getImage(id:String=null):ImageInfo{
		if(id==null||imageSourceMap.find(id)==null){
			return null ;
		}
		var imageInfo:ImageInfo = imageSourceMap.find(id) as ImageInfo ;
		return imageInfo ;
	}
	/**
	 * 加载配置需要裁剪图片的配置文件，并裁剪图片源文件生成新的图片
	 */
	public static function loadConfig():void{
		//如果加载URL为null或已经加完，取消加载
		if(configURL==null||imageSourceMap.size>0){
			return ;
		}
		var configService:HTTPService = new HTTPService();
		configService.url = configURL;
		configService.resultFormat = HTTPService.RESULT_FORMAT_TEXT;
		configService.addEventListener(ResultEvent.RESULT, configService_resultHandler);
		configService.addEventListener(FaultEvent.FAULT, configService_faultHandler);
		configService.send();
	}
	/**
	 * 图片加载处理函数
	 * var imageInfo:ImageInfo = ImageCutUtil.getImage("G") ;
	 * graphic2.symbol = new PictureMarkerSymbol(imageInfo.source,imageInfo.width,imageInfo.height,0,imageInfo.height/2) ;
	 */
	private static function loadImage(loaderId:Number=0,url:String=null):void{
		if(url==null){
			return ;
		}
		try{
			var loader: Loader = new Loader();
			loader.name = String(loaderId);
			loader.load(new URLRequest(url));  
			loader.contentLoaderInfo.addEventListener(Event.COMPLETE,loadImageComplete);
		}catch(error:Error){
			trace("加载图片："+url+" 出错。");
		}
	}
	/**
	 * 加载配置文件完成处理函数，并派发图片加载完成事件
	 */
	private static function configService_resultHandler(event:ResultEvent):void{
		var configXML:XML = XML(event.result);
		srcImageList = XMLList(configXML.srcImage) ;
//		分别装载图片
		var index:Number = 0 ;
		for each (var src:XML in srcImageList) {
			loadImage(index++,src.@source);
		}
		//派发图片加载完成处理函数，并不是完全同步于图片加载
//		AppEvent.dispatch(ChrhcAppEvent.IMAGE_LOAD_COMPLETE , null);
	}
	/**
	 * 图片加载完成处理函数
	 */
	protected static function loadImageComplete(event:Event):void{
		//获取图片装载器
		var loader: Loader = Loader(event.target.loader);
//		loader.close();
		var loaderId:Number = Number(loader.name) ;
		
		if(srcImageList==null||srcImageList.length()<loaderId){
			return ;
		}
		var srcImage:XML = srcImageList[loaderId] ;
		var imageList:XMLList = srcImage.image ;
		//逐个图片
		for each (var image:XML in imageList) {
			//获取裁剪图片的属性
			var id:String = String(image.@id);
			var x:Number = Number(image.@x) ;
			var y:Number = Number(image.@y) ;
			var width:Number = Number(image.@width) ;
			var height:Number = Number(image.@height) ;
			//获取图片指定区域中的bitmap
			var bitmap:Bitmap = getRectBitMap(x,y,width,height,(loader.content as Bitmap));
			//按照ID和bitmap的对形式存储
			imageSourceMap.add(id,new ImageInfo(bitmap,width,height));
		}
		
	}
	/**
	 * 获取指定区域的bitmap数据
	 */
	private static function getRectBitMap(x:Number,y:Number,width:Number,height:Number,bitMap:Bitmap):Bitmap{
		
		var targetBitMapData:BitmapData = new BitmapData(width,height,true);
		//由x,y开始拷贝width和height数据到0,0点
		targetBitMapData.copyPixels(bitMap.bitmapData,new Rectangle(x,y,width,height),new Point(0,0));
		
		return new Bitmap(targetBitMapData);
	}
	/**
	 * 加载配置文件出错
	 */
	private static function configService_faultHandler(event:FaultEvent):void{
		Alert.show("加载裁剪图片配置文件出错");
	}
}
}

 调用：

使用ImageSplitUtil.getImage('RESULT_A').source获取图片的bitmap对象。
待裁剪的图片见附件：markers_new.png。

Flex采用遮罩方法图片裁剪
04-14
在Flex开发中，图片裁剪是一项常见的需求，特别是在创建用户界面或者图像编辑应用时。本文将详细介绍如何在Flex 3.5及以上版本中利用遮罩技术实现图片裁剪功能。 遮罩（Masking）是ActionScript 3和Flex中一个强大...
flex图片裁剪
java电商源码分享
12-22 170
//构造函数 public function testSprite() { this.loadImg(); this.createSmallCanvas(); } //装载图片 public function loadImg(): void{ var loader: Loader = new Loader(); var url: String = "http:...
Flex 图像裁剪、剪切
wuxiubing的专栏
02-07 260
Flex 图像裁剪、剪切
flex图片剪切示例--预览、保存到本地、保存到服务器(附源码)
泛中游
12-31 900
转：http://www.blogjava.net/obpm/archive/2010/09/01/330501.html     效果图： flex代码:   <![CDATA[ import mx.controls.Image; import mx.graphics.ImageSnapshot; import flash.net.Fil
Flex图片批量裁剪与上传（源代码)
weixin_30613433的博客
04-02 149
在线预览地址： http://rj.8634.com/xiaoshandong/ImageUploading/ 截图 转载于:https://www.cnblogs.com/ffmpeg/p/4386132.html
Flex裁剪图片工具的使用与源码分析
总结来说，通过上述知识点的介绍，我们可以了解到在Flex中进行图片裁剪时需要掌握的核心技能，包括Flex的基础知识、图片裁剪的具体方法、[Embed]标签的使用技巧、Flex编程基础、Flex工具的使用以及文档资源的管理...
flex剪裁图片demo
05-10
"flex剪裁图片demo"是一个利用CSS Flexbox布局技术来实现图片剪裁功能的示例。下面将详细介绍如何使用Flexbox来创建一个可调整大小的图片剪裁框。 **一、Flexbox简介** Flexbox（弹性盒布局）是CSS3中的一种布局...
Flex采集摄像头照片----增加裁剪功能
O(∩_∩)O~
10-16 325
Flex 摄像头拍照(带裁剪) 有演示地址 asp.net版
08-10
Flex 摄像头拍照(带裁剪) 有演示地址 asp.net版 演示地址: http://www.bt-wow.cn/study/camera.aspx 都是自己辛苦做的，现在分享给大家。
flex经典列子（实现对图片的剪切）
07-05
flex经典列子（实现对图片的剪切）flex经典列子（实现对图片的剪切）
Flex客户端裁剪地图
12-14
范例使用supermap iclient for Flex客户端裁剪地图。
flex 截图
java电商源码分享
10-27 189
需要用到附件中的包。将包解压到flex工程的src目录下   源码： &lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="403" height="497"
flex4.6 图片裁剪小示例
clschen的专栏
06-27 1387
flex4.6 图片裁剪小示例，图片可以旋转，裁剪框有点bug。谨供大家学习交流。可以用来处理头像等 =>演示地址 =>详细介绍及源码
Flex头像裁剪
weixin_34032827的博客
10-19 121
2019独角兽企业重金招聘Python工程师标准>>> ...
基于Flex的裁剪图片功能封装
qq_30086207的博客
03-14 603
欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦： Markdown和扩展Markdown简洁的语法 代码块高亮 图片链接和图片上传 LaTex数学公式 UML序列图和流程图 离线写博客 导入导出Markdown文件 丰富的快捷键 快捷键 加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl
flex3 图片裁剪
仙草的...
09-16 932
效果图如上: 主界面代码如下： <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="416" height="352" showCloseButton="tr
actionScript 3.0 图片裁剪及旋转
三味书屋
10-08 185
package com.wdxc {          /**     * ...      * @author luqinglong     */     public class MouseInfo {         /*鼠标左边缘、右边缘等*/         private var _position:uint = 100 ;                   /*鼠标状态 按下...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值