AS3-封闭平滑曲线绘制

1808/091

AS3-封闭平滑曲线绘制

以下内容来自《ActionScript3 Animation - Make Things Move!》。

这个Demo非常的简单，随机出N个(Demo里是100)点，然后就画曲线，主要考虑的东西就是如何让绘制出来的线尽可能的流畅。
这部分代码是这样的：

var xc:Number = (points[i].x + points[i + 1].x) / 2;
var yc:Number = (points[i].y + points[i + 1].y) / 2;
graphics.curveTo (points[i].x, points[i].y, xc, yc);

实际上，random出来的点是曲线的控制点，而不是曲线的端点。

package {
	import flash.display.Sprite;
	import flash.display.Shape;
	import fl.controls.Button;
	import flash.events.MouseEvent;

	public class MultiCurves extends Sprite {
		private var numPoints:uint = 100;
		private var btnReDraw:Button = new Button();
		private var cont:Shape = new Shape();
		public function MultiCurves () {
			init ();
			showBtn();
		}
		private function showBtn(){
			btnReDraw.label = "reDraw";
			btnReDraw.x = 10;
			btnReDraw.y = 10;
			addChild(btnReDraw);
			btnReDraw.addEventListener(MouseEvent.CLICK,reDraw);
		}
		private function init ():void {
			var points:Array = new Array();
			for (var i:int = 0; i < numPoints; i++) {
				points[i] = new Object();
				points[i].x = Math.random() * stage.stageWidth;
				points[i].y = Math.random() * stage.stageHeight;
			}
			// find the first midpoint and move to it
			var xc1:Number = (points[0].x + points[numPoints - 1].x) / 2;
			var yc1:Number = (points[0].y + points[numPoints - 1].y) / 2;
			graphics.lineStyle (1);
			graphics.moveTo (xc1, yc1);
			// curve through the rest, stopping at midpoints
			for (i = 0; i < numPoints - 1; i ++) {
				var xc:Number = (points[i].x + points[i + 1].x) / 2;
				var yc:Number = (points[i].y + points[i + 1].y) / 2;
				graphics.curveTo (points[i].x, points[i].y, xc, yc);
			}
			// curve through the last point, back to the first midpoint
			graphics.curveTo (points[i].x, points[i].y, xc1, yc1);
		}
		private function reDraw(_e:MouseEvent){
			graphics.clear();
			init();
		}
	}
}

豆腐在这个Demo里学到一点，原来循环体内的变量的生命周期是该函数(之前我一直以为只是在循环体内，惭愧啊……)，在循环结束之后的值是循环结束的值。