在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 模糊效果