flash位图技术研究篇(5)：像素画

今天光顾了外国的某一些博客对位图的应用，发现对位图的操作会变化出很多很多效果，其中一篇是像素画的实现，借助这种对位图的像素操作应用，重新组合成新的图片，然后拼合成一张新的图片。

思路很简单。借用这种手法应用对一些效果会很大帮助。如聚合与分散的像素动画。



左边是一张正常的，而右边是一张经过像素处理的灰太狼的图片。

通过外部加载回来的图片，获取到数据源，通过这个数据源我们可以借用bitmapdata 类的获取像素的值的操作，每一个像素包含RBG的值，通过getPixel（x,y）能够对位图进行像素获取。然后进行填充使用。最后产生出右边像素的画面的效果。主要涉及的方法应用是

两个循环获取像素的的值。

//进行像素获取，重组像素
for (var i:int=0; i<Width; i+=step)
{
for (var j:int=0; j<Height; j+=step)
{
var color:uint=bmpData.getPixel(i,j);
var rect:Rectangle=new Rectangle(i,j,step,step);
bmpData.fillRect(rect,color);//填充像素
}
}

下面是实现过程，最主要了解到getPixel这个方法使用即可。

package
{
import flash.display.Sprite;
import flash.display.Loader;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.events.*;
import flash.net.*;
import flash.geom.Rectangle;
public class Main extends Sprite
{
private var loader:Loader;
private var url:String="3.jpg";
private var step:int=5;
public function Main()
{
init();
}
//初始化
private function init():void
{
loader=new Loader();//外部加载一张图片
loader.load(new URLRequest(url));
loader.contentLoaderInfo.addEventListener(Event.COMPLETE,onComplete);
}
private function onComplete(event:Event):void
{

var Width:Number=loader.content.width;
var Height:Number=loader.content.height;
addChild(new Bitmap(Bitmap(loader.content).bitmapData));

var bmpData:BitmapData=new BitmapData(Width,Height,false,0xffffff);//新建一个空白的位图数据
bmpData.draw(loader);//获取影像

//进行像素获取，重组像素
for (var i:int=0; i<Width; i+=step)
{
for (var j:int=0; j<Height; j+=step)
{
var color:uint=bmpData.getPixel(i,j);
var rect:Rectangle=new Rectangle(i,j,step,step);
bmpData.fillRect(rect,color);//填充像素
}
}
//显示到列表菜单
var bitmap:Bitmap=new Bitmap(bmpData);
bitmap.x=Width;
addChild(bitmap);

}
}
}