《Image Effects 》第一章学习笔记（3）

   上一个部分里面，这本书里面讲解了怎样使用API函数绘制一条直线。而接下来，作者介绍了曲线的画法。因此，接下来我们需要了解曲线的API函数了。

   当我们希望在两点之间里面绘制一条曲线，那么我们可以通过使用curveTo 这个函数来绘制曲线了。看看里面的参数是怎样

curveTo(controlX:Number, controlY:Number, anchorX:Number, anchorY:Number):void 使用当前线条样式和由 (controlX, controlY) 指定的控制点绘制一条从当前绘画位置开始到 (anchorX, anchorY) 结束的曲线。

这个函数里面一共带有四个参数。从控制点，到另外一个新的点。两点之间可以实现一条曲线描绘。

我们使用adobe Illustrator 一定不会陌生塞尔曲线，你能利用塞尔曲线绘制一些特别的线条。

 

通过了这个函数讲解，作者编写了一个例子讲解这个曲线的应用。效果很不错。他的思路都很简单

仿造 二次贝塞尔曲线实现两个锚点和一个控制点。 从这个目的出发，作者创建三Sprite对象，每一个Sprit对象里面，描点。将三Sprite对象进行lineTo 连线。通过对每一个点进行监听按下和松开的监听。并对鼠标移动进行监听。这样当鼠标拖动移动描点的时候，就能够实现一个类似 Illustrator 使用 二次贝塞尔曲线效果了。

 

看看，这本书一个源码。

package {import flash.display.Sprite;import flash.events.MouseEvent;[SWF(width=550, height=400, backgroundColor=0xFFFFFF)]/*** Demonstrates the quadtratic curve of the drawing API,* allowing user to drag control point and anchors.*///这个是绘制曲线的程序，仿造二次贝塞尔曲线public class DrawingCurves extends Sprite {private var _controlPoint:Sprite;private var _anchor0:Sprite;private var _anchor1:Sprite;/*** Constructor. Creates anchors and control point and draws initial curve.*/public function DrawingCurves() {_anchor0 = addControlPoint(50, 300);//添加一个控制点_anchor1 = addControlPoint(500, 300);//添加一个控制点_controlPoint = addControlPoint(275, 100);drawCurve();}/*** Adds a draggable control point to the stage.** @param x The x position of the control point.* @param y The y position of the control point.** @return The Sprite instance representing the control point.*///通过sprite对象来绘制一个单独的点，并且进行鼠标按下和松开的监听private function addControlPoint(x:Number, y:Number):Sprite {var controlPoint:Sprite = new Sprite();// draw a big stroke thickness with little length to create a circlecontrolPoint.graphics.lineStyle(20);controlPoint.graphics.lineTo(1, 0);controlPoint.addEventListener(MouseEvent.MOUSE_DOWN, onControlDown);controlPoint.addEventListener(MouseEvent.MOUSE_UP, onControlUp);controlPoint.x = x;controlPoint.y = y;addChild(controlPoint);return controlPoint;}/*** Redraws the curve based on the current position of the points.*///绘制一条曲线,并且将每一个点进行连线private function drawCurve():void {graphics.clear();graphics.lineStyle(3, 0xFF);graphics.moveTo(_anchor0.x, _anchor0.y);graphics.curveTo(_controlPoint.x, _controlPoint.y, _anchor1.x, _anchor1.y);graphics.lineStyle(1, 0, .5);graphics.lineTo(_controlPoint.x, _controlPoint.y);graphics.lineTo(_anchor0.x, _anchor0.y);}/*** Handler for when a control point or anchor is clicked.* This begins the drag of the point and forces a draw update on move.** @param event Event dispatched by control point sprite.*///开始拖动private function onControlDown(event:MouseEvent):void {(event.target as Sprite).startDrag();stage.addEventListener(MouseEvent.MOUSE_MOVE, onControlMove);}/*** Handler for when a control point or anchor is released.* This stops the drag and removes the MOUSE_MOVE listener.** @param event Event dispatched by control point sprite.*///当鼠标松开的时候，删除移动监听的和停止拖动 private function onControlUp(event:MouseEvent):void {(event.target as Sprite).stopDrag();stage.removeEventListener(MouseEvent.MOUSE_MOVE, onControlMove);}/*** Handler for when a control point or anchor is dragged.* This forces a redraw of the curve.** @param event Event dispatched by stage.*/ //当鼠标移动的时候，那么曲线两端点开始画线private function onControlMove(event:MouseEvent):void {drawCurve();event.updateAfterEvent();}}}

 

输出结果：