flash位图技术研究篇(1)：缓冲技术

最新推荐文章于 2018-06-27 14:30:05 发布

wkyb608

最新推荐文章于 2018-06-27 14:30:05 发布

阅读量1.2k

点赞数

文章标签： flash import function null class matrix

本文链接：https://blog.csdn.net/wkyb608/article/details/6003839

版权

本文探讨了Flash中的位图缓冲技术，通过双重缓冲区绘图实现平滑图像，避免闪烁。作者通过创建BitmapData和Bitmap类，进行颜色填充、位图复制到缓冲区以及控制图形移动的实验，展示了如何在缓冲区操作位图并显示到舞台，以实现动态效果。实验包括填充颜色、复制位图、飞机运行和控制飞机移动，逐步揭示了Flash位图缓冲技术的运用。

摘要由CSDN通过智能技术生成

今天终于对位图这个东西有点新一点认识，自从位图类引进后，感觉到位图是应用得比较多的一个类，当中其实还有一些奥秘值得去研究。

看看网上搜索的概念：

一双重缓冲区绘图技术概念

　　双重缓冲区技术能够使程序的绘图更加快速和平滑，有效减少绘制时的图像闪烁。该技术的基本原理是先将图像绘制到内存中的一块画布上，一旦所有的绘制操作都完成了，再将内存中的画布推到窗体的或者控件的表面将其显示出来。通过这种操作后的程序能使用户感觉其更加快速和美观。

很久之前，我曾经玩过c++关于贴图的一些应用。例如，我要在窗口外加载一张图片，首先我需要一些加载外部的文件，其次我要知道怎样才能将这张图贴到窗口去，做法是使用c++一些位图操作类进行操作如 BitBlt类这个类可以操作一些像素

BitBlt (hdc, x, y, cxSource, cySource, hdcMem, 0, 0, SRCCOPY) ;

这个做法是通过操作内存的位图数据来进行。

同样在操作内存位图，flash已经提供了两个有用的类，一个BitmapData，一个是Bitmap类。其中BitmapData类提供了很多关于操作位图的方法，这样为我们实现缓冲技术有了很大的帮助。

开始之前，我们做几个小实验，这样我们会发觉日后会有很多有趣的事情发生。

二、小实验

第一件事情，我们填充颜色，研究一下怎样填充颜色。

2.1 填充颜色

首先我们建立一个继承Sprite的子类：

看看这样的效果，是不是达到我们想要的效果？已经填充一个区域了。呵呵是不是很酷呢？如果还不觉得好玩，请继续看下去

lanse

接下来，我们继续修改一下代码：这次我们改用建立一个Sprite类来做一张画稿。

package
{
    import flash.display.*;
    import flash.display.Bitmap;
    import flash.display.BitmapData;
    import flash.events.*;
    public class Example2 extends Sprite
    {
        private var backBuffer:BitmapData=new BitmapData(550,400,false);//建立一个缓冲区
        private var clearColor:uint=0x0000FF;//指定填充的颜色

        public function Example2()
        {
            init();
        }
        private function init():void
        {
            backBuffer.fillRect(backBuffer.rect, clearColor);//填充
            var iamge:Sprite=new Sprite();//建立一个位图
            addChild(iamge);//显示位图
            iamge.graphics.clear();
            iamge.graphics.beginBitmapFill(backBuffer, null, false, false);//使用填充位图的方法填充缓冲区
            iamge.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);//画出矩形
            iamge.graphics.endFill();//结束填充
        }
    }
}

这一次，改变显示方法，采用Graphics类为我们提供的绘画Api函数。同时进行填充位图，同样可以得到上面图的效果。

2.2 复制位图到缓冲区域

现在我们进行第二个小实验;复制图片到缓冲区，然后再显示出来

private var backBuffer:BitmapData=new BitmapData(550,400,false);//建立一个缓冲区

backBuffer是我们建立一个位图缓冲区，用于存放位图数据信息。当我们希望在这个区域复制像素到这个缓冲区里面去，看看是怎样做呢？

package
{
    import flash.display.*;
    import flash.display.Bitmap;
    import flash.display.BitmapData;
    import flash.events.*;
    import flash.geom.*;

    public class Example2 extends Sprite
    {
        private var backBuffer:BitmapData=new BitmapData(550,400,false);//建立一个缓冲区
        private var clearColor:uint=0x0000FF;//指定填充的颜色
        private var myplane:plane=new plane(59,43);//我们在flash 库里面的资源,是bitmapdata的一个子类
        private var position:Point=new Point(250,200);// 指定像素位置
        public function Example2()
        {
            init();
        }
        private function init():void
        {
            backBuffer.fillRect(backBuffer.rect, clearColor);//填充
            backBuffer.copyPixels(myplane,myplane.rect, position, myplane.bitmapAlpha, new Point(0, 0), true);
            var iamge:Sprite=new Sprite();//建立一个位图
            addChild(iamge);//显示位图
            iamge.graphics.clear();
            iamge.graphics.beginBitmapFill(backBuffer, null, false, false);//使用填充位图的方法填充缓冲区
            iamge.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);//画出矩形
            iamge.graphics.endFill();//结束填充
        }
    }
}

feiji

图中的飞机已经被复制到缓冲区里面去了。

缓冲区里面复制这飞机的像素，并进行了显示copyPixels 。如果还不觉得酷的话，我们再引入一些让飞机进行运动，并每一帧进行绘制。

2.3飞机运行

首先：addEventListener(Event.ENTER_FRAME,Run);进行监听。

private function Run(e:Event):void

{

}

注意到我们private var position:Point=new Point(250,200);// 指定像素位置这个属性，我们每一帧改变他的贴图位置，这样我们需要每一帧进行重写绘制，场景的飞机就好像会一样。

package
{
    import flash.display.*;
    import flash.display.Bitmap;
    import flash.display.BitmapData;
    import flash.events.*;
    import flash.geom.*;

    public class Example2 extends Sprite
    {
        private var backBuffer:BitmapData=new BitmapData(550,400,false);//建立一个缓冲区
        private var clearColor:uint=0x0000FF;//指定填充的颜色
        private var myplane:plane=new plane(59,43);//我们在flash 库里面的资源,是bitmapdata的一个子类
        private var position:Point=new Point(250,200);// 指定像素位置
        public function Example2()
        {

            addEventListener(Event.ENTER_FRAME,Run);
        }
        private function init():void
        {
            backBuffer.fillRect(backBuffer.rect, clearColor);//填充
            backBuffer.copyPixels(myplane,myplane.rect, position, myplane.bitmapAlpha, new Point(0, 0), true);
            var iamge:Sprite=new Sprite();//建立一个位图
            addChild(iamge);//显示位图
            iamge.graphics.clear();
            iamge.graphics.beginBitmapFill(backBuffer, null, false, false);//使用填充位图的方法填充缓冲区
            iamge.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);//画出矩形
            iamge.graphics.endFill();//结束填充
        }

        private function Run(e:Event):void
        {
            init();
            position.x+=5;//修改贴图x轴位置
            position.y+=3;//修改贴图y轴位置

        }


    }
}

2.4控制飞机运行

曾经有一个广告讲一群小朋友的未来梦想，有一个人说到，希望将来可以开飞机。我们也像他们一样，让位图跟随我们控制移动

导入 import flash.ui.Keyboard;包

监听按键事件：

stage.addEventListener(KeyboardEvent.KEY_DOWN,keyDown);

private function keyDown(e:KeyboardEvent):void
{

}

但是通过这种方式来控制我们的飞机，并不让我们觉得开心，因为响应按键事件的时候，我们觉得一点也不流畅。这需要我们对程序进行改进，加以修改方式。而这里主要讲的是这个怎样建立缓冲位图区和绘制图形到窗口去。

代码如下：

package
{
    import flash.display.*;
    import flash.display.Bitmap;
    import flash.display.BitmapData;
    import flash.events.*;
    import flash.geom.*;
    import flash.ui.Keyboard;
    public class Example2 extends Sprite
    {
        private var backBuffer:BitmapData=new BitmapData(550,400,false);//建立一个缓冲区
        private var clearColor:uint=0x0000FF;//指定填充的颜色
        private var myplane:plane=new plane(59,43);//我们在flash 库里面的资源,是bitmapdata的一个子类
        private var position:Point=new Point(250,200);// 指定像素位置
        public function Example2()
        {

            addEventListener(Event.ENTER_FRAME,Run);
            stage.addEventListener(KeyboardEvent.KEY_DOWN,keyDown);
        }
        private function init():void
        {
            backBuffer.fillRect(backBuffer.rect, clearColor);//填充
            backBuffer.copyPixels(myplane,myplane.rect, position, myplane.bitmapAlpha, new Point(0, 0), true);
            var iamge:Sprite=new Sprite();//建立一个位图
            addChild(iamge);//显示位图
            iamge.graphics.clear();
            iamge.graphics.beginBitmapFill(backBuffer, null, false, false);//使用填充位图的方法填充缓冲区
            iamge.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);//画出矩形
            iamge.graphics.endFill();//结束填充
        }
        private function Run(e:Event):void
        {
            init();

        }
        private function keyDown(e:KeyboardEvent):void
        {
            if (e.keyCode==Keyboard.UP)
            {
                position.y-=5;
            }
            else if (e.keyCode==Keyboard.DOWN)
            {
                position.y+=5;
            }
            else if (e.keyCode==Keyboard.LEFT)
            {
                position.x-=5;
            }
            else if (e.keyCode==Keyboard.RIGHT)
            {
                position.x+=5;
            }
        }
    }
}

好，暂时写到这里，明天再修改

语法参考：

beginBitmapFill (bitmap:BitmapData , matrix:Matrix = null, repeat:Boolean = true, smooth:Boolean = false):void

用位图图像填充绘图区。

clear ():void

清除绘制到此 Graphics 对象的图形，并重置填充和线条样式设置。

drawRect (x:Number , y:Number , width:Number , height:Number ):void

绘制一个矩形。

copyPixels (sourceBitmapData:BitmapData , sourceRect:Rectangle , destPoint:Point , alphaBitmapData:BitmapData = null, alphaPoint:Point = null, mergeAlpha:Boolean = false):void

为没有拉伸、旋转或色彩效果的图像之间的像素处理提供一个快速例程。