现在的位置: 首页 > 综合 > 正文

用Graphics的 drawPath 来画曲线(2)–可拖动 控制 变形的贝塞尔曲线

2013年02月18日 ⁄ 综合 ⁄ 共 2609字 ⁄ 字号 评论关闭

可以拖动 控制的 曲线:

代码如下:

package
{
	import flash.display.GraphicsPathCommand;
	import flash.display.Sprite;
	import flash.events.MouseEvent;
	public class drawCurveLine0 extends Sprite
	{
		public function drawCurveLine0()
		{
			super();
			lineContainer=new Sprite();
			addChild(lineContainer);

			anchorContainer=new Sprite();
			addChild(anchorContainer);

			anchorVector.push(200, 200); //起点
			anchorVector.push(250, 100); //控制点1
			anchorVector.push(300, 200); //节点2
			anchorVector.push(400, 250); //控制点2
			anchorVector.push(300, 300);
			anchorVector.push(250, 400);
			anchorVector.push(200, 300);
			anchorVector.push(100, 250);
			anchorVector.push(200, 200);

			commandVector.push(GraphicsPathCommand.MOVE_TO);

			commandVector.push(GraphicsPathCommand.CURVE_TO); //样式:曲线
			commandVector.push(GraphicsPathCommand.CURVE_TO);
			commandVector.push(GraphicsPathCommand.CURVE_TO);
			commandVector.push(GraphicsPathCommand.CURVE_TO);
			//创建控制点按钮 anchorVector的长度是18,共有9个点 
			//例如 第3个点的 x坐标:anchorVector[3*2], y坐标:anchorVector[3*2+1]
			var numOfAnchor:uint=anchorVector.length / 2;
			for (var i:uint=0; i < numOfAnchor; i++)
			{
				var color:uint=(i % 2) ? 0x0000FF : 0xFF0000;//索引为奇数的是控制点 画成蓝色
				var anchor:Anchor=new Anchor(i, color);
				anchor.x=anchorVector[i * 2];
				anchor.y=anchorVector[i * 2 + 1];
				anchor.addEventListener(MouseEvent.MOUSE_DOWN, anchor_MouseDownHandler);
				anchor.addEventListener(MouseEvent.MOUSE_UP, anchor_MouseUpHandler);
				anchorContainer.addChild(anchor);
			}
			//画线
			 lineDraw();
		}
		private var anchorContainer:Sprite; //控制点容器
		private var anchorVector:Vector.<Number>=new Vector.<Number>(); //节点数组
		private var commandVector:Vector.<int>=new Vector.<int>(); //线型数组
		private var currentAnchor:Anchor; //当前选中控制点
		private var lineContainer:Sprite; //曲线画布
		/** *根据节点和线型 重绘  * */       
		public function lineDraw():void
		{
			lineContainer.graphics.clear();
			lineContainer.graphics.lineStyle(0, 0x000000);
			lineContainer.graphics.drawPath(commandVector, anchorVector); //画路径
			lineContainer.graphics.endFill();
		}
		/** *鼠标选中控制点,启动控制点的拖动,触发move事件从而重画曲线*/
		private function anchor_MouseDownHandler(event:MouseEvent):void
		{
			currentAnchor=Anchor(event.target);
			currentAnchor.startDrag();
			stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
		}
		private function anchor_MouseUpHandler(event:MouseEvent):void
		{
			currentAnchor.stopDrag();
			stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
		}

		/** 鼠标拖动控制点时重画  */
		private function mouseMoveHandler(e:MouseEvent):void
		{
			var idx:uint=currentAnchor.idx;
			anchorVector[idx * 2]=currentAnchor.x;
			anchorVector[idx * 2 + 1]=currentAnchor.y;
			lineDraw(); 
		}
	}


}
 import flash.display.Sprite;
class Anchor extends Sprite 
{
	public function Anchor(idx:uint, color:uint=0xFF0000)
	{
		_idx=idx;
		graphics.beginFill(color, 0.5);
		graphics.drawCircle(0, 0, 10);
		graphics.endFill();
		buttonMode=true;
	}
	private var _idx:uint;
	public function get idx():uint
	{
		return _idx;
	}
}

 

 

抱歉!评论已关闭.