ActionScript 3 BitmapData教程一
声明:转载请注明原地址谢谢:)
Chapter 1 初识Bitmap
大家应该都听说过Flash里面有一个大名鼎鼎的Bitmap类,能实现很多超酷效果
但是很多朋友都对Bitmap以及她的相关操作感到神秘,不敢尝试。
从本节开始,Molay将带领大家走进Bitmap的世界
本节介绍如何在FLASH中使用Bitmap数据
PS:如果你已经了解如何使用,请PASS本节继续:)
ActionScript 3中的位图(Bitmap)操作有两个关键类——Bitmap 类和BitmapData 类
前者是是显示位图图形的实体,就像在场景里建立一个画出来的矢量图形或者加入了外部的图形数据
后者是对这些位图实体的原始图形数据进行操作的类。
其实Bitmap就是BitmapData的封装,能显示在场景上
BitmapData则是Bitmap的所有像素的数据集合,是图形的快照
说了这么多,大家先来简单的练手:
建立一个AS3文档,输入如下代码:
// 建立一个BitmapData实例
var myBitmapData:BitmapData = new BitmapData(300, 200, true, 0xFFBE1323);
// 建立一个Bitmap实例,并将之与刚才建立的BitmapData挂钩
var myBitmap:Bitmap = new Bitmap(myBitmapData);
// 将建立的Bitmap呈现在容器上,此处容器为主场景
addChild(myBitmap);
输出,就能看到建立了一个300*200的红色的矩形
下面介绍下两个类的构造函数的参数
BitmapData的构造函数有四个参数:实例的宽、实例的高、是否允许透明(可选)、初始化填充颜色(可选)
实例的高宽是必填项目,如果填写大小小于0*0,或者大于2880*2880(最大大小限制)则会提示BitmapData无效
是否允许透明,默认为true(允许),开启这个选项则BitmapData实例中每个像素都保留各自的透明通道数据(Alpha)
初始化填充颜色,默认为0xFFFFFFFF(白色),注意在BitmapData的世界里,颜色是以0xAARRGGBB格式表示的
其中AA是Alpha透明通道的数值,代表透明度,00代表完全透明,FF代表完全不透明;RR是红色通道;GG是绿色通道;BB是蓝色通道
AA、RR、GG、BB都是从00到FF变化的(16进制)
Bitmap的构造函数有三个参数:与Bitmap挂钩的BitmapData实例、是否贴紧至最近的像素可选)、是否进行平滑处理(可选)
第一个参数就是告诉Bitmap自己是谁,代表着谁
第二个参数偶也不知道是干吗的,貌似只有默认的“auto”^_^
第三个参数是在缩放位图的情况下是否进行平滑处理,消除锯齿
一旦Bitmap建立(即与BitmapData实例挂钩)后,该BitmapData实例的任何变化都会直接更新Bitmap
而不需要手动更新Bitmap的图形显示
接下来我们在场景里建立一个元件,放上图片或者画个什么,命名实例名为pic1
试试下面的代码:
// 建立一个BitmapData实例
var myBitmapData:BitmapData = new BitmapData(pic1.width, pic1.height);
// 复制pic1的图形数据到刚才建立的BitmapData实例
myBitmapData.draw(pic1);
// 建立一个Bitmap实例,并将之与刚才建立的BitmapData挂钩
var myBitmap:Bitmap = new Bitmap(myBitmapData);
// 将建立的Bitmap呈现在容器上,此处容器为主场景
myBitmap.x = myBitmapData.width+30;
addChild(myBitmap);
可以看到我们复制了一个pic1的副本在原体的右侧
这时我们会问,就只有这么简单的操作吗?效果呢?
别急,先来讨论一个问题,如何将BitmapData实例中的某种颜色全部替换成另外一种颜色呢?
一个个的替换?可以!
颜色比较操作大致判断如下:
if ((pixelValue & mask) operation (threshold & mask)){
setPixel();
}
其中pixelValue为像素颜色值,mask为用于隔离颜色成分的遮罩(一般情况下都取0xFFFFFFFF),operation为操作(大于、等于、小于……),threshold为测试每个像素时要比较的值(即目标颜色)
如果条件成立就设置像素为新的颜色值就能达到换色的目的。
以下代码访问每个像素,然后比较他们的颜色是否相同,相同就替换成另外一种颜色:
/* 使用遍历法进行变化 */
// 在执行变化前锁定BitmapData实例
// 否则播放器将每设置一个像素就更新一次Bitmap
// 造成效率低下
myBitmapData.lock();
// 设置要比较的颜色,这里设置为白色
var threshold:uint = 0xFFFFFFFF;
// 设置替换成的新颜色值,这里设置为黄色
var newColor:uint = 0xFFFFFF00;
for (var i=0; i<myBitmapData.width; i++) {
for (var j=0; j<myBitmapData.height; j++) {
// 进行“==”比较
if ((myBitmapData.getPixel32(i,j) & 0xFFFFFFFF) == (threshold & 0xFFFFFFFF)) {
myBitmapData.setPixel32(i,j,newColor);
}
}
}
// 解除缩定,更新显示
myBitmapData.unlock();
上面的例子使用了getPixel32方法来获取像素带Alpha透明通道的颜色值
并使用setPixel32方法来设置像素的新值
最终副本中所有白色变成了黄色
是不是可以写成一个专门的函数来方便调用呢?
的确可以,但是在热血沸腾准备DIY前,注释掉上面的使用遍历法进行变化的代码,加上下面的代码:
/* 使用threshold进行变换 */
myBitmapData.threshold(myBitmapData,new Rectangle(0,0,myBitmapData.width,myBitmapData.height), new Point(),"==",0xFFFFFFFF, 0xFFFFFF00);
看看效果出现什么拉?
副本中所有白色也全部变成了黄色呵呵
这就是BitmapData类自带的像素比较逻辑操作的内置解决办法threshold
下面来解释下BitmapData类的threshold方法
方法参数有八个:
1、进行像素逻辑比较操作的BitmapData实例,可以是本实例本身,也可以是其他BitmapData实例(说明这个方法是静态的方法?)
2、进行像素逻辑比较操作的影响范围矩形,在范围外部的像素不参与比较
3、范围矩形左上角的顶点在整个图形中的位置,用于定位范围矩形
4、进行的比较的字符串,例如“<”、“<=”、“>”、“>=”、“==”、“!=”
5、测试判断每个像素时要比较的值,如上例中的白色
6、测试判断成功时对像素重新赋予的值,如上例中的红色
7、用于隔离颜色成分的遮罩,默认为0xFFFFFFFF
8、源图像中的像素值在阈值测试失败时是否复制到目标图像,默认为“false”
至此,基本的BitmapData操作大家想必应该都熟悉了
下一节,我们开始进军BitmapData的简单应用