陈童的博客's Archivers

From everyinch on 2013-12-19 15:01:29

应用AS3实现的水墨笔触

先来看下效果:


实现的代码主要应用了Bitmap操作,主要步骤是:
1. 生成BitmapData和Bitmap
2. 克隆BitmapData
3. 使它淡出并模糊
4. 绘制黑色圆形的笔刷
5. 应用Matrix变换笔刷,放大并根据鼠标的水平位置旋转
6. 将克隆的BitmapData绘制到BitmapData
7. 循环以上步骤
[code lang="as3"]package {
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.Shape;
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.Event;
import flash.filters.BitmapFilterQuality;
import flash.filters.BlurFilter;
import flash.geom.ColorTransform;
import flash.geom.Matrix;
import flash.geom.Point;

public class WashPainting extends Sprite {
private var w:Number = 480;
private var h:Number = 480;
private var bmpd:BitmapData;
private var bmp:Bitmap;
private var canvas:BitmapData;
private var flagRotation:Number = 0;
private const fadeTransform:ColorTransform = new ColorTransform(1, 1, 1, 1, 2, 2, 2, 0);
private const blurFilter:BlurFilter = new BlurFilter(2, 2, BitmapFilterQuality.LOW);
private var xpos:Number = w/2;
private var ypos:Number = h/2;
private var vx:Number = 0;
private var vy:Number = 0;
private const spring:Number = 0.012;
private const friction:Number = 0.89;
private var brush:Shape = new Shape();
private var mat:Matrix;

[SWF(width="800",height="600")]
public function WashPainting() {
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
bmpd = new BitmapData(w, h, false, 0x000000);
bmp = new Bitmap(bmpd);
addChild(bmp);

addEventListener(Event.ENTER_FRAME, onEnterframe);
}

public function onEnterframe(e:Event):void {
if (canvas)
canvas.dispose();
canvas = bmpd.clone();

flagRotation = -(stage.mouseX - 240) / 280;

// 淡出
canvas.colorTransform(canvas.rect, fadeTransform);
canvas.applyFilter(canvas, canvas.rect, new Point(), blurFilter);

// 绘制笔刷
vx += (stage.mouseX - xpos) * spring;
vy += (stage.mouseY - ypos) * spring;
vx *= friction;
vy *= friction;
xpos += vx;
ypos += vy;

var radiusOffset:Number = Math.sqrt(vx * vx + vy * vy);
var radius:Number = Math.min(40, 360 / radiusOffset);
brush.graphics.clear();
brush.graphics.beginFill(0x000000);
brush.graphics.drawCircle(xpos, ypos, radius);
brush.graphics.endFill();
canvas.draw(brush);

//变换
mat = new Matrix();
mat.translate(-240, -240);
mat.scale(1.005, 1.005);
mat.rotate(Math.PI / 180 * flagRotation);
mat.translate(240, 240);

//绘制到bitmapdata
bmpd.draw(canvas, mat);
}
}
}[/code]

查看完整版本: 应用AS3实现的水墨笔触

Tags:


©陈童的博客