应用AS3实现的水墨笔触

三维网站 everyinch 2793℃ 0评论

先来看下效果:

实现的代码主要应用了Bitmap操作,主要步骤是:
1. 生成BitmapData和Bitmap
2. 克隆BitmapData
3. 使它淡出并模糊
4. 绘制黑色圆形的笔刷
5. 应用Matrix变换笔刷,放大并根据鼠标的水平位置旋转
6. 将克隆的BitmapData绘制到BitmapData
7. 循环以上步骤

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);
		}
	}
}


转载请注明:陈童的博客 » 应用AS3实现的水墨笔触

喜欢 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

无觅相关文章插件,快速提升流量