HTML5高级编程之像素处理及粒子效果

2024-08-26 00:17:26

字体：大中小

来源：转载

供稿：网友

HTML5中的像素处理，需要用到getImageData和putImageData两个函数，先用getImageData复制canvas画布中的像素数据，然后对获取的像素数据进行处理，最后再通过putImageData将处理完的数据粘贴到canvas画布。我们不妨把中间处理像素的过程称作像素的批处理，由于像素的复制和粘贴是两个比较费时的过程，为了更高效的对像素进行处理，我们应该在一次批处理过程中尽可能处理更多的像素数据，来减少像素的复制和粘贴这两个操作。

这听起来似乎是一个相当麻烦的过程，可能有些朋友光是看到上面的几句话估计就已经开始不耐烦了，其实我也是这么认为的，所以我把这一麻烦的过程封装到了lufylegend引擎中的LBitmapData类中，你可以像处理flash的像素一样处理HTML5中的canvas，这听起来是不是很有趣？如果你有兴趣，那么请跟着我一起来看一下这个好玩儿的小功能。

首先，来认识一下LBitmapData，它通常是用来保存Image对象的，具体用法我就不多说了，大家可以看一下API文档。这里我主要介绍一下如何用它来批量处理像素。

下面是LBitmapData中的两个函数

函数	功能
getPixel(x,y,colorType)	返回一个表示 BitmapData 对象中在某个特定点 (x, y) 处的 RGB 像素值的数组。其中colorType为需要获取的像素数据的格式，默认为像素数组，当设置成字符串"number"的时候，返回number型的像素
setPixel(x,y,data)	设置 LBitmapData 对象的单个像素。其中data为像素值(支持像素数组，#FF0000,0xFF000等三种格式)

上面这两个函数是获取和设置单个像素，当我们需要一次性获取或设置一个区域的像素的时候，对应的两个函数如下

函数	功能
getPixels(rect)	返回一组表示 BitmapData 对象中在某个特定区域的 RGB 像素值的数组。其中rect为LRectangle对象，是一个矩形。
setPixels(rect, data)	将像素数据数组转换粘贴到指定的矩形区域。其中data为像素值(支持像素数组，#FF0000,0xFF000等三种格式)

我们先来准备一张图片，比如下面鄙人这张帅帅的头像，莫吐...

HTML5高级编程之像素处理及粒子效果

如果想要把中间比较帅的脸部通过getPixels复制下来，可以像下面这样

[javascript] view plaincopy							
			bitmapData = new LBitmapData(imglist["face"]);  
			bitmapData.lock();  
			var img = bitmapData.getPixels(new LRectangle(75,50,100,100));  

有时候我们需要对LBitmapData进行多次像素的复制和粘贴操作，这个时候可以使用lock函数，它可以将像素数组缓存起来，在这个过程中，所做的所有的像素操作都是对这个缓存数组进行操作，当操作完毕后，调用相应的unlock函数，将操作完的像素数据粘贴回LBitmapData中。

比如下面这样，我们将复制完的数组中的一部分，分四次粘贴到另外一个LBitmapData的四个不同的位置上。

[javascript] view plaincopy							
			bitmapData2 = new LBitmapData(null,0,0,500,400,LBitmapData.DATA_CANVAS);  
			bitmapData2.lock();  
			bitmapData2.setPixels(new LRectangle(50,30,50,50),img);  
			bitmapData2.setPixels(new LRectangle(100,30,50,50),img);  
			bitmapData2.setPixels(new LRectangle(150,30,50,50),img);  
			bitmapData2.setPixels(new LRectangle(200,30,50,50),img);  
			bitmapData2.unlock();  

上面的代码，首先创建了一个空的LBitrmapData对象，最后一个参数是lufylegend-1.8.8版中的新功能，将LBitrmapData对象中保存的数据转换为canvas对象，这样可以提高像素操作的效率。

执行代码效果如下

HTML5高级编程之像素处理及粒子效果

当然，你也可以对这些像素做一些处理，比如下面这样

			[javascript] view plaincopy							

bitmapData2.lock();

var rect = new LRectangle(50,100,100,100);

var rect1 = new LRectangle(150,100,100,100);

for(var y=0;y<rect.height;y++){

for(var x=0;x<rect.width;x++){

var i = y*4*100+x*4;

bitmapData2.setPixel(rect.x+rect.width-x,y+rect.y,[img.data[i],img.data[i+1],img.data[i+2],img.data[i+3]]);

}

for(var y=0;y<rect1.height;y++){

for(var x=0;x<rect1.width;x++){

var i = y*4*100+x*4;

bitmapData2.setPixel(x+rect1.x,y+rect1.y,[img.data[i],img.data[i+1],img.data[i+2],img.data[i+3]]);

}

bitmapData2.unlock();

效果如下

可以看到，我们成功的通过处理像素，将图片翻转了过来。

当然图片翻转不需要这么麻烦，在lufylegend.js引擎中，你只需要将对象的属性scaleX设置为-1就可以实现图片的翻转。这里我们主要是为了说明像素的处理很灵活而已。

好了，有了上面的介绍，我们可以用这些API来制作一个酷酷的粒子效果，效果如下。

HTML5高级编程之像素处理及粒子效果
首先，我们先在画布上加一个文本

			[javascript] view plaincopy							

var labelText = new LTextField();

labelText.color = "#000000";

labelText.weight = "bolder";

labelText.text = getParameter("k");

if(!labelText.text)labelText.text="lufylegend.js";

labelText.size = 50;

var w = labelText.getWidth()*1.1;

var h = labelText.size*1.5;

labelText.width = w;

labelText.setWordWrap(true,h);

labelText.x = (LGlobal.width - w)*0.5;

labelText.y = (LGlobal.height - h)*0.5;

backLayer = new LSprite();

addChild(backLayer);

backLayer.addChild(labelText);

效果如下

上面唯一需要解释的是下面几行

			[javascript] view plaincopy							

var w = labelText.getWidth()*1.1;

var h = labelText.size*1.5;

labelText.width = w;

labelText.setWordWrap(true,h);

其实只需要用getWidth()和getHeight()就能获取文本的高和宽，但是因为canvas中没有获取文本高度的函数，所以引擎中用了一个不太准确的方式来获取（当然，这一点在引擎下次更新中会得到完美的解决），本次开发，所使用的文本高度和宽度都必须不小于文本的原始大小，所以，我给文本重新设定了一下略大的高度和宽度。

接下来，我们利用LBitmapData对象的draw函数，把这个文本转换为LBitmapData对象，为什么要转换成LBitmapData对象？请接着往下看，一会儿就知道了。

[javascript] view%20plaincopy HTML5高级编程之像素处理及粒子效果