小小菜鸟的web菜园子

web开发学习。好记性不如烂笔头。每天进步一点点!

导航

AS2 BitmapData类的应用.

来自:
http://www2.flash8.net/teach/6636.htm

一、计算机中显示的图形一般可以分为两大类——矢量图和位图。
矢量图(vector):使用直线和曲线来描述图形,这些图形的元素是一些点、线、矩形、多边形、圆和弧线等等,它们都是通过数学公式计算获得的。众所周知Flash就是一款矢量动画制作软件。在AS中使用的填色(beginFill),画线(lineTo)等命令都是基于对矢量图的操作。
位图(Bitmap):一般是用于照片品质的图像处理,是由许多像小方块一样的像素组成的图形。简单地说,位图就是以无数的色彩点组成的图案。位图(Bitmap)也就是我们今天要介绍的。

两者比较:

1、矢量图可以无限放大,而且不会失真; 而位图会失真。
2、位图由像素组成而矢量图由矢量线组成。
3、位图可以表现的色彩比较多;而矢量图则相对较少。
4、矢量图体积小,但比较消耗计算资源;位图则比较消耗内存资源,但对计算资源消耗小。

二、BitmapData类的概念
BitmapData类可用于在文档中创建可任意调整大小的透明或不透明位图图像,并且可以在运行时以各种方式对它们进行处理。可以把BitmapData对象看成一个特殊的数组,专门用来存储位图的像素点阵信息。如果一个位图大小是100*100,那么BitmapData中就好比一个存储在一个100*100的二维数组,对应存储这10000像素的颜色值。

三、BitmapData类的使用
import flash.display.BitmapData;
//导入BitmapData类
var bm = new BitmapData(width,height,transparent,fillcolor);
//实例化

四、BitmapData构造函数
public BitmapData(width, height, [transparent], [fillColor])
width(宽):位图数据的宽度(像素);
height(高): 位图数据的高度(像素);
[transparent(透明度)]: 是否支持每个像素具有不同的透明度;
[fillcolor(添充色)]: 用于填充位图图像区域。默认为0xFFFFFFFF(白色)
*[中括号]表示可选参数
例如(创建一个100*100的位图数据):
import flash.display.BitmapData;
var bm:BitmapData = new BitmapData(100,100,false,0xffff00)

五、BitmapData.draw()方法
Draw()方法简单地理解为:复制像素到BitmapData对象中。
例如:在主场景有一个影片剪辑,实例名为"pic"
import flash.display.BitmapData;
var bm:BitmapData = new BitmapData(100, 100);
bm.draw(pic);
//bm复制pic的像素
_root.createEmptyMovieClip("mc", 10);
mc._x = mc._y=150;
mc.attachBitmap(bm, 1);
//用mc加载位图数据bm,深度为1。

*注意:位图在影片剪辑(pic)中的位置。

在使用draw()方法复制像素时,永远是从mc的(0,0)点开始取。所以小于(0,0)位置的像素都不会被取到。

应正确放置位图在影片剪辑中的位置(注册点在左上(0,0))

六、Rectangle 类
所以介绍Rectangle 类是因为它常与BitmapData类配合使用。
1、作用:在BitmapData类中用于定义位图图像大小和位置的矩形。
2、Rectangle 类的使用
import flash.geom.Rectangle;
public Rectangle(x, y, width, height)
x - 矩形左上角的 x 坐标。
y - 矩形左上角的 y 坐标。
width - 矩形的宽度,以像素为单位。
height - 矩形的高度,以像素为单位。

例如(一个100*100的矩形):
import flash.geom.Rectangle;
myRect = new Rectangle(0,0,100,100);

好啦,说了这么多理论知识,都是为我们的实例做铺垫的,下面就开始动手操作吧!

实例1:放大镜效果[BitmapData. copyPixels()]

/UploadTeach/200712/2007120716636454.swf

思路:1、点击图片后,从点击处复制一块(100*80)像素;
         2、把复制出来的像素(bm2)加载入mc中,并放大mc。

步骤一:
  在主场景中放入一位图,保存为影片剪辑,实例名为"pic",放入舞台中;
  注意:该位图在pic中的注册点应为左上(0,0),以确保正确显示。
步骤二:加入AS代码:

import flash.display.BitmapData;
import flash.geom.Rectangle;
var bm1:BitmapData = new BitmapData(pic._width, pic._height);
bm1.draw(pic);
//创建一个与图片大小相同的位图数据类,并把pic所有像素复制进去
pic.onMouseDown = function() {
var bm2:BitmapData = new BitmapData(100, 80, true, 0);
bm2.copyPixels(bm1, new Rectangle(_xmouse, _ymouse, 100, 80), new Point(0, 0));
//从bm1中复制一块像素到bm2,像素起点是鼠标点击的处,大小为100*80
_root.createEmptyMovieClip("mc", 10);
mc.attachBitmap(bm2, 1);
 //显示bm2中的位图
mc._x = _xmouse;
mc._y = _ymouse;
mc._xscale = mc._yscale=150;
//放大mc
};
_root.onMouseUp = function() {
 mc.removeMovieClip();
};


实例2:卷动图效果[BitmapData. copyPixels()]

/UploadTeach/200712/2007120716654445.swf

思路:1、把图片纵向切为num条,并为每条取像素;
          2、创建num个影片剪辑,分别存放每条像素;
          3、设置每个影片剪辑的X坐标;Y坐标一块比一块高;
          4、结合Tween类使每个条都从天上落下。
步骤一:
  在主场景中放入一位图,保存为影片剪辑,实例名为"pic",放入舞台中;
  注意:该位图在pic中的注册点应为左上(0,0),以确保正确显示。
步骤二:加入AS代码:

import flash.display.BitmapData;
import flash.geom.Rectangle;
import mx.transitions.Tween;
import mx.transitions.easing.*;
var num = 80;
//把图分成80份
var pW = pic._width/num;
//确定每份的宽度为
var pH = pic._height;
//因为切成竖条形所以高度不变
var bm1:BitmapData = new BitmapData(pic._width, pic._height);
bm1.draw(pic);
pic._visible = false;
for (i=0; i
 var bm2:BitmapData = new BitmapData(pW, pH);
 bm2.copyPixels(bm1, new Rectangle(i*pW, 0, pW, pH), new Point(0, 0));
 //用i变量*每块宽度,确定取像素的位置
 var p:MovieClip = _root.createEmptyMovieClip("mc"+i, i);
 p.attachBitmap(bm2, this.getNextHighestDepth());
 p._x = i*pW;
 //排好X坐标
 p._y = -i*pH/5;
 //把Y坐标置到舞台上面去,一块比一块高
 new Tween(p, "_y", Bounce.easeOut, p._y, 0, (i/10+1), true);
 //------------------试替换代码看看效果-------------------
 //new Tween(p, "_y", Back.easeInOut, p._y, 0, (i/10+1), true);
 //new Tween(p, "_y", Strong.easeIn, p._y, 0, (i/10+1), true);
 //new Tween(p, "_y", Elastic.easeOut, p._y, 0, (i/10+1), true)
}


实例3:位图填充[BitmapData. beginBitmapFill()]

/UploadTeach/200712/2007120716706439.swf

思路: 1、用loadBitmap("id")加载位图,注意:这是个静态方法;
          2、创建一个MC,绘出一个与舞台同样大小的矩形,并进行填充。
步骤一:

       

任意导入一张位图,在库中右击该位图->链接->标识符为"pic"。

步骤二:
加入AS代码:
import flash.display.BitmapData;
var bm:BitmapData = BitmapData.loadBitmap("pic");
//根据屏幕的大小来绘制绘画区域,用以beginBitmapFill来添充
_root.createEmptyMovieClip("MC", 10);
with (MC) {
 beginBitmapFill(bm);
 moveTo(0, 0);
 lineTo(Stage.width, 0);
 lineTo(Stage.width, Stage.height);
 lineTo(0, Stage.height);
 lineTo(0, 0);
 endFill();

实例4:位图切片
[BitmapData. beginBitmapFill()]

/UploadTeach/200712/2007120716718306.swf

思路: 1、点击到原图上,进行画圈,并在圈中填充位图;
          2、点击在切片上,进行拖动。

步骤一:
  在主场景中放入一位图,保存为影片剪辑,实例名为”pic”,放入舞台中;注意:该位图在pic中的注册点应为左上(0,0),以确保正确显示。
步骤二:加入AS代码:

import flash.display.BitmapData;
var bm:BitmapData = new BitmapData(pic._width, pic._height);
bm.draw(pic);
var draw:Boolean = false;
pic.onPress = function() {
 if (mc.hitTest(_xmouse, _ymouse, true)) {
  mc.startDrag();
  //如果鼠标在mc上,开始拖动它
 } else {
  draw = true;
  mc = _root.createEmptyMovieClip("mc", 1);
  mc.lineStyle(2, 0xFF0000);
  mc.beginBitmapFill(bm);
  mc.moveTo(_xmouse-this._x, _ymouse-this._y);
  //移动起点到此
 }
};
pic.onMouseMove = function() {
 if (draw) {
  mc.lineTo(_xmouse-this._x, _ymouse-this._y);
  //如果draw状态为真,移动鼠标就draw  
 }
};
pic.onMouseUp = function() {
 if (draw) {
  draw = false;
  mc.endFill();
  //填充结束
 } else {
  mc.stopDrag();
 }
};

关于BitmapData类的应用还有很多很多,一句两句还说不完,今后再做介绍。

posted on 2008-01-13 15:44  『小小菜鸟』  阅读(2546)  评论(1编辑  收藏  举报