Flex 实现动态加载图片

加载图标和图片，网上的例子到处都是...

非常可惜的是，都是“写死的”...

很容易看到，都是

Java代码

1. /**背景图片.*/
2. [Embed("com/emavaj/myfriend/assets/pic/bg.swf")]
3. [Bindable]
4. publicvarbg:Class;

/**背景图片.*/
[Embed("com/emavaj/myfriend/assets/pic/bg.swf")]
[Bindable]
public var bg:Class;

用“绑定”，然后再赋值给需要的控件

那么如果用户需要上传图片，把路径存入数据库了

读取的时候，怎么用以上的方式读取图片呢？

1) 读取图片

Java代码

1. varloader:Loader=newLoader();
2. loader.contentLoaderInfo.addEventListener(Event.COMPLETE,afterLoad);
3. loader.load(newURLRequest(...));

var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE,afterLoad);
loader.load(new URLRequest(...));

就是创建个Loader，然后监听完成事件，然后加载URLRequest指向的资源即可

需要注意的是，loader监听的时候，是

Java代码

1. loader.contentLoaderInfo.addEventListener(Event.COMPLETE,afterLoad);

loader.contentLoaderInfo.addEventListener(Event.COMPLETE,afterLoad);

不是

Java代码

1. loader.addEventListener(Event.COMPLETE,afterLoad);

loader.addEventListener(Event.COMPLETE,afterLoad);

2个的效果不一样的...

函数部分:

Java代码

1. publicfunctionafterLoad(event:Event):void{
2. _image.source=event.currentTarget.content
3. }

public function afterLoad(event:Event):void {
	_image.source = event.currentTarget.content
}

（大概是这样...我有点记不清了...）

2) 加载图标 Icon

这2个有什么不同呢？

Image接收的是 Bitmap对象

而Icon接收的是 Class对象

（Image也能接收Class，但是Icon不能接收Bitmap）

我找了好久也不知道怎么加载Class

后来发现一个工具包

IconUtility

其实也就是一个.as文件而已

然后使用里面的方法

Java代码

1. IconUtility.getClass(uiComponent,iconUrl)

IconUtility.getClass(uiComponent,iconUrl)

就能返回加载好的Class对象

函数原型为：

Java代码

1. publicstaticfunctiongetClass(target:UIComponent,source:String,width:Number=NaN,height:Number=NaN):Class

public static function getClass( target:UIComponent, source:String, width:Number = NaN, height:Number = NaN ):Class

在附件中有这个as文件

/*********************************************************************************************************************************

Copyright (c) 2007 Ben Stucki

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation
files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy,
modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the
Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

*********************************************************************************************************************************/
package com.emavaj.myfriend.util
{
import flash.display.BitmapData;
import flash.display.Loader;
import flash.display.LoaderInfo;
import flash.events.Event;
import flash.geom.Matrix;
import flash.net.URLRequest;
import flash.system.LoaderContext;
import flash.utils.Dictionary;

import mx.containers.accordionClasses.AccordionHeader;
import mx.controls.tabBarClasses.Tab;
import mx.core.BitmapAsset;
import mx.core.UIComponent;

/**
* Provides a workaround for using run-time loaded graphics in styles and properties which require a Class reference
*/
public class IconUtility extends BitmapAsset
{

private static var dictionary:Dictionary;

/**
* Used to associate run-time graphics with a target
* @param target A reference to the component associated with this icon
* @param source A url to a JPG, PNG or GIF file you wish to be loaded and displayed
* @param width Defines the width of the graphic when displayed
* @param height Defines the height of the graphic when displayed
* @return A reference to the IconUtility class which may be treated as a BitmapAsset
* @example <mx:Button id="button" icon="{IconUtility.getClass(button, 'http://www.yourdomain.com/images/test.jpg')}" />
*/
public static function getClass( target:UIComponent, source:String, width:Number = NaN, height:Number = NaN ):Class {
if(!dictionary) {
dictionary = new Dictionary(false);
}
//if(source is String) {
var loader:Loader = new Loader();
loader.load(new URLRequest(source as String), new LoaderContext(true));
//source = loader;
//}
dictionary[target] = { source:loader, width:width, height:height };
return IconUtility;
}

/**
* @private
*/
public function IconUtility():void {
addEventListener(Event.ADDED, addedHandler, false, 0, true)
}

private function addedHandler(event:Event):void {
if(parent) {
if(parent is AccordionHeader) {
var header:AccordionHeader = parent as AccordionHeader;
getData(header.data);
} else if(parent is Tab) {
var tab:Tab = parent as Tab;
getData(tab.data);
} else {
getData(parent);
}
}
}

private function getData(object:Object):void {
var data:Object = dictionary[object];
if(data) {
var source:Object = data.source;
if(data.width > 0 && data.height > 0) {
bitmapData = new BitmapData(data.width, data.height, true, 0x00FFFFFF);
}
if(source is Loader) {
var loader:Loader = source as Loader;
if(!loader.content) {
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler, false, 0, true);
} else {
displayLoader(loader);
}
}
}
}

private function displayLoader( loader:Loader ):void {
if(!bitmapData) {
bitmapData = new BitmapData(loader.content.width, loader.content.height, true, 0x00FFFFFF);
}
bitmapData.draw(loader, new Matrix(bitmapData.width/loader.width, 0, 0, bitmapData.height/loader.height, 0, 0));
if(parent is UIComponent) {
var component:UIComponent = parent as UIComponent;
component.invalidateSize();
}
}

private function completeHandler(event:Event):void {
if(event && event.target && event.target is LoaderInfo) {
displayLoader(event.target.loader as Loader);
}
}

}
}