AS3.0画一段简单的贝塞尔曲线

一段曲线通常包含三个点：起点(x1,y1)，控制点(x3,y3)，终点(x2,y2)，通过curveTo(controlX:Number, controlY:Number, anchorX:Number, anchorY:Number)即可画出曲线，curveTo参数中第一个参数是控制点的x坐标，第二个参数是控制点的y坐标，第三个参数是结束点的x坐标，第四个参数是结束点的y坐标。代码如下

package
{
	import flash.display.Shape;
	import flash.display.Sprite;
	import flash.events.MouseEvent;
	import flash.geom.Point;
	import flash.text.TextField;
	
	/**
	 *@author hypo.chen
	 *@E-mail 645338868@qq.com
	 *@data 2015-9-11
	 */
	[SWF(width="1024",height="768",frameRate="60",backgroundColor="0x669966")]
	public class DrawBezierCurve extends Sprite
	{
		//已知三个顶点，即起点、终点和控制点
		private var _point1:Point;
		private var _point2:Point;
		private var _point3:Point;
		
		private var _text1:TextField;
		private var _text2:TextField;
		private var _text3:TextField;
		
		private var _lineShape:Shape;
		private var _cirCleShape:Shape;
		
		public function DrawBezierCurve()
		{
			init();
		}
		
		private function init():void
		{
			_point1 = new Point(200,500);
			_point2 = new Point(800,500);
			_point3 = new Point();
			//三个文本框标出三个点
			_text1 = new TextField();
			_text2 = new TextField();
			_text3 = new TextField();
			
			this.addChild(_text1);
			this.addChild(_text2);
			this.addChild(_text3);
			
			_text1.text = "(x1,y1)";
			_text2.text = "(x2,y2)";
			_text3.text = "(x3,y3)";
			
			_text1.x = _point1.x - 30;
			_text1.y = _point1.y + 10;
			_text2.x = _point2.x - 30;
			_text2.y = _point2.y + 10;
			
			_lineShape = new Shape();
			this.addChild(_lineShape);
			
			_cirCleShape = new Shape();
			this.addChild(_cirCleShape);
			stage.addEventListener(MouseEvent.MOUSE_MOVE,onHandleMove);
			stage.addEventListener(MouseEvent.CLICK,onHandleClick);
			
			drawCurve(500,500,false);//鼠标进入舞台前初始化
			
		}
		private function onHandleClick(e:MouseEvent):void
		{
			drawCurve(mouseX,mouseY,true);
		}
		private function onHandleMove(e:MouseEvent):void
		{
			//鼠标移动来控制第三个点
			drawCurve(mouseX,mouseY,false);
		}
		private function drawCurve($x:Number,$y:Number,$isClick:Boolean):void
		{
			_lineShape.graphics.clear();
			_cirCleShape.graphics.clear();
			_lineShape.graphics.lineStyle(1,0x000000,0.5);//定义线的样式
			
			_point3.x = $x;
			_point3.y = $y;
			
			_text3.x = _point3.x - 30;
			_text3.y = _point3.y + 10;
			
			_cirCleShape.graphics.lineStyle(1,0xffffff,0.5);
			_cirCleShape.graphics.drawCircle(this._point1.x,this._point1.y,5);
			_cirCleShape.graphics.drawCircle(this._point2.x,this._point2.y,5);
			_cirCleShape.graphics.drawCircle(this._point3.x,this._point3.y,5);
			
			_lineShape.graphics.moveTo(this._point1.x,this._point1.y);
			_lineShape.graphics.lineTo($x,$y);
			_lineShape.graphics.moveTo(this._point2.x,this._point2.y);
			_lineShape.graphics.lineTo($x,$y);
			_lineShape.graphics.lineStyle(1,0xff0000,1);//定义线的样式
			_lineShape.graphics.moveTo(this._point1.x,this._point1.y);
			//curveTo(controlX:Number, controlY:Number, anchorX:Number, anchorY:Number)
			//curveTo参数中第一个点是控制点，也就是中间那个点，第二个点是结束点，也就是最后一个点
			//moveTo指的是起始点，也就是这里的第一个点，如果在调用 moveTo() 方法之前调用 curveTo() 方法，则当前绘画位置默认为 (0,0)。
			if(!$isClick)
			{
				_lineShape.graphics.curveTo($x,$y,this._point2.x,this._point2.y);
				return;
			}
			//如果想真正的经过鼠标点，还要做一下修正（即要把控制点人为抬高或降低一些）:
			_lineShape.graphics.curveTo(($x*2 - (this._point1.x+this._point2.x)*0.5),($y*2 - (this._point1.y+this._point2.y)*0.5),this._point2.x,this._point2.y);
			
		}
		//一段曲线通常包含三个点：起点(x1,y1)，控制点(x3,y3)，终点(x2,y2)；也许大家也看出来了：该曲线最终并不经过鼠标所在的点(x3,y3)，在y轴方向上，曲线最大高度只有鼠标相对高度的一半，如果想真正的经过鼠标点，
		//还要做一下修正（即要把控制点人为抬高或降低一些）:
		//修正公式为：新坐标 = 目标点坐标 * 2 - (起点坐标+终点坐标)/2
	}
}

程序中鼠标点击舞台，曲线就会通过控制点。效果图如下

 

　参考网址：http://www.cnblogs.com/yjmyzz/archive/2010/04/01/1702576.html

转载于:https://www.cnblogs.com/chen-mo/p/4800780.html