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

最新推荐文章于 2019-02-08 11:25:21 发布

原创最新推荐文章于 2019-02-08 11:25:21 发布 · 572 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flash #import #function #url #string #class

本文介绍了如何通过位图操作实现像素艺术效果。利用getPixel方法获取位图数据，并通过像素重组绘制出特殊风格的图像。该技术可用于创建像素动画等。

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

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

灰太狼

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

通过外部加载回来的图片，获取到数据源，通过这个数据源我们可以借用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);

        }
    }
}