flash 绘图API：贝塞尔曲线

今天有点累，不多想写东西，就是当练习。

贝塞尔曲线，也不用多介绍，不过这个东西还有很多没加入去的。今天允许我懒一点。不想解释了。

测试玩玩。具体的没有什么功能，其实还有很多种情况没加入去。等待完善

package 
{
	//贝塞尔曲线
	import flash.display.Sprite;
	import flash.events.*;
	import flash.geom.*;

	public class Main extends Sprite
	{
		private var pen:Sprite=new Sprite();
		private var circleA:CirclePoint;
		private var circleB:CirclePoint;
		private var circleC:CirclePoint;
		public function Main()
		{
			init();
		}
		
		//初始化
		private function init():void
		{
			drawGrid(20,30,16,16);//绘制网格
			addChild(pen);
			pen.graphics.lineStyle(1,0xff0000);
			pen.graphics.moveTo(100,300);
			pen.graphics.curveTo(100,100,400,10);

			circleA=new CirclePoint();
			circleA.addEventListener(MouseEvent.MOUSE_DOWN,circle_DragHandler);
			addChild(circleA);
			circleA.x=100;
			circleA.y=300;

			circleB=circleA.clone();
			circleB.addEventListener(MouseEvent.MOUSE_DOWN,circle_DragHandler);
			addChild(circleB);
			circleB.x=400;
			circleB.y=10;

			circleC=circleA.clone();
			circleC.addEventListener(MouseEvent.MOUSE_DOWN,circle_DragHandler);
			addChild(circleC);
			circleC.x=100;
			circleC.y=100;

			pen.graphics.moveTo(circleA.x,circleA.y);
			pen.graphics.lineTo(circleC.x,circleC.y);

			pen.graphics.moveTo(circleB.x,circleB.y);
			pen.graphics.lineTo(circleC.x,circleC.y);

			stage.addEventListener(MouseEvent.MOUSE_UP,onMouseUpHandler);
		}
		 
		private function circle_DragHandler(event:MouseEvent):void
		{
			stage.addEventListener(MouseEvent.MOUSE_MOVE,onMouseMoveHandler);
			event.currentTarget.startDrag(false,new Rectangle(10,10,460,300));//控制拖动区间
		}
		private function onMouseMoveHandler(event:MouseEvent):void
		{
			redraw();
		}
		private function onMouseUpHandler(event:MouseEvent):void
		{
			stage.removeEventListener(MouseEvent.MOUSE_MOVE,onMouseMoveHandler);
			circleA.stopDrag();
			circleB.stopDrag();

		}
		
		//重绘
		private function redraw():void
		{
			pen.graphics.clear();
			pen.graphics.lineStyle(1,0xff0000);
			pen.graphics.moveTo(circleA.x,circleA.y);
			pen.graphics.curveTo(circleC.x,circleC.y,circleB.x,circleB.y);

			pen.graphics.moveTo(circleA.x,circleA.y);
			pen.graphics.lineTo(circleC.x,circleC.y);

			pen.graphics.moveTo(circleB.x,circleB.y);
			pen.graphics.lineTo(circleC.x,circleC.y);

		}
		//绘制网格
		private function drawGrid(rows :int,cols:int,titleW:int,titleH:int):void
		{
          this.graphics.lineStyle(1,0xffffff,0.2);
		  for (var i:int=0; i<rows; i++)
			{
				for (var j:int=0; j<cols ; j++)
				{					 
					this.graphics.drawRect(j*titleW,i*titleH,titleW,titleH);//绘制矩形
				}
			}

		}
		

	}
}

//创建点类
import flash.display.Sprite;
internal class CirclePoint extends Sprite
{
	public function CirclePoint(R:int=8)
	{
		this.graphics.lineStyle(0);
		this.graphics.beginFill(0xffffff);
		this.graphics.drawCircle(0,0,R);
		this.graphics.endFill();
	}
	public function clone():CirclePoint
	{
		return new CirclePoint();
	}
	public function move(x:Number,y:Number):void
	{
		this.x=x;
		this.y=y;
	}
}

随后，我们添加一个输出代码的功能。看看效果如何？通过记录我们三个点的位置，从而看到更改坐标后，就可以得到我们所想的图形








添加一个输出代码的功能

//输出文本
		private function Printf():String
		{
			var codeMsg:String;
			codeMsg="this.graphics.lineStyle(1,0xff0000);"+"/n"
			        +"this.graphics.moveTo("+circleA.x+","+circleA.y+");"+"/n"
					+"this.graphics.curveTo("+circleC.x+","+circleC.y+","+circleB.x+","+circleB.y+");";
			
			
			return codeMsg;
		 		
		}

初始化文本。并看看输出的情况如何。



在init()函数里面添加里面的函数。则可以看到输出的面板

并且初始化文本，指定他们的坐标，背景，宽度高度等

//输出文本
		 private function initTextArea():void
		 {
			
			textArea=new TextField();
			textArea.textColor=0x000000;
			addChild(textArea);
			textArea.border=true;
			textArea.background=true;
			textArea.x=0;
			textArea.y=330;
			textArea.width=480;
			textArea.height=100;
			textArea.wordWrap=true;
			textArea.text=Printf();
		}

扩展，贝塞尔曲线有两次，三次和四次等，而现在这种曲线应用很广泛了。对于flash而言使用了它一部分的已经可以扩展很多话题。有兴趣可以到wonderfl 哪里观看，这方面使用，相信精彩会在后面。