关于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剪裁图片demo"是一个利用CSS Flexbox布局技术来实现图片剪裁功能的示例。下面将详细介绍如何使用Flexbox来创建一个可调整大小的图片剪裁框。 **一、Flexbox简介** Flexbox（弹性盒布局）是CSS3中的一种布局...
图像裁剪和剪切功能在Web应用中非常常见，例如在社交媒体平台或在线图片编辑工具中，用户可能需要调整图片大小、裁剪不必要的部分或创造出独特的视觉效果。 在Flex中实现图像裁剪和剪切，主要涉及到以下几个关键...
在这个“flex 两个图片播放小程序”项目中，我们可以看到它被用来创建一个图片浏览应用，支持图片的放大和缩小功能，提供了用户友好的交互体验。接下来，我们将深入探讨Flex在图片浏览中的应用及其关键技术。 首先...
此外，你可能需要考虑背景图片的拉伸和裁剪问题。默认情况下，`<s:Image>`或`Image`对象会尝试保持原始图片的比例。如果需要填充容器而不保持比例，可以使用`scaleMode`属性，例如设置为`"stretch"`。但请注意，这...
在Flex开发中，图片裁剪是一项常见的需求，特别是在创建用户界面或者图像编辑应用时。本文将详细介绍如何在Flex 3.5及以上版本中利用遮罩技术实现图片裁剪功能。 遮罩（Masking）是ActionScript 3和Flex中一个强大...
对于图片压缩，常见的优化策略包括调整颜色深度、使用适当的压缩算法、裁剪不必要的部分、减小尺寸等。在Flex中，可以使用BitmapData的compress()方法，传入合适的压缩格式（如JPEGEncoder或PNGEncoder）和质量参数...
5. **图像处理**：图片编辑功能的实现需要对图像处理有深入理解，这涉及到色彩模型（RGB、CMYK等）、滤镜效果（模糊、锐化、扭曲等）、图像操作（裁剪、旋转、缩放等）。在Flex中，可以使用BitmapData类来处理像素...
通过调整组件属性，我们可以实现各种图片显示效果，包括但不限于缩放、裁剪、平铺等。 要在Flex应用中显示图片，我们需要以下几个步骤： 1. 引入Image组件：在MXML文件中，可以通过以下方式引入`<mx:Image>`标签来...
Java和C#的实现图片头像裁剪功能(含Flex、Flash、js、JQuery版)Java和C#的实现图片头像裁剪功能(含Flex、Flash、js、JQuery版)Java和C#的实现图片头像裁剪功能(含Flex、Flash、js、JQuery版)Java和C#的实现图片头像...
你可能需要创建一个Web服务或API接口，接收来自Flex的POST请求，其中包含裁剪后的图片数据。处理流程可能如下： ```csharp [HttpPost] public void UploadImage(string imageData) { byte[] imageBytes = Convert....
这样，图片数据就被加载到内存中，可供后续处理，如缩放、裁剪、滤镜效果等。 4. **性能优化**： - 对于大尺寸图片，加载到内存可能会消耗大量资源，因此在预览阶段，可以考虑先对图片进行缩放处理，减少内存占用...
综合以上信息，这个Flex测试项目是一个具有图片处理功能的Web应用，包括压缩、上传和裁剪图片，并且进行了模块化设计以便测试和维护。同时，它还考虑了多语言支持，提供良好的用户体验。通过分析代码和测试，可以...
使用ImageLoader，开发者可以控制加载进度、处理错误以及设置图像的缩放和裁剪方式。ImageLoader与Flex的其他组件一样，可以轻松地通过MXML或者ActionScript进行集成。 关于"源码"标签，Flex作为一个开源项目，其源...
在本话题中，我们将探讨“flex图片操作”，这涉及到如何使用Flex来处理和展示图片，包括调整角度和应用滤镜等视觉效果。 一、Flex中的图片显示 在Flex中，我们可以使用`mx.controls.Image`组件来显示图片。这个...
例如，如果你需要对加载的图像进行一些像素级别的操作，如裁剪或调整大小，`BitmapData` 就非常有用。你可以先加载图像，然后使用 `Loader` 的 `content` 属性获取 `BitmapData` 对象： ```actionscript loader....
Flex写的图片截图工具，可以用在客户端对图片裁剪，比如头像，文章标题图片等。
对于`PictureTool`这个文件，这可能是用于处理图片的辅助工具类，包含了一些如缩放、裁剪、旋转等图片操作的方法。在将JPG图片合成为GIF的过程中，可能需要先对图片进行预处理，此时`PictureTool`就派上用场了。 在...
“图片剪切”功能是项目的核心部分，用户可以通过该功能选择并裁剪图片，以适应特定的需求，如设置头像或分享到社交网络。这种功能通常涉及图像处理算法，包括选择、旋转、缩放、裁剪等操作。在Java中，可以使用Java...
- `object-fit`属性控制图片在元素框内的适应方式，如`contain`（保持宽高比填充元素）、`cover`（保持宽高比填充元素，可能裁剪部分图像）等。 - `border-radius`可以创建圆角图片。 - `filter`属性可应用视觉效果...