ActionScript 3.0中中位图的处理

在ActionScript 3.0中,可以创建位图图像,还可以把外部的位图图像加载到Flash Player中。使用位图类,可以处理位图的像素和杂点。通过滤镜类,还可以增加位图的各种滤镜效果。

19.1  位图类

常用的有关位图的类有三个:Bitmap类、BitmapData类和BitmapDataChannel类。Bitmap类用来显示位图图像,BitmapData类用来处理位图,BitmapDataChannel类是个枚举值,表示使用的通道。

 19.1.1  Bitmap类

Bitmap类表示位图图像的显示对象。可以使用Bitmap类的构造函数创建图像,也可以使用Loader类加载外部图像。Bitmap类常用的属性如表19.1所示。

表19.1  Bitmap类常用的属性

   

   

bitmapData

被引用的 BitmapData 对象

pixelSnapping

控制 Bitmap 对象是否贴紧至最近的像素

smoothing

控制在缩放时是否对位图进行平滑处理

 19.1.2  BitmapData类

BitmapData类用来处理Bitmap对象的数据。BitmapData类可以在程序运行时,任意调整位图的大小、透明度、像素等。BitmapData类常用的属性如表19.2所示,常用的方法如表19.3所示。

表19.2  BitmapData类常用的属性

   

   

height

位图图像的高度

rect

定义位图图像大小和位置的矩形

transparent

定义位图图像是否支持每个像素具有不同的透明度

width

位图图像的宽度

表19.3  BitmapData对象常用的方法

   

   

applyFilter

取得一个源图像和一个滤镜对象,并生成过滤的图像

clone

返回一个新的 BitmapData 对象,它是对原始实例的克隆,包含与原始实例所含位图完全相同的副本

colorTransform

使用 ColorTransform 对象调整位图图像的指定区域中的颜色值

compare

比较两个 BitmapData 对象

copyChannel

将数据从另一个 BitmapData 对象或当前 BitmapData 对象的一个通道传输到当前 BitmapData 对象的某个通道中

copyPixels

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

dispose

释放用来存储 BitmapData 对象的内存

draw

使用 Flash Player 矢量渲染器在位图图像上绘制 source 显示对象

fillRect

使用指定的 ARGB 颜色填充一个矩形像素区域

floodFill

对图像执行倾倒填充操作,从( x, y )坐标开始,填充一种特定的颜色

generateFilterRect

已知 BitmapData 对象、源矩形和滤镜对象,确定 applyFilter() 方法调用所影响的目标矩形

getColorBoundsRect

确定矩形区域是将位图图像中指定颜色的所有像素完全包括起来(如果将 findColor 参数设置为 true ),还是将不包括指定颜色的所有像素完全包括起来(如果将 findColor 参数设置为 false

getPixel

返回一个整数,它表示 BitmapData 对象中在特定点( x, y   处的 RGB 像素值

getPixel32

返回一个 ARGB 颜色值,它包含 Alpha 通道数据和 RGB 数据

getPixels

从像素数据的矩形区域生成一个字节数组

hitTest

在一个位图图像与一个点、矩形或其他位图图像之间执行像素级的点击检测  

lock

锁定图像,以使引用 BitmapData 对象的任何对象(如 Bitmap 对象)在此 BitmapData 对象更改时不会更新

merge

对每个通道执行从源图像向目标图像的混合

noise

使用表示随机杂点的像素填充图像

paletteMap

重新映射一个具有最多四组调色板数据(每个通道一组)的图像中的颜色通道值

perlinNoise

生成 Perlin 杂点图像

pixelDissolve

执行源图像到目标图像的像素溶解,或使用同一图像执行像素溶解

scroll

按某一( x, y )像素量滚动图像

setPixel

设置 BitmapData 对象的单个像素

setPixel32

设置 BitmapData 对象单个像素的颜色和 Alpha 透明度值

setPixels

将字节数组转换为像素数据的矩形区域

threshold

根据指定的阈值测试图像中的像素值,并将通过测试的像素设置为新的颜色值

unlock

解除锁定图像,以使引用 BitmapData 对象的任何对象(如 Bitmap 对象)在此 BitmapData 对象更改时更新

 19.1.3  创建位图类

通常情况下,Bitmap类和BitmapData类是结合在一起使用的。Bitmap类的构造函数的语法格式如下所示:

Bitmap(bitmapData:BitmapData = null, pixelSnapping:String = "auto", smoothing:Boolean = false)

其各个参数的说明如下。

—  bitmapData:被引用的BitmapData对象。

—  pixelSnapping:默认值为auto,表示Bitmap对象是否贴紧至最近的像素。

—  smoothing:默认值为false,表示在缩放时是否对位图进行平滑处理。

BitmapData类的构造函数的语法格式如下所示:

BitmapData(width:int, height:int, transparent:Boolean = true, fillColor:uint = 0xFFFFFFFF)

其各个参数的说明如下。

—  width:位图图像的宽度,以像素为单位。

—  height:位图图像的高度,以像素为单位。

—  transparent:指定位图图像是否支持每个像素具有不同的透明度。

—  fillColor:用于填充位图图像区域的32位ARGB颜色值。

下面的示例使用两个位图类,创建一个矩形,代码如下所示:

package 

{

    import flash.display.Sprite;

    import flash.display.Bitmap;

    import flash.display.BitmapData;

 

    public class BitmapExample extends Sprite

    {

        /********************

         * 构造函数

         * */

        public function BitmapExample(

)

        {

            // 创建BitmapData类

            var bitmap:BitmapData = new BitmapData(400, 300, true, 0x500066FF);

 

            // 创建Bitmap类

            var image:Bitmap = new Bitmap(bitmap);

            // 设置显示位置

            image.x = 90;

            image.y = 50;

 

            // 增加到舞台

            addChild(image);

        }

    }

 

}

编译代码并运行,结果如图19.1所示。

图19.1  创建位图类

 19.1.4  加载外部图像

除了在内部创建位图之外,还可以加载外部的图像到位图中。加载外部的图像,需要用到Loader对象。通过Loader对象的load()方法,可以加载外部的URL。下面的示例使用Loader对象,加载外部图像到位图中,代码如下所示:

package 

{

    import flash.display.Sprite;

    import flash.display.Loader;

    import flash.events.Event;

    import flash.net.URLRequest;

    import flash.display.Bitmap;

    import flash.display.BitmapData;

 

    public class BitmapExample extends Sprite

    {

        private var loader:Loader = new Loader();

        /********************

         * 构造函数

         * */

        public function BitmapExample()

        {

            // 侦听数据加载

            loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);

            // 外部图像URL

            loader.load(new URLRequest("Bitmap.jpg"));

        }

        /********************

         * 加载外部图像到位图

         * */

        public function onComplete(event:Event):void

        {

            // 创建位图

            var image:Bitmap = Bitmap(loader.content);

            var bitmap:BitmapData = image.bitmapData;

            addChild(image);

 

            // 设置

            image.x = 20;

            image.y = 30;

        }

    }

 

}

编译代码并运行,结果如图19.2所示。

图19.2  加载外部图像

19.2  像素的处理

在BitmapData类中,包含了一组用于像素处理的方法。使用这些方法可以处理单个像素,还可以处理像素数组。

 19.2.1  处理单个像素

处理单个像素用到的方法包括:getPixel()、getPixel32()、setPixel()和setPixel32()。

1.getPixel()方法

getPixel()方法表示在指定的点获取位图的RGB像素。此方法有两个参数,分别是指定点的横坐标和纵坐标。其语法格式如下所示:

getPixel(x:int, y:int):uint

参数的详细说明如下。

—  x:指定点的横坐标。

—  y:指定点的纵坐标。

下面的示例使用getPixel()方法获取点(1,1)的RGB像素值,代码如下所示:

package 

{

    import flash.display.Sprite;

    import flash.display.Bitmap;

    import flash.display.BitmapData;

 

    public class BitmapExample extends Sprite

    {

        /********************

         * 构造函数

         * */

        public function BitmapExample()

        {

            // 创建BitmapData类

            var bitmap:BitmapData = new BitmapData(400, 300, false, 0xCC66FF);

 

            // 设置像素

            var i:uint = bitmap.getPixel(1, 1);

 

            // 输出获取的像素

            trace(i.toString(16));

        }

    }

 

}

编译代码并运行,输出的效果如图19.3所示。

图19.3  使用getPixel()方法处理单个像素

2.getPixel32()方法

getPixel32()方法与getPixel()方法类似,区别是getPixel32()方法返回一个ARGB的像素值。其中返回值包含了透明度的值。其语法格式如下所示:

getPixel32(x:int, y:int):uint

参数的详细说明如下。

—  x:指定点的横坐标。

—  y:指定点的纵坐标。

下面的示例使用getPixel32()方法,返回指定点的像素值,代码如下所示:

package 

{

    import flash.display.Sprite;

    import flash.display.Bitmap;

    import flash.display.BitmapData;

 

    public class BitmapExample extends Sprite

    {

        /********************

         * 构造函数

         * */

        public function BitmapExample()

        {

            // 创建BitmapData类

            var bitmap:BitmapData = new BitmapData(400, 300, true, 0x50CC66FF);

 

            // 设置像素

            var i:uint = bitmap.getPixel32(1, 1);

 

            // 输出获取的像素

            trace(i.toString(16));

        }

    }

 

}

编译代码并运行,输出的结果如图19.4所示。

图19.4  使用getPixel32()方法处理单个像素

3.setPixel()方法

setPixel()方法用来设置BitmapData对象的单个像素。此方法有三个参数,前两个参数表示要设置单个像素的点,第三个参数color表示生成的像素RGB颜色。其语法格式如下所示:

setPixel(x:int, y:int, color:uint):void

参数的详细说明如下所示:

—  x:像素值会更改的像素的x位置。

—  y:像素值会更改的像素的y位置。

—  color:生成的像素的RGB颜色。

下面的示例使用setPixel()方法,循环设置某些点的像素的RGB颜色,代码如下所示:

package 

{

    import flash.display.Sprite;

    import flash.display.Bitmap;

    import flash.display.BitmapData;

 

    public class BitmapExample extends Sprite

    {

        /********************

         * 构造函数

         * */

        public function BitmapExample()

        {

            // 创建BitmapData类

            var bitmap:BitmapData = new BitmapData(400, 300, false, 0x000066FF);

 

            // 设置像素

            for(var i:uint = 0; i < 300; i++)

            {

                bitmap.setPixel(20, i, 0xFFFFFF);

                bitmap.setPixel(80, i, 0x000000);

                bitmap.setPixel(160, i, 0x00CC00);

            }

 

            // 创建Bitmap类

            var image:Bitmap = new Bitmap(bitmap);

            // 设置显示位置

            image.x = 90;

            image.y = 50;

 

            // 增加到舞台

            addChild(image);

        }

    }

 

}

编译代码并运行,结果如图19.5所示。

图19.5  setPixel()方法处理单个像素

4.setPixel32()方法

setPixel32()方法与setPixel()方法类似,不同的是,setPixel32()方法是设置ARGB(其中A表示透明度)的像素值。此方法的前两个参数与setPixel()方法相同,最后一个参数表示生成的像素的ARGB颜色。其语法格式如下所示:

setPixel32(x:int, y:int, color:uint):void

参数的详细说明如下所示:

—  x:像素值会更改的像素的x位置。

—  y:像素值会更改的像素的y位置。

—  color:生成的像素的ARGB颜色。

下面的示例使用setPixel32()方法,循环设置某些点的像素值,代码如下所示:

package 

{

    import flash.display.Sprite;

    import flash.display.Bitmap;

    import flash.display.BitmapData;

 

    public class BitmapExample extends Sprite

    {

        /********************

         * 构造函数

         * */

        public function BitmapExample()

        {

            // 创建BitmapData类

            var bitmap:BitmapData = new BitmapData(400, 300, true, 0x700066FF);

 

            // 设置像素

            for(var i:uint = 0; i < 300; i++)

            {

                bitmap.setPixel32(20, i, 0x20FF0000);

                bitmap.setPixel32(21, i, 0x40FF0000);

                bitmap.setPixel32(22, i, 0x60FF0000);

                bitmap.setPixel32(23, i, 0x80FF0000);

                bitmap.setPixel32(24, i, 0x00FF0000);

            }

 

            // 创建Bitmap类

            var image:Bitmap = new Bitmap(bitmap);

            // 设置显示位置

            image.x = 90;

            image.y = 50;

 

            // 增加到舞台

            addChild(image);

        }

    }

 

}

编译代码并运行,结果如图19.6所示。

图19.6  使用setPixel32()方法处理单个像素

 19.2.2  处理多个像素

ActionScript 3.0除了能处理单个像素外,还能处理多个像素。处理多个像素,一般是与字节数组有关的,把字节数组与像素的矩形区域相互转换。与处理多个元素有关的方法有两个:getPixels()和setPixels()。

1.getPixels()方法

getPixels()方法将像素的矩形区域转换为一个字节数组并返回。getPixels()方法有一个参数,表示当前BitmapData对象中的一个矩形区域。其语法格式如下所示:

getPixels(rect:Rectangle):ByteArray

下面的示例使用getPixels()方法获取矩形区域的像素值,代码如下所示:

package 

{

    import flash.display.Sprite;

    import flash.display.Bitmap;

    import flash.display.BitmapData;

    import flash.geom.Rectangle;

    import flash.utils.ByteArray;

 

    public class BitmapExample extends Sprite

    {

        /********************

         * 构造函数

         * */

        public function BitmapExample()

        {

            // 创建BitmapData类

            var bitmap:BitmapData = new BitmapData(400, 300, true, 0x700066FF);

 

            var bounds:Rectangle = new Rectangle(0, 0,bitmap.width, bitmap.height);

            var pixels:ByteArray = bitmap.getPixels(bounds);

            trace("像素数组的长度" + pixels.length);

            trace("以下是取几个元素的值:");

            trace(pixels[0]);

            trace(pixels[4]);

            trace(pixels[6]);

            trace(pixels[10]);

        }

    }

 

}

编译代码并运行,输出的结果如图19.7所示。

图19.7  使用getPixels()方法处理多个像素

2.setPixels()方法

setPixels()方法将字节数组转换为像素的矩形区域。其语法格式如下所示:

 setPixels(rect:Rectangle, inputByteArray:ByteArray):void

参数说明如下。

—  rect:指定BitmapData对象的矩形区域。

—  inputByteArray:一个字节数组对象,由要在矩形区域中使用的32位未经过相乘的像素值组成。

package 

{

    import flash.display.Sprite;

    import flash.display.Bitmap;

    import flash.display.BitmapData;

    import flash.geom.Rectangle;

    import flash.utils.ByteArray;

 

    public class BitmapExample extends Sprite

    {

        /********************

         * 构造函数

         * */

        public function BitmapExample()

        {

            // 创建BitmapData对象

            var bmd1:BitmapData = new BitmapData(200, 200, true, 0xFFCCCCCC);

            var bmd2:BitmapData = new BitmapData(200, 200, true, 0xFFFF0000);

            // 创建获取像素的矩形区域

            var rect:Rectangle = new Rectangle(20, 20, 150, 150);

            var bytes:ByteArray = bmd1.getPixels(rect);

            // 设置像素

            bytes.position = 0;

            bmd2.setPixels(rect, bytes);

            // 创建Bitmap对象

            var bm1:Bitmap = new Bitmap(bmd1);

            addChild(bm1);

            var bm2:Bitmap = new Bitmap(bmd2);

            addChild(bm2);

 

            // 设置位置

            bm1.x = 50;

            bm1.y = 100;

            bm2.x = 260;

            bm2.y = 100;

        }

    }

 

}

编译代码并运行,结果如图19.8所示。

图19.8  使用setPixels()方法处理多个像素

19.3  位图的复制

位图复制就是从一个图像赋值数据到另一个图像。在BitmapData类中,提供了位图之间复制的方法。复制位图有4种方法:clone()、copyPixels()、copyChannel()和draw()。

 19.3.1  clone()方法

clone()方法是对原始实例的克隆,包含与原始实例所含位图完全相同的副本。其语法格式如下所示:

clone():BitmapData

下面的示例使用clone()方法,复制位图,代码如下所示:

package 

{

    import flash.display.Sprite;

    import flash.display.Bitmap;

    import flash.display.BitmapData;

    import flash.geom.Rectangle;

    import flash.utils.ByteArray;

 

    public class BitmapExample extends Sprite

    {

        /********************

         * 构造函数

         * */

        public function BitmapExample()

        {

            // 创建BitmapData对象

            var bmd1:BitmapData = new BitmapData(200, 200, true, 0xFFCCCCCC);

            // 复制bmd1

            var bmd2:BitmapData = bmd1.clone();

            // 创建Bitmap对象

            var bm1:Bitmap = new Bitmap(bmd1);

            addChild(bm1);

            var bm2:Bitmap = new Bitmap(bmd2);

            addChild(bm2);

 

            // 设置位置

            bm1.x = 50;

            bm1.y = 100;

            bm2.x = 260;

            bm2.y = 100;

        }

    }

 

}

编译代码并运行,结果如图19.9所示。

图19.9  使用clone()方法复制位图

 19.3.2  copyPixels()方法

copyPixels()方法是在目标BitmapData对象的目标点将源图像的矩形区域复制为同样大小的矩形区域。其语法格式如下所示:

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

其中参数有6个,详细说明如下。

—  sourceBitmapData:源位图。

—  sourceRect:要剪切的位图的矩形区域。

—  destPoint:表示将在其中放置新像素的矩形区域的左上角。

—  alphaBitmapData:第二个Alpha BitmapData对象源。

—  alphaPoint:Alpha BitmapData对象源中与sourceRect参数的左上角对应的点。

—  mergeAlpha:与设置Alpha通道相关。

下面的示例使用copyPixels()方法复制位图,代码如下所示:

package 

{

    import flash.display.Sprite;

    import flash.display.Bitmap;

    import flash.display.BitmapData;

    import flash.geom.Rectangle;

    import flash.geom.Point;

 

    public class BitmapExample extends Sprite

    {

        /********************

         * 构造函数

         * */

        public function BitmapExample()

        {

            // 创建BitmapData对象

            var bmd1:BitmapData = new BitmapData(200, 200, true, 0xFFCCCCCC);

            var bmd2:BitmapData = new BitmapData(200, 200, false, 0x00009900);

 

            // 复制bmd1像素

            var rect:Rectangle = new Rectangle(0, 0, 120, 120);

            var pt:Point = new Point(10, 10);

            bmd2.copyPixels(bmd1, rect, pt);

            // 创建Bitmap对象

            var bm1:Bitmap = new Bitmap(bmd1);

            addChild(bm1);

            var bm2:Bitmap = new Bitmap(bmd2);

            addChild(bm2);

 

            // 设置位置

            bm1.x = 50;

            bm1.y = 100;

            bm2.x = 260;

            bm2.y = 100;

        }

    }

 

}

编译代码并运行,结果如图19.10所示。

图19.10  使用copyPixels()方法复制位图

 19.3.3  copyChannel()方法

copyChannel()方法表示将数据从另一个BitmapData对象的一个通道传输到当前 BitmapData对象的某个通道中。其语法格式如下所示:

copyChannel(sourceBitmapData:BitmapData, sourceRect:Rectangle, destPoint:Point, sourceChannel:uint, destChannel:uint):void

其参数有5个,详细的说明如下。

—  sourceBitmapData:源位图。

—  sourceRect:要复制的源位图中的矩形区域。

—  destPoint:表示将要在其中放置新通道数据的矩形区域的左上角。

—  sourceChannel:源通道。

—  destChannel:目标通道。

下面的示例使用copyChannel()方法复制位图,代码如下所示:

package 

{

    import flash.display.Sprite;

    import flash.display.Bitmap;

    import flash.display.BitmapData;

    import flash.display.BitmapDataChannel;

    import flash.geom.Rectangle;

    import flash.geom.Point;

 

    public class BitmapExample extends Sprite

    {

        /********************

         * 构造函数

         * */

        public function BitmapExample()

        {

            // 创建BitmapData对象

            var bmd1:BitmapData = new BitmapData(200, 200, true, 0xFFCCCCCC);

            var bmd2:BitmapData = new BitmapData(200, 200, false, 0x00009900);

 

            // 复制bmd1像素

            var rect:Rectangle = new Rectangle(0, 0, 120, 120);

            var pt:Point = new Point(10, 10);

            bmd2.copyChannel(bmd1, rect, pt,

                    BitmapDataChannel.BLUE, BitmapDataChannel.RED);

            // 创建Bitmap对象

            var bm1:Bitmap = new Bitmap(bmd1);

            addChild(bm1);

            var bm2:Bitmap = new Bitmap(bmd2);

            addChild(bm2);

 

            // 设置位置

            bm1.x = 50;

            bm1.y = 100;

            bm2.x = 260;

            bm2.y = 100;

        }

    }

 

}

编译代码并运行,结果如图19.11所示。

图19.11  使用copyChannel()方法复制位图

 19.3.4  draw()方法

draw()方法使用Flash Player矢量渲染器绘制显示对象。在绘制的时候可以使用Matrix对象,把位图进行缩放、旋转等转换。其语法格式如下所示:

draw(source:IBitmapDrawable, matrix:Matrix = null, colorTransform:ColorTransform = null, blendMode:String = null, clipRect:Rectangle = null, smoothing:Boolean = false):void

其参数有6个,详细的说明如下。

—  source:源位图。

—  matrix:Matrix对象,用于位图的转换。

—  colorTransform:ColorTransform对象,用于调整位图的颜色值。

—  blendMode:指定要应用于所生成位图的混合模式。

—  clipRect:定义要绘制的源对象的区域。

—  smoothing:定义是否平滑处理显示对象。

下面的示例使用draw()方法复制源位图,代码如下所示:

package 

{

    import flash.display.Sprite;

    import flash.display.Bitmap;

    import flash.display.BitmapData;

    import flash.display.BitmapDataChannel;

    import flash.geom.Matrix;

    import flash.geom.Rectangle;

    import flash.geom.Point;

 

    public class BitmapExample extends Sprite

    {

        /********************

         * 构造函数

         * */

        public function BitmapExample()

        {

            // 创建BitmapData对象

            var bmd1:BitmapData = new BitmapData(200, 200, true, 0xFFCCCCCC);

            var bmd2:BitmapData = new BitmapData(200, 200, false, 0x00009900);

 

            // 复制bmd1像素

            var rect:Rectangle = new Rectangle(0, 0, 120, 120);

            var pt:Point = new Point(10, 10);

            bmd2.draw(bmd1, new Matrix(1,2,1,0,1,2), null, null, rect, true);

            // 创建Bitmap对象

            var bm1:Bitmap = new Bitmap(bmd1);

            addChild(bm1);

            var bm2:Bitmap = new Bitmap(bmd2);

            addChild(bm2);

 

            // 设置位置

            bm1.x = 50;

            bm1.y = 100;

            bm2.x = 260;

            bm2.y = 100;

        }

    }

 

}

编译代码并运行,结果如图19.12所示。

图19.12  使用draw()方法复制位图

19.4  使用杂点

杂点效果可以看做是未调谐的电视屏幕的静态外观,就是所谓的“雪花”效果。杂点效果一般应用于背景图。直接用代码生成的效果的性能,比从外部引用图像要好。使用杂点有两种方法noise()和perlinNoise()。

 19.4.1  noise()方法

noise()方法作用是使用随机杂点的像素来填充图像。其语法格式如下所示:

noise(randomSeed:int, low:uint = 0, high:uint = 255, channelOptions:uint = 7, grayScale:Boolean = false):void

其参数有5个,详细的说明如下。

—  randomSeed:表示使用的随机种子数。

—  low:要为每个通道生成的最低值(0到255)。

—  high:要为每个通道生成的最高值(0到255)。

—  channelOptions:BitmapDataChannel对象的静态属性值,表示颜色通道。

—  grayScale:是否设置为灰度图像。

下面的示例使用noise()方法生成杂点图像,代码如下所示:

package 

{

    import flash.display.Sprite;

    import flash.display.Bitmap;

    import flash.display.BitmapData;

    import flash.display.BitmapDataChannel;

 

    public class BitmapExample extends Sprite

    {

        /********************

         * 构造函数

         * */

        public function BitmapExample()

        {

            // 创建BitmapData对象

            var bmd1:BitmapData = new BitmapData(200, 200, true, 0xFFCCCCCC);

            var bmd2:BitmapData = new BitmapData(200, 200, false, 0x00009900);

 

            // 处理杂点

            var seed:int = int(Math.random() * int.MAX_VALUE);

            bmd1.noise(seed, 0, 0xFF, BitmapDataChannel.RED, false);

            bmd2.noise(seed, 0, 0xFF, BitmapDataChannel.GREEN, true);

            // 创建Bitmap对象

            var bm1:Bitmap = new Bitmap(bmd1);

            addChild(bm1);

            var bm2:Bitmap = new Bitmap(bmd2);

            addChild(bm2);

 

            // 设置位置

            bm1.x = 50;

            bm1.y = 100;

            bm2.x = 260;

            bm2.y = 100;

        }

    }

 

}

编译代码并运行,结果如图19.13所示。

图19.13  使用noise()方法绘制杂点

 19.4.2  perlinNoise ()方法

perlinNoise()方法作用是生成Perlin杂点图像。 Perlin杂点是将多组杂点数据与不同级别的细节组合在一起,通常被称为“杂点的碎片总和”。Perlin杂点通常用于模拟自然风光,比如木材纹理、云彩或山脉等。其语法格式如下所示:

perlinNoise(baseX:Number, baseY:Number, numOctaves:uint, randomSeed:int, stitch:Boolean, fractalNoise:Boolean, channelOptions:uint = 7, grayScale:Boolean = false, offsets:Array = null):void

参数的详细说明如下。

—  baseX:X方向上使用的频率。

—  baseY:Y方向上使用的频率。

—  numOctaves:要组合以创建此杂点的octave函数或各个杂点函数的数目。

—  randomSeed:使用的随机种子数。

—  stitch:平滑图像的转变边缘以创建无缝的纹理。

—  fractalNoise:生成碎片杂点或者湍流。

—  channelOptions:BitmapDataChannel对象的值。

—  grayScale:灰度图像。

—  offsets:偏移量。

下面的示例使用perlinNoise()方法生成Perlin杂点图像,代码如下所示:

package 

{

    import flash.display.Sprite;

    import flash.display.Bitmap;

    import flash.display.BitmapData;

    import flash.display.BitmapDataChannel;

 

    public class BitmapExample extends Sprite

    {

        /********************

         * 构造函数

         * */

        public function BitmapExample()

        {

            // 创建BitmapData对象

            var bmd1:BitmapData = new BitmapData(200, 200, true, 0xFFCCCCCC);

            var bmd2:BitmapData = new BitmapData(200, 200, false, 0x00009900);

 

            // 处理杂点

            var seed:Number = Math.floor(Math.random() * 10);

            var channels:uint = BitmapDataChannel.RED | BitmapDataChannel.BLUE;

            bmd1.perlinNoise(100, 80, 6, seed, false, true, channels, false, null);

            channels = BitmapDataChannel.GREEN | BitmapDataChannel.ALPHA;

            bmd2.perlinNoise(50, 90, 7, seed, false, true, channels, false, null);

            // 创建Bitmap对象

            var bm1:Bitmap = new Bitmap(bmd1);

            addChild(bm1);

            var bm2:Bitmap = new Bitmap(bmd2);

            addChild(bm2);

 

            // 设置位置

            bm1.x = 50;

            bm1.y = 100;

            bm2.x = 260;

            bm2.y = 100;

        }

    }

 

}

编译代码并运行,结果如图19.14所示。

图19.14  使用perlinNoise ()方法绘制杂点

19.5  滚动位图

位图 的移动在实际应用中较为广泛,比如电子地图。在BitmapData类中,也提供了相应的方法,来使位图移动。scroll()方法是表示将图像按照一个 定量的像素进行滚动,而滚动区域之外的边缘区域保持不变。scroll()方法有两个参数分别表示定量像素的横坐标和纵坐标。其语法格式如下所示:

scroll(x:int, y:int):void

下面的示例使用scroll()方法滚动位图,代码如下所示:

package 

{

    import flash.display.Sprite;

    import flash.display.Loader;

    import flash.events.Event;

    import flash.net.URLRequest;

    import flash.display.Bitmap;

    import flash.display.BitmapData;

 

    public class BitmapExample extends Sprite

    {

        private var loader:Loader = new Loader();

        private var bitmap:BitmapData;

        /********************

         * 构造函数

         * */

        public function BitmapExample()

        {

            // 侦听数据加载

            loader.contentLoaderInfo.addEventListener(Event.COMPLETE,

                onComplete);

            // 外部图像URL

            loader.load(new URLRequest("scroll.jpg"));

        }

        /********************

         * 加载外部图像到位图

         * */

        public function onComplete(event:Event):void

        {

            // 创建位图

            var image:Bitmap = Bitmap(loader.content);

            bitmap = image.bitmapData;

            addChild(image);

 

            // 加载完成,开始滚动位图

            addEventListener(Event.ENTER_FRAME, scrollBitmap);

        }

 

        /********************

         * 滚动位图

         * */

        function scrollBitmap(event:Event):void

        {

            bitmap.scroll(-1, -1);

        }

    }

 

}

编译代码并运行,结果如图19.15所示。

图19.15  滚动位图

19.6  位图之间的切换

在实 际中经常遇到图像之间的切换,比如相册浏览,动态图片广告等。图像之间有很多种切换方式,其中在BitmapData类中就提供了一种位图切换的方法。 pixelDissolve()方法是像素溶解的位图切换效果。其中使用randomSeed值可以生成随机像素溶解。其语法格式如下所示:

pixelDissolve(sourceBitmapData:BitmapData, sourceRect:Rectangle, destPoint: Point, randomSeed:int = 0, numPixels:int = 0, fillColor:uint = 0):int

其参数有6个,详细的说明如下。

—  sourceBitmapData:切换的BitmapData对象。

—  sourceRect:位图的矩形区域。

—  destPoint:目标图像中与源矩形的左上角对应的点。

—  randomSeed:用于开始像素溶解的随机种子。

—  numPixels:像素值。

—  fillColor:填充其源值等于目标值的像素。

下面的示例使用pixelDissolve()方法,实现位图之间的切换,代码如下所示:

package 

{

    import flash.display.BitmapData;

    import flash.display.Bitmap;

    import flash.geom.Point;

    import flash.geom.Rectangle;

    import flash.utils.Timer;

    import flash.events.TimerEvent;

    import flash.display.Sprite;

 

    public class BitmapExample extends Sprite

    {

        private var bmd:BitmapData;

        private var tim:Timer;

 

        /********************

         * 构造函数

         * */

        public function BitmapExample()

        {

            // 创建BitmapData对象

            bmd = new BitmapData(300, 180, false, 0x00CCCCCC);

            var bitmap:Bitmap = new Bitmap(bmd);

            addChild(bitmap);

 

            // 设置

            bitmap.x = 80;

            bitmap.y = 100;

            // 创建定时器

            tim = new Timer(20);

            tim.start();

            tim.addEventListener(TimerEvent.TIMER, timerHandler);

        }

 

        /********************

         * 定时器

         * */

        function timerHandler(event:TimerEvent):void

        {

            var randomNum:Number = Math.floor(Math.random() * int.MAX_VALUE);

            // 切换

            dissolve(randomNum);

        }

        /********************

         * 切换

         * */

        function dissolve(randomNum:Number):void

        {

            // 切换

            var rect:Rectangle = bmd.rect;

            var pt:Point = new Point(0, 0);

            var numberOfPixels:uint = 300;

            var red:uint = 0x00FF0000;

            bmd.pixelDissolve(bmd, rect, pt, randomNum, numberOfPixels, red);

            // 切换的区域

            var grayRegion:Rectangle = bmd.getColorBoundsRect(0xFFFFFFFF, 0x00CCCCCC, true);

            if(grayRegion.width == 0 && grayRegion.height == 0 )

            {

                tim.stop();

            }

        }

    }

 

}

编译代码并运行,结果如图19.16所示。

图19.16  位图之间的切换

19.7  位图应用滤镜

在位图中增加滤镜的效果,似乎是一些图像处理软件(如Adobe Photoshop、Adobe Fireworks)应该做的事情。但是在ActionScript 3.0中,单独包含了滤镜类,开发人员可以通过这些类,实现和那些图像处理软件同样的滤镜效果。

 19.7.1  滤镜类

滤镜类位于flash.filters包中。这些滤镜类可以显示很多视觉效果,比如模糊、浮雕、发光和投影等。滤镜类如表19.4所示。

表19.4  后缀运算符

   

BlurFilter

模糊视觉效果

ConvolutionFilter

矩阵盘绕滤镜效果

DisplacementMapFilter

对象置换

DropShadowFilter

投影效果

GlowFilter

发光效果

GradientBevelFilter

渐变斜角效果

GradientGlowFilter

渐变发光效果

 19.7.2  投影

使用DropShadowFilter类可使对象显示投影效果。其属性如表19.5所示。

表19.5  DropShadowFilter类的属性

   

   

alpha

阴影颜色的 Alpha 透明度值

angle

阴影的角度

blurX

水平模糊量

blurY

垂直模糊量

color

阴影的颜色

distance

阴影的偏移距离,以像素为单位

hideObject

表示是否隐藏对象

inner

表示阴影是否为内侧阴影

knockout

应用挖空效果   true ),这将有效地使对象的填色变为透明,并显示文档的背景颜色

quality

应用滤镜的次数

strength

印记或跨页的强度

DropShadowFilter类的构造函数的表达式如下所示:

public function DropShadowFilter(distance:Number = 4.0, angle:Number = 45, color:uint = 0, alpha:Number = 1.0, blurX:Number = 4.0, blurY:Number = 4.0, strength:Number = 1.0, quality:int = 1, inner:Boolean = false, knockout:Boolean = false, hideObject:Boolean = false)

下面的示例说明如何使用DropShadowFilter类对位图应用投影效果,代码如下所示:

package 

{

    import flash.display.Bitmap;

    import flash.display.BitmapData;

    import flash.display.Sprite;

    import flash.filters.DropShadowFilter;

    public class FilterExample extends Sprite

    {

        /********************

         * 构造函数

         * */

        public function FilterExample()

        {

            // 创建 bitmapData 对象并将它呈现在屏幕上

            var bitmapData:BitmapData = new BitmapData (200,200,false, 0xFF009900);

            var displayObject:Bitmap = new Bitmap(bitmapData);

            addChild(displayObject);

 

            // 设置位置

            displayObject.x = 130;

            displayObject.y = 80;

 

            // 创建 DropShadowFilter 实例。

            var dropShadow:DropShadowFilter = new DropShadowFilter();

            // 创建滤镜数组,通过将滤镜作为参数传递给 Array() 构造函数,

            // 将该滤镜添加到数组中。

            var filtersArray:Array = new Array(dropShadow);

            // 将滤镜数组分配给显示对象以便应用滤镜。

            displayObject.filters = filtersArray;

        }

 

    }

 

}

编译代码并运行,结果如图19.17所示。

图19.17  投影效果

 19.7.3  发光

使用GlowFilter类可实现显示对象的发光效果。其属性如表19.6所示。

表19.6  GlowFilter类的属性

   

   

alpha

颜色的 Alpha 透明度值

blurX

水平模糊量

blurY

垂直模糊量

color

光晕颜色

inner

指定发光是否为内侧发光

knockout

应用挖空效果   true

quality

应用滤镜的次数

strength

印记或跨页的强度

GlowFilter类的构造函数的表达式如下所示:

public function GlowFilter(color:uint = 0xFF0000, alpha:Number = 1.0, blurX:Number = 6.0, blurY:Number = 6.0, strength:Number = 2, quality:int = 1, inner:Boolean = false, knockout:Boolean = false)

下面的示例说明如何使用GlowFilter类对位图应用发光效果,代码如下所示:

package 

{

    import flash.display.Bitmap;

    import flash.display.BitmapData;

    import flash.display.Sprite;

    import flash.filters.GlowFilter;

    public class FilterExample extends Sprite

    {

        /********************

         * 构造函数

         * */

        public function FilterExample()

        {

            // 创建 bitmapData 对象并将它呈现在屏幕上

            var bitmapData:BitmapData = new BitmapData (200,200,false, 0xFF009900);

            var displayObject:Bitmap = new Bitmap(bitmapData);

            addChild(displayObject);

 

            // 设置位置

            displayObject.x = 130;

            displayObject.y = 80;

 

            // 创建滤镜实例。

            var glowFilter:GlowFilter = new GlowFilter(0x0000FF);

            // 创建滤镜数组,通过将滤镜作为参数传递给 Array() 构造函数,

            // 将该滤镜添加到数组中。

            var filtersArray:Array = new Array(glowFilter);

            // 将滤镜数组分配给显示对象以便应用滤镜。

            displayObject.filters = filtersArray;

        }

 

    }

 

}

编译代码并运行,结果如图19.18所示。

图19.18  发光效果

 19.7.4  浮雕

使用GradientBevelFilter类可以实现显示对象的浮雕效果。其属性如表19.7所示。

表19.7  GradientBevelFilter类的属性

  

   

alpha

colors 数组中对应颜色的 Alpha 透明度值的数组

angle

角度

blurX

水平模糊量

blurY

垂直模糊量

colors

渐变中使用的 RGB 十六进制颜色值数组

distance

偏移距离

knockout

应用挖空效果( true

quality

应用滤镜的次数

ratios

对应于 colors 数组中颜色的一组颜色分布比率

strength

印记或跨页的强度

type

斜角效果的放置

GradientBevelFilter类的构造函数的表达式如下所示:

public function GradientBevelFilter(distance:Number = 4.0, angle:Number = 45, colors:Array = null, alphas:Array = null, ratios:Array = null, blurX:Number = 4.0, blurY:Number = 4.0, strength:Number = 1, quality:int = 1, type:String = "inner", knockout:Boolean = false)

下面的示例说明如何使用GradientBevelFilter类对位图应用浮雕效果,代码如下所示:

package 

{

    import flash.display.Bitmap;

    import flash.display.BitmapData;

    import flash.filters.BitmapFilterQuality;

    import flash.filters.BitmapFilterType;

    import flash.display.Sprite;

    import flash.filters.GradientBevelFilter;

    public class FilterExample extends Sprite

    {

        /********************

         * 构造函数

         * */

        public function FilterExample()

        {

            // 创建 bitmapData 对象并将它呈现在屏幕上

            var bitmapData:BitmapData = new BitmapData(200,200,false, 0xFF009900);

            var displayObject:Bitmap = new Bitmap(bitmapData);

            addChild(displayObject);

 

            // 设置位置

            displayObject.x = 130;

            displayObject.y = 80;

 

            // 创建滤镜实例。

            var bgColor:uint     = 0xCCCCCC;

            var size:uint        = 80;

            var offset:uint      = 50;

            var distance:Number  = 5;

            var angleInDegrees:Number = 225; // opposite 45 degrees

            var colors:Array     = [0xFFFFFF, 0xCCCCCC, 0x000000];

            var alphas:Array     = [1, 0, 1];

            var ratios:Array     = [0, 128, 255];

            var blurX:Number     = 8;

            var blurY:Number     = 8;

            var strength:Number  = 2;

            var quality:Number   = BitmapFilterQuality.HIGH

            var type:String      = BitmapFilterType.INNER;

            var knockout:Boolean = true;

            vargradientBevelFilter:GradientBevelFilter=newGradientBevelFilter(

                                                                distance,

                                                            angleInDegrees,

                                                                colors,

                                                                alphas,

                                                                ratios,

                                                                blurX,

                                                                blurY,

                                                                strength,

                                                                quality,

                                                                type,

                                                                knockout);

            // 创建滤镜数组,通过将滤镜作为参数传递给 Array() 构造函数,

            // 将该滤镜添加到数组中。

            var filtersArray:Array = new Array(gradientBevelFilter);

            // 将滤镜数组分配给显示对象以便应用滤镜。

            displayObject.filters = filtersArray;

        }

 

    }

 

}

编译代码并运行,结果如图19.19所示。

图19.19  浮雕效果

 19.7.5  渐变发光

使用GradientGlowFilter类可实现显示对象的渐变发光效果。其属性如表19.8所示。

表19.8  GradientGlowFilter类的属性

   

   

alpha

colors 数组中对应颜色的 Alpha 透明度值的数组

angle

角度

blurX

水平模糊量

blurY

垂直模糊量

colors

渐变中使用的 RGB 十六进制颜色值数组

distance

偏移距离

knockout

应用挖空效果( true

quality

应用滤镜的次数

续表 

   

   

ratios

对应于 colors 数组中颜色的一组颜色分布比率

strength

印记或跨页的强度

type

斜角效果的放置

GradientGlowFilter类的构造函数的表达式如下所示:

public function GradientGlowFilter(distance:Number = 4.0, angle:Number = 45, colors:Array = null, alphas:Array = null, ratios:Array = null, blurX:Number = 4.0, blurY:Number = 4.0, strength:Number = 1, quality:int = 1, type:String = "inner", knockout:Boolean = false)

下面的示例说明如何使用GradientGlowFilter类对位图应用渐变发光效果,代码如下所示:

package 

{

    import flash.display.Bitmap;

    import flash.display.BitmapData;

    import flash.filters.BitmapFilterQuality;

    import flash.filters.BitmapFilterType;

    import flash.display.Sprite;

    import flash.filters.GradientGlowFilter ;

    public class FilterExample extends Sprite

    {

        /********************

         * 构造函数

         * */

        public function FilterExample()

        {

            // 创建 bitmapData 对象并将它呈现在屏幕上

            var bitmapData:BitmapData = new BitmapData(200,200,false, 0x0000FF);

            var displayObject:Bitmap = new Bitmap(bitmapData);

            addChild(displayObject);

 

            // 设置位置

            displayObject.x = 130;

            displayObject.y = 80;

 

            // 创建滤镜实例

            var distance:Number  = 0;

            var angleInDegrees:Number = 45;

            var colors:Array     = [0xFFFFFF, 0xFF0000, 0xFFFF00, 0x0000FF];

            var alphas:Array     = [0, 1, 1, 1];

            var ratios:Array     = [0, 63, 126, 255];

            var blurX:Number     = 50;

            var blurY:Number     = 50;

            var strength:Number  = 3.5;

            var quality:Number   = BitmapFilterQuality.HIGH;

            var type:String      = BitmapFilterType.OUTER;

            var knockout:Boolean = false;

            var gradientBevelFilter:GradientGlowFilter = new GradientGlowFilter (

                    distance, angleInDegrees, colors, alphas, ratios,

                    blurX, blurY, strength, quality, type, knockout);

            // 创建滤镜数组,将滤镜作为参数传递给 Array() 构造函数

            // 将该滤镜添加到数组中

            var filtersArray:Array = new Array(gradientBevelFilter);

            // 将滤镜数组分配给显示对象以便应用滤镜

            displayObject.filters = filtersArray;

        }

 

    }

 

}

编译代码并运行,结果如图19.20所示。

图19.20  渐变发光效果

 19.7.6  模糊

使用BlurFilter类可实现显示对象的模糊效果。其属性如表19.9所示。

表19.9  BlurFilter类的属性

  

   

blurX

水平模糊量

blurY

垂直模糊量  

quality

应用滤镜的次数

BlurFilter类的构造函数的表达式如下所示:

public function BlurFilter(blurX:Number = 4.0, blurY:Number = 4.0, quality:int = 1)

下面的示例说明如何使用BlurFilter类对位图应用模糊效果,代码如下所示:

package 

{

    import flash.display.Bitmap;

    import flash.display.BitmapData;

    import flash.filters.BitmapFilterQuality;

    import flash.filters.BitmapFilterType;

    import flash.display.Sprite;

    import flash.filters.BlurFilter;

    public class FilterExample extends Sprite

    {

        /********************

         * 构造函数

         * */

        public function FilterExample()

        {

            // 创建 bitmapData 对象并将它呈现在屏幕上

            var bitmapData:BitmapData = new BitmapData(200,200,false,0x0000FF);

            var displayObject:Bitmap = new Bitmap(bitmapData);

            addChild(displayObject);

 

            // 设置位置

            displayObject.x = 130;

            displayObject.y = 80;

 

            // 创建滤镜实例

            var blurX:Number = 30;

            var blurY:Number = 30;

            var gradientBevelFilter:BlurFilter  = new BlurFilter(blurX, blurY,

                                    BitmapFilterQuality.HIGH);

            // 创建滤镜数组,将滤镜作为参数传递给 Array() 构造函数

            // 将该滤镜添加到数组中

            var filtersArray:Array = new Array(gradientBevelFilter);

            // 将滤镜数组分配给显示对象以便应用滤镜

            displayObject.filters = filtersArray;

        }

 

    }

 

}

编译代码并运行,结果如图19.21所示。

图19.21  模糊效果

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值