最近没事研究了一个ps里面lomo效果，这些效果在ps里面实现是比较轻松的，想着是不是可以通过as3的bitmapdata操作来实现这个效果，在网上找各种资料算是基本差不多了，分享出来，欢迎大家指正
先看效果对比图
看原图
看看实现这种效果需要在ps中的步骤
1，原图滤色，目的是漂白图片，使亮的部分更加明亮
2，滤色后的图片反相
3，反相的图片的蓝色通道的20%和滤色后的图片叠加
4，添加四角的阴影效果
下面一步一步的通过bitmapdata来实习这些效果
1.滤色
我们可以在DisplayObject的叠加模式里面找到滤色BlendMode.SCREEN，具体解释是：将显示对象颜色的补色（反色）与背景颜色的补色相乘，会产生漂白效果。此设置通常用于产生加亮效果或用来删除显示对象的黑色区域。
这里实际是原图上面复制一个同样的一张图片，上面的图片和原图以滤色的模式叠加,具体的RGB的计算公式是 (255 - ((255 - topPixel) * (255 -bottomPixel))/255),这个只是一个通道的计算公式，每一个通道都要叠，先得到像素点的数值，分解成RGB三个通道，每一个都执行这个公式，然后在混合成16位色，赋值给像素点[ol] private function sereenBitmaps(i:int,j:int):void{
var color32:uint = bitmapdata.getPixel(i,j);
var red:int = color32 >> 16;
var green:int = color32 >> 8 & 0xFF;
var blue:int = color32 & 0xFF;
var redInt:int = screenBase(red,red);
var greenInt:int = screenBase(green,green);
var blueInt:int = screenBase(blue,blue);
var newUint:uint = redInt 复制代码执行完这一步的效果如下图所示：
2.反相
这一步是要对滤色后的图案进行反相，由于下一步要对反相的图片和滤色的图片进行叠加，要把滤色的图片复制一份，存起来供下一步使用。反相的也就是BlendMode.INVERT，就是我们在QQ聊天中选中图片的效果，像是胶片的底片一样，这个原理比较简单，就是把RGB的每一个通道乘负一，这里用滤镜也可以实现，我们之间用bitmapdata的colorTransform方法实现
new ColorTransform(-1,-1,-1,1,255,255,255,1)，这里的参数看帮助文件就明白了[ol]private function processInvert():void{
bitmapdata.colorTransform(new Rectangle(0,0,bitmapdata.width,bitmapdata.height),new ColorTransform(-1,-1,-1,1,255,255,255,1));
}[/ol]复制代码执行完这一步的效果如下图所示：
3.反相的红色通道叠加
这里我们只需要把反相红色通道的20%叠加到底图上面就可以了，不透明图片的的叠加，而且只叠加一个通道，在网上找到了这个不同alpah图片颜色叠加的公式：叠加色r=覆盖色r*覆盖alpha+底色r*（1-覆盖色alpha），我们直接计算[ol]private function redadd(i:int,j:int):void{
var top:uint = bitmapdata.getPixel(i,j);
var bottom:uint = lightBitmapdata.getPixel(i,j);
var red:int = top >> 16;
var green:int = top >> 8 & 0xFF;
var blue:int = top & 0xFF;
var redbottom:int = bottom >> 16;
var greenbottom:int = bottom >> 8 & 0xFF;
var bluebottom:int = bottom & 0xFF;
var resultR:int = redbottom;
var resultG:int = greenbottom;
var resultB:int = blue*0.2 + bluebottom*0.8;
var newUint:uint = resultR 复制代码执行完这一步的效果如下图所示：
这时候已经基本差不多好使了
4.添加四角的阴影效果
这个效果是中间是空白的，边角是渐变的黑色，这个用Graphics的beginGradientFill非常容易实现，就是参数调整的问题，画一个shape画出这个形状，然后之间draw在bitmapdata上就可以了[ol]private function drawShape():void{
var shape:Shape = new Shape;
var g:Graphics = shape.graphics;
var fillType:String = GradientType.RADIAL;
var colors:Array = [0x000000, 0x000000];
var alphas:Array = [0, 0.3];
var ratios:Array = [200,255];
var matr:Matrix = new Matrix();
matr.createGradientBox(bitmapdata.width+160, bitmapdata.height+160, 0, 0, 0);
var spreadMethod:String = SpreadMethod.PAD;
g.beginGradientFill(fillType, colors, alphas, ratios,matr);
g.drawRect(0,0,bitmapdata.width+160,bitmapdata.height+160);
matr = new Matrix();
matr.tx = -80;
matr.ty = -80;
bitmapdata.draw(shape,matr);
}[/ol]复制代码这时候效果已经出来了
然后整理成类，见附件
参考文章：
http://www.wikish.net/doc-view-2072.html
http://blog.sina.com.cn/s/blog_62493c180100q8y0.html
http://www.bitscn.com/school/Flash/Action/200609/59873.html
附件：
先看效果对比图
看原图
看看实现这种效果需要在ps中的步骤
1，原图滤色，目的是漂白图片，使亮的部分更加明亮
2，滤色后的图片反相
3，反相的图片的蓝色通道的20%和滤色后的图片叠加
4，添加四角的阴影效果
下面一步一步的通过bitmapdata来实习这些效果
1.滤色
我们可以在DisplayObject的叠加模式里面找到滤色BlendMode.SCREEN，具体解释是：将显示对象颜色的补色（反色）与背景颜色的补色相乘，会产生漂白效果。此设置通常用于产生加亮效果或用来删除显示对象的黑色区域。
这里实际是原图上面复制一个同样的一张图片，上面的图片和原图以滤色的模式叠加,具体的RGB的计算公式是 (255 - ((255 - topPixel) * (255 -bottomPixel))/255),这个只是一个通道的计算公式，每一个通道都要叠，先得到像素点的数值，分解成RGB三个通道，每一个都执行这个公式，然后在混合成16位色，赋值给像素点[ol] private function sereenBitmaps(i:int,j:int):void{
var color32:uint = bitmapdata.getPixel(i,j);
var red:int = color32 >> 16;
var green:int = color32 >> 8 & 0xFF;
var blue:int = color32 & 0xFF;
var redInt:int = screenBase(red,red);
var greenInt:int = screenBase(green,green);
var blueInt:int = screenBase(blue,blue);
var newUint:uint = redInt 复制代码执行完这一步的效果如下图所示：
2.反相
这一步是要对滤色后的图案进行反相，由于下一步要对反相的图片和滤色的图片进行叠加，要把滤色的图片复制一份，存起来供下一步使用。反相的也就是BlendMode.INVERT，就是我们在QQ聊天中选中图片的效果，像是胶片的底片一样，这个原理比较简单，就是把RGB的每一个通道乘负一，这里用滤镜也可以实现，我们之间用bitmapdata的colorTransform方法实现
new ColorTransform(-1,-1,-1,1,255,255,255,1)，这里的参数看帮助文件就明白了[ol]private function processInvert():void{
bitmapdata.colorTransform(new Rectangle(0,0,bitmapdata.width,bitmapdata.height),new ColorTransform(-1,-1,-1,1,255,255,255,1));
}[/ol]复制代码执行完这一步的效果如下图所示：
3.反相的红色通道叠加
这里我们只需要把反相红色通道的20%叠加到底图上面就可以了，不透明图片的的叠加，而且只叠加一个通道，在网上找到了这个不同alpah图片颜色叠加的公式：叠加色r=覆盖色r*覆盖alpha+底色r*（1-覆盖色alpha），我们直接计算[ol]private function redadd(i:int,j:int):void{
var top:uint = bitmapdata.getPixel(i,j);
var bottom:uint = lightBitmapdata.getPixel(i,j);
var red:int = top >> 16;
var green:int = top >> 8 & 0xFF;
var blue:int = top & 0xFF;
var redbottom:int = bottom >> 16;
var greenbottom:int = bottom >> 8 & 0xFF;
var bluebottom:int = bottom & 0xFF;
var resultR:int = redbottom;
var resultG:int = greenbottom;
var resultB:int = blue*0.2 + bluebottom*0.8;
var newUint:uint = resultR 复制代码执行完这一步的效果如下图所示：
这时候已经基本差不多好使了
4.添加四角的阴影效果
这个效果是中间是空白的，边角是渐变的黑色，这个用Graphics的beginGradientFill非常容易实现，就是参数调整的问题，画一个shape画出这个形状，然后之间draw在bitmapdata上就可以了[ol]private function drawShape():void{
var shape:Shape = new Shape;
var g:Graphics = shape.graphics;
var fillType:String = GradientType.RADIAL;
var colors:Array = [0x000000, 0x000000];
var alphas:Array = [0, 0.3];
var ratios:Array = [200,255];
var matr:Matrix = new Matrix();
matr.createGradientBox(bitmapdata.width+160, bitmapdata.height+160, 0, 0, 0);
var spreadMethod:String = SpreadMethod.PAD;
g.beginGradientFill(fillType, colors, alphas, ratios,matr);
g.drawRect(0,0,bitmapdata.width+160,bitmapdata.height+160);
matr = new Matrix();
matr.tx = -80;
matr.ty = -80;
bitmapdata.draw(shape,matr);
}[/ol]复制代码这时候效果已经出来了
然后整理成类，见附件
参考文章：
http://www.wikish.net/doc-view-2072.html
http://blog.sina.com.cn/s/blog_62493c180100q8y0.html
http://www.bitscn.com/school/Flash/Action/200609/59873.html
附件：
No comments:
Post a Comment