Flex裁剪图片

关于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,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,height));
		}
		
	}
	/**
	 * 获取指定区域的bitmap数据
	 */
	private static function getRectBitMap(x:Number,y:Number,height:Number,bitMap:Bitmap):Bitmap{
		
		var targetBitMapData:BitmapData = new BitmapData(width,true);
		//由x,y开始拷贝width和height数据到0,0点
		targetBitMapData.copyPixels(bitMap.bitmapData,new Rectangle(x,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。