现在的位置: 首页 > 综合 > 正文

flash位图技术研究篇(2):渲染缓冲区

2012年04月18日 ⁄ 综合 ⁄ 共 4616字 ⁄ 字号 评论关闭

渲染缓冲区,今天很想探讨一些缓冲填充的技术。其实也不算什么技术,我们可以理解为画画。我们打开一张纸,然后在画面上填充我们想要的东西。首先让我了解一下,as3.0提供了BitmapData和Graphics类,这两种类为我们提供了一些操作位图的数据。

   
 
好,看看如何去实现我们的位图填充。
    新建一个类,名为Map类,地图类继承Sprite类,作为它的子类。

package
{
 import flash.display.Sprite;
 import flash.display.*;
 import flash.events.*;
 import flash.geom.*;
 public class Map extends Sprite
 {

 }

}


接下来,加入构造函数:
package
{
 import flash.display.Sprite;
 import flash.display.*;
 import flash.events.*;
 import flash.geom.*;
 public class Map extends Sprite
 {
 public function Map(mapdata:BitmapData,mapX:Number,mapY:Number)
        {
 }

}
}


我们简单分析一下,这个地图类,地图类包括的属性有地图数据,图的数据,有地图的坐标,宽度等等。
 
这个类中,我们引入一个创建图的方法。
public function CreateMap(bufferwidth:Number,bufferheight:Number):void
 
这个方法带三个参数,bufferwidth是指缓冲区的宽度,
bufferheight指缓冲区的高度
 
然后,我们所做的事情,包括,创建一个渲染的缓冲区,指定他的大小
如:
buffer=new BitmapData(bufferwidth,bufferheight,false,0xFFFFFFFF);//设置缓冲区
这样就可以指定了一个填充的缓冲区。
 
复制像素到缓冲区:

 

于缓冲区
上面的域并没有什么信息数据,为了能让这个缓冲区有内容,我们使用复制像素的做法,复制我们所需要的像素。他就像一个“回”上面的口字可以看作我们的视
框,而下面就是一张底图,每次我们移动图形的时候,复制的仅仅是我们所看到区域,填充的区域仅仅是我们规定的缓冲区大小。这样做法,有利于我们的内存使
用。


如:

   buffer.copyPixels(mapdata,new Rectangle(rect.x,rect.y,bufferwidth,bufferheight),new Point(0,0));//矩形的坐标变化,会裁剪出不同的位图数据

看一下完整的代码:

public function CreateMap(bufferwidth:Number,bufferheight:Number):void
        {  
            buffer=new BitmapData(bufferwidth,bufferheight,false,0xFFFFFFFF);//设置缓冲区
            buffer.fillRect(new Rectangle(0,0,bufferwidth,bufferheight),0x0000FF00);//填充缓冲区
            trace(rect.y);
           
            if (rect.x<0 )
            {
                rect.x=0;
            }
            trace(mapWidth);
            if (rect.x+buffer.width>mapWidth)
            {
                rect.x=mapWidth-buffer.width;
            }
            if (rect.y<=0)
            {
                rect.y=0;
            }
            if (rect.y+buffer.height>mapHeight)
            {
                rect.y=mapHeight-buffer.height;
            }
            buffer.copyPixels(mapdata,new Rectangle(rect.x,rect.y,bufferwidth,bufferheight),new Point(0,0));//矩形的坐标变化,会裁剪出不同的位图数据
            FillMap(buffer);//填充位图数据

        }


当中还有个判断区域,这个移动区域不能超出我们最大底图的宽度和高度。
 
 
填充位图

对于缓冲区并不能显示到我们的窗口里面,为了显示到我们的窗口,我们还要将其数据填充到窗口里面。我们所使用的是Graphics 类包提供给我们的一些简单的方法。如

        public function FillMap(data:BitmapData):void
        {  
            sprite.graphics.clear();
            sprite.graphics.beginBitmapFill(data,null,false,false);
            sprite.graphics.drawRect(0,0,data.width,data.height);
            sprite.graphics.endFill();
            addChild(sprite);
             
        }



完整代码:
package
{

    import flash.display.Sprite;
    import flash.display.*;
    import flash.events.*;
    import flash.geom.*;

    public class Map extends Sprite
    {
        private var mapWidth:Number;//地图的宽度
        private var mapHeight:Number;//地图高度
        private var mapX:Number;//地图的x坐标
        private var mapY:Number;//地图的y坐标

        private var mapArray:Array;
        private var mapdata:BitmapData;
        public var sprite:Sprite=new Sprite();//做一个容器使用
        public var rect:Rectangle;//地图的矩形外形
        public var bitmap:Bitmap;
        private var buffer:BitmapData;//缓冲区

        public function Map(mapdata:BitmapData,mapX:Number,mapY:Number)
        {
            this.mapdata=mapdata;
            //this.mapX=mapX;
            //this.mapY=mapY;
            this.mapWidth=mapdata.width;
            this.mapHeight=mapdata.height;
            bitmap=new Bitmap(mapdata);
            rect=bitmap.getRect(bitmap);//获取地图的矩形
        }
        public function get MapInfo():BitmapData
        {
            return mapdata;
        }
        public function CreateMap(bufferwidth:Number,bufferheight:Number):void
        {  
            buffer=new BitmapData(bufferwidth,bufferheight,false,0xFFFFFFFF);//设置缓冲区
            buffer.fillRect(new Rectangle(0,0,bufferwidth,bufferheight),0x0000FF00);//填充缓冲区
            trace(rect.y);
           
            if (rect.x<0 )
            {
                rect.x=0;
            }
            trace(mapWidth);
            if (rect.x+buffer.width>mapWidth)
            {
                rect.x=mapWidth-buffer.width;
            }
            if (rect.y<=0)
            {
                rect.y=0;
            }
            if (rect.y+buffer.height>mapHeight)
            {
                rect.y=mapHeight-buffer.height;
            }
            buffer.copyPixels(mapdata,new Rectangle(rect.x,rect.y,bufferwidth,bufferheight),new Point(0,0));//矩形的坐标变化,会裁剪出不同的位图数据
            FillMap(buffer);//填充位图数据

        }
        public function FillMap(data:BitmapData):void
        {  
            sprite.graphics.clear();
            sprite.graphics.beginBitmapFill(data,null,false,false);
            sprite.graphics.drawRect(0,0,data.width,data.height);
            sprite.graphics.endFill();
            addChild(sprite);
             
        }
    }
}



copyPixels
(sourceBitmapData:BitmapData
, sourceRect:Rectangle
, destPoint:Point
, alphaBitmapData:BitmapData
= null, alphaPoint:Point
= null, mergeAlpha:Boolean
= false):void
为没有拉伸、旋转或色彩效果的图像之间的像素处理提供一个快速例程。
   
clear
():


填充完后,加加入显示列表里面,我们就能看到我们所需要的位图。

 

抱歉!评论已关闭.