HTML5高级编程之像素处理及粒子效果
函数 | 功能 |
---|---|
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等三种格式) |
我们先来准备一张图片,比如下面鄙人这张帅帅的头像。
- bitmapData = new LBitmapData(imglist["face"]);
- bitmapData.lock();
- var img = bitmapData.getPixels(new LRectangle(75,50,100,100));
有时候我们需要对LBitmapData进行多次像素的复制和粘贴操作,这个时候可以使用lock函数,它可以将像素数组缓存起来,在这个过程中,所做的所有的像素操作都是对这个缓存数组进行操作,当操作完毕后,调用相应的unlock函数,将操作完的像素数据粘贴回LBitmapData中。
比如下面这样,我们将复制完的数组中的一部分,分四次粘贴到另外一个LBitmapData的四个不同的位置上。
- 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对象,这样可以提高像素操作的效率。
执行代码效果如下
当然,你也可以对这些像素做一些处理,比如下面这样
- bitmapData2.lock();
- var rect = new LRectangle(50,100,100,100);
- var rect1 = new LRectangle(150,100,100,100);
- for(var y=0;y
;y++){ - for(var x=0;x
;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
;y++){ - for(var x=0;x
;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来制作一个酷酷的粒子效果,效果如下。
首先,我们先在画布上加一个文本
- 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);
上面唯一需要解释的是下面几行
- 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对象?请接着往下看,一会儿就知道了。
- bitmapData = new LBitmapData("#000000",0,0,LGlobal.width,LGlobal.height,LBitmapData.DATA_CANVAS);
- bitmapData.draw(backLayer);
- snowBack = new LBitmapData(null,0,0,LGlobal.width,LGlobal.height,LBitmapData.DATA_CANVAS);
- var bitmap = new LBitmap(snowBack);
- backLayer.addChild(bitmap);
- function particle(px,py,ps,pvx,pvy){
- if(typeof ps == UNDEFINED)ps = 1;
- if(typeof pvx == UNDEFINED)pvx = 0;
- if(typeof pvy == UNDEFINED)pvy = 0;
- _snow.push({x:px,y:py,s:ps,vx:pvx,vy:pvy});
- }
下面的函数用来检验指定坐标处是否处在文字上
- function checkPixel(x,y){
- var pixel = bitmapData.getPixel(x,y);
- for(var i=0;i
;i++){ - if(pixel[i])return true;
- }
- return false;
- }
声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
相关文章
相关视频