需求為:動態加載圖片 Image后,使用 馬賽克 特效。
問題:new Image 后,馬上取不到圖片數據,沒辦法做馬賽克處理,需要等待圖片加載完成.
發現直接使用如下代碼的話,讀取不到圖片數據.
private function init():void
{
var image:Image = new Image();
image.source = "image/water.jpg";
addChild(image);
trace(image.width + ":" + image.height);
}
結果顯示 0:0
發現需要等待圖片加載完成后,才可以取得到數據,於是修改為
private function init():void
{
var image:Image = new Image();
image.source = "image/water.jpg";
image.addEventListener(Event.COMPLETE, complete);
addChild(image);
trace(image.width + ":" + image.height);
}
private function complete(event:Event):void {
var image:Image = event.target as Image;
trace(image.width + ":" + image.height);
}
結果仍然顯示 0:0
搞不明白那個Event.COMPLETE,到底幹嘛去了。
於是花費我大量時間,經過一番徹底研究(google了半小時),終於發現,不能監聽Event.COMPLETE,正確的做法應該是監聽 Event.RESIZE
代碼修改如下:
private function init():void
{
var image:Image = new Image();
image.source = "image/water.jpg";
image.addEventListener(Event.RESIZE, complete);
addChild(image);
}
private function complete(event:Event):void {
var image:Image = event.target as Image;
trace(image.width + ":" + image.height);
}
結果顯示 502:750
讀取到大小了。圖片應該是加載完了。
接下來需要做的是,將圖片加上馬賽克效果:
private function init():void
{
var image:Image = new Image();
image.source = "image/water.jpg";
image.addEventListener(Event.RESIZE, complete);
addChild(image);
}
private function complete(event:Event):void {
var image:Image = event.target as Image;
trace(image.width + ":" + image.height);
var bmpData:BitmapData = DisplayObjectFilter.mosaicFilter2( image, 0.2 );
var bmp:Bitmap = new Bitmap( bmpData );
var image2:Image = new Image();
image2.source = bmp;
removeChild(image);
addChild(image2);
}
運行結果 502:750, 圖片的大小是可以讀到了,但是加入馬賽克效果的圖片沒有顯示,或顯示為空。
猜測可能是圖片的 內容數據 還沒載入。於是試著測試監聽別的事件看看,后來發現使用Event.RENDER,可以使圖片顯示,但是圖片大小值,仍然為 0:0,而且在加入馬賽克效果時,有異常,查看后發現異常是 圖片大小為 0:0 引起的。
private function init():void
{
var image:Image = new Image();
image.source = "image/water.jpg";
image.addEventListener(Event.RENDER, render);
addChild(image);
}
private function render(event:Event):void {
var image:Image = event.target as Image;
trace("render:" + image.width + ":" + image.height);
var bmpData:BitmapData = DisplayObjectFilter.mosaicFilter2( image, 0.2 );
var bmp:Bitmap = new Bitmap( bmpData );
var image2:Image = new Image();
image2.source = bmp;
removeChild(image);
addChild(image2);
}
運行結果:
render:0:0
ArgumentError: Error #2015: 无效的 BitmapData。
at flash.display::BitmapData()
at cn.riahome.filters::DisplayObjectFilter$/mosaicFilter2()[E:\pengranxiang\flex_workspace\Demo\src\cn\riahome\filters\DisplayObjectFilter.as:212]
at Demo/render()[E:\pengranxiang\flex_workspace\Demo\src\Demo.mxml:47]
停掉程序后,發現頁面上有加上馬賽克效果的圖片出現。不停掉程序的話,頁面一直會卡住,看不到圖片。
檢查后發現異常由於 圖片的大小 0:0 引起。所以修改如下:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
minWidth="350"
minHeight="136"
backgroundColor="#ffffff"
creationComplete="init();"
>
<mx:Script>
<![CDATA[
import cn.riahome.filters.DisplayObjectFilter;
import mx.controls.Image;
private function init():void
{
var image:Image = new Image();
image.source = "image/water.jpg";
image.addEventListener(Event.RESIZE, complete);
addChild(image);
}
private function complete(event:Event):void {
var image:Image = event.target as Image;
trace(image.width + ":" + image.height);
image.addEventListener(Event.RENDER, render);
}
private function render(event:Event):void {
var image:Image = event.target as Image;
trace("render:" + image.width + ":" + image.height);
var bmpData:BitmapData = DisplayObjectFilter.mosaicFilter2( image, 0.2 );
var bmp:Bitmap = new Bitmap( bmpData );
var image2:Image = new Image();
image2.source = bmp;
removeChild(image);
addChild(image2);
}
]]>
</mx:Script>
</mx:Application>
改為以上代碼后,程序運行正常,馬賽克效果圖片顯示正常。
順便發一下馬賽克處理用的圖片處理的包, 很好用, 有用法實例和源代碼。