《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 circle
controlPoint.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();
}

}

}

输出结果：