`

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

阅读更多

可以拖动 控制的 曲线:

代码如下:

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

 

3
0
分享到:
评论

相关推荐

    使用delphi演示贝塞尔曲线的绘制

    接着,可以调用Graphics.TPath.AddBezier方法,传入起点、两个控制点和终点的坐标,来添加一条三次贝塞尔曲线。最后,使用Graphics.TGraphics.DrawPath方法,指定画笔和颜色,将路径绘制到窗体上。 以下是一个简单...

    三次贝塞尔曲线样条曲线和图像曲线调整

    三次贝塞尔曲线样条曲线是计算机图形学中广泛使用的一种曲线表示方法,尤其在图像处理和曲线设计领域具有重要作用。这种曲线由四个控制点定义,包括起点、终点以及两个中间控制点,通过线性组合权重来形成平滑的连续...

    C#由直线、曲线创建图形

    - 贝塞尔曲线:`Graphics.DrawBezier()`用于绘制三次贝塞尔曲线,需要四个控制点和一个Pen对象。 - 弧线和圆:`Graphics.DrawArc()`绘制弧线,`Graphics.DrawEllipse()`绘制椭圆或圆形。弧线需要椭圆的边界矩形和...

    安卓Android源码——安卓画曲线图代码.zip

    如果需要绘制平滑的曲线,可以使用贝塞尔曲线,通过`Path.quadTo()`或`Path.cubicTo()`方法。 5. **设置Paint属性** `Paint`对象用于设置线条的颜色、宽度、样式(实线、虚线等)、抗锯齿效果等。例如,`setColor...

    C# 高仿 Windows 画图板

    - 圆角矩形:需要自定义路径,使用`Graphics.DrawPath`,在路径中包含四个贝塞尔曲线来形成圆角。 4. **画刷和画笔**: - 画刷(Brush)用于填充形状内部,如SolidBrush、 HatchBrush等,可以设置颜色和样式。 -...

    C# Winform画图板 ,实现图片的打开/保存/文字绘制/矩形/圆形/椭圆形

    可以利用贝塞尔曲线或者其他曲线算法来实现。 7. **取色功能**: - 通过创建一个取色器控件,用户可以选取画布上的颜色。这通常涉及到`ColorDialog`类,它可以显示一个颜色选择对话框,并获取用户选择的颜色。 8....

    DrawPathTest Demo代码

    在iOS开发中,"DrawPathTest Demo代码" 是一个典型的示例项目,它演示了如何在iOS应用中使用图形上下文(Graphics Context)和Core Graphics框架来绘制自定义的路径。Core Graphics是苹果的底层2D绘图系统,支持矢量...

    arrow_qt画箭头_QT_箭头_

    `drawPolygon()`允许你指定一系列点来绘制一个多边形,而`drawPath()`则可以构建更复杂的路径,包括曲线和贝塞尔曲线,从而创建更精细的箭头设计。 3. **颜色和线型**: 使用`setPen()`函数可以设置线条的颜色、...

    8.图形和图像编程(一).rar

    2. **路径绘制**:GDI+允许创建复杂的路径,由直线、曲线和贝塞尔曲线组成。Path类用于存储这些路径,DrawPath方法则将路径绘制到屏幕上。 3. **文本渲染**:GDI+提供Font类和StringFormat类来控制文本的显示。你...

    VB计算机图形编程源程序

    通过`AddLine`, `AddArc`, `AddBezier`等方法添加路径元素,然后用`DrawPath`方法绘制。 6. **文本绘制**:使用`DrawString`方法可以在指定位置绘制文本,需要提供文本内容、字体、颜色和位置。 7. **图像操作**:...

    GDI+ 的 13个学习 示例

    5. **路径绘图**:`GraphicsPath`类允许创建复杂的曲线和形状,如贝塞尔曲线、多边形等。结合`Graphics`的`DrawPath`方法,可以实现自定义的图形绘制。 6. **文本渲染**:GDI+提供`Font`、`FontFamily`和`...

    制作无规则控件代码

    例如,可以使用`Graphics.DrawPath`方法结合`Pen`对象来绘制贝塞尔曲线或其他自由形状。 3. **处理鼠标事件**:为了让无规则控件响应用户的点击和拖动,我们需要覆盖`OnMouseDown`、`OnMouseMove`和`OnMouseUp`等...

Global site tag (gtag.js) - Google Analytics