《Image Effects 》第一章學習筆記（3）

   上一個部分裡面，這本書裡面講解了怎樣使用API函數繪製一條直線。而接下來，作者介紹了曲線的畫法。因此，接下來我們需要瞭解曲線的API函數了。

   當我們希望在兩點之間裡面繪製一條曲線，那麼我們可以通過使用curveTo 這個函數來繪製曲線了。看看裡面的參數是怎樣

curveTo(controlX:Number, controlY:Number, anchorX:Number, anchorY:Number):void<br />使用當前線條樣式和由 (controlX, controlY) 指定的控制點繪製一條從當前繪畫位置開始到 (anchorX, anchorY) 結束的曲線。

這個函數裡面一共帶有四個參數。從控制點，到另外一個新的點。兩點之間可以實現一條曲線描繪。

我們使用adobe Illustrator 一定不會陌生塞爾曲線，你能利用塞爾曲線繪製一些特別的線條。

 

通過了這個函數講解，作者編寫了一個例子講解這個曲線的應用。效果很不錯。他的思路都很簡單

仿造 二次方貝茲曲線實現兩個錨點和一個控制點。 從這個目的出發，作者建立三Sprite對象，每一個Sprit對象裡面，描點。將三Sprite對象進行lineTo 連線。通過對每一個點進行監聽按下和鬆開的監聽。並對滑鼠移動進行監聽。這樣當滑鼠拖動移動描點的時候，就能夠實現一個類似 Illustrator 使用 二次方貝茲曲線效果了。

 

看看，這本書一個源碼。

package {</p><p>import flash.display.Sprite;<br />import flash.events.MouseEvent;</p><p>[SWF(width=550, height=400, backgroundColor=0xFFFFFF)]</p><p>/**<br />* Demonstrates the quadtratic curve of the drawing API,<br />* allowing user to drag control point and anchors.<br />*/</p><p>//這個是繪製曲線的程式，仿造二次方貝茲曲線<br />public class DrawingCurves extends Sprite {</p><p>private var _controlPoint:Sprite;<br />private var _anchor0:Sprite;<br />private var _anchor1:Sprite;</p><p>/**<br />* Constructor. Creates anchors and control point and draws initial curve.<br />*/<br />public function DrawingCurves() {<br />_anchor0 = addControlPoint(50, 300);//添加一個控制點<br />_anchor1 = addControlPoint(500, 300);//添加一個控制點<br />_controlPoint = addControlPoint(275, 100);<br />drawCurve();<br />}</p><p>/**<br />* Adds a draggable control point to the stage.<br />*<br />* @param x The x position of the control point.<br />* @param y The y position of the control point.<br />*<br />* @return The Sprite instance representing the control point.<br />*/<br />//通過sprite對象來繪製一個單獨的點，並且進行滑鼠按下和鬆開的監聽<br />private function addControlPoint(x:Number, y:Number):Sprite {<br />var controlPoint:Sprite = new Sprite();<br />// draw a big stroke thickness with little length to create a circle<br />controlPoint.graphics.lineStyle(20);<br />controlPoint.graphics.lineTo(1, 0);<br />controlPoint.addEventListener(MouseEvent.MOUSE_DOWN, onControlDown);<br />controlPoint.addEventListener(MouseEvent.MOUSE_UP, onControlUp);<br />controlPoint.x = x;<br />controlPoint.y = y;<br />addChild(controlPoint);<br />return controlPoint;<br />}</p><p>/**<br />* Redraws the curve based on the current position of the points.<br />*/<br />//繪製一條曲線,並且將每一個點進行連線<br />private function drawCurve():void {<br />graphics.clear();<br />graphics.lineStyle(3, 0xFF);<br />graphics.moveTo(_anchor0.x, _anchor0.y);<br />graphics.curveTo(_controlPoint.x, _controlPoint.y, _anchor1.x, _anchor1.y);<br />graphics.lineStyle(1, 0, .5);<br />graphics.lineTo(_controlPoint.x, _controlPoint.y);<br />graphics.lineTo(_anchor0.x, _anchor0.y);<br />}</p><p>/**<br />* Handler for when a control point or anchor is clicked.<br />* This begins the drag of the point and forces a draw update on move.<br />*<br />* @param event Event dispatched by control point sprite.<br />*/<br />//開始拖動<br />private function onControlDown(event:MouseEvent):void {<br />(event.target as Sprite).startDrag();<br />stage.addEventListener(MouseEvent.MOUSE_MOVE, onControlMove);<br />}</p><p>/**<br />* Handler for when a control point or anchor is released.<br />* This stops the drag and removes the MOUSE_MOVE listener.<br />*<br />* @param event Event dispatched by control point sprite.<br />*/<br />//當滑鼠鬆開的時候，刪除移動監聽的和停止拖動<br />private function onControlUp(event:MouseEvent):void {<br />(event.target as Sprite).stopDrag();<br />stage.removeEventListener(MouseEvent.MOUSE_MOVE, onControlMove);<br />}</p><p>/**<br />* Handler for when a control point or anchor is dragged.<br />* This forces a redraw of the curve.<br />*<br />* @param event Event dispatched by stage.<br />*/<br /> //當滑鼠移動的時候，那麼曲線兩端點開始畫線<br />private function onControlMove(event:MouseEvent):void {<br />drawCurve();<br />event.updateAfterEvent();<br />}</p><p>}</p><p>}

 

輸出結果：