Chapter 1 Study Notes of image effects (3)

In the previous section, this book explains how to use API functions to draw a straight line. Next, the author introduces the curve painting method. Therefore, we need to understand the API functions of the curve.

When we want to draw a curve between two points, we can use the curveto function to draw a curve. See what the parameters are.

Curveto (controlx: Number, controly: Number, anchorx: Number, anchory: Number): void <br/> use the current line style and by (controlx, controly) the specified control point draws a curve from the current painting position to the end of (anchorx, anchory.

This function contains four parameters. From the control point to another new point. A curve can be drawn between two points.

We can use Adobe Illustrator to draw some special lines.

 

Through this function, the author has compiled an example to explain the application of this curve. Good results. His ideas are simple.

Two anchor points and one control point are achieved by simulating a secondary besell curve. For this purpose, the author creates three sprite objects, each of which contains vertices. Link the three sprite objects to lineto. Click and release the listener for each vertex. And listen for mouse movement. In this way, when you move the cursor over the drawing point, you can achieve a secondary besell curve effect similar to that of illustrator.

 

Look, this book is a source code.

Package {</P> <p> Import flash. display. sprite; <br/> Import flash. events. mouseevent; </P> <p> [SWF (width = 550, Height = 400, backgroundcolor = 0 xffffff)] </P> <p>/** <br/> * demonstrates the quadtratic curve of the drawing API, <br/> * allowing user to Drag Control Point and anchors. <br/> */</P> <p> // This is the program used to draw the curve, simulate a secondary besell curve <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 ); // Add a control point <br/> _ anchor1 = addcontrolpoint (500,300); // Add a control point <br/> _ controlpoint = addcontrolpoint (275,100 ); <br/> drawcurve (); <br/>}</P> <p>/** <br/> * adds a draggable control point to the stage. <br/> * @ Param x the X position of the control point. <br/> * @ Param y the Y position of the control point. <br/> * @ return the sprite instance representing the control point. <br/> */<br/> // use a Sprite object to draw a separate vertex and listen for mouse-down and release. <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/> // draw a curve and connect each vertex. <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/> * @ Param event dispatched by Control Point Sprite. <br/> */<br/> // start dragging <br/> private function oncontroldown (Event: mouseevent): void {<br/> (event.tar get 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/> * @ Param event dispatched by Control Point Sprite. <br/> */<br/> // when the mouse is released, delete the mobile listener and stop dragging. <br/> private function oncontrolup (Event: mouseevent ): void {<br/> (event.tar get 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/> * @ Param event dispatched by stage. <br/> */<br/> // when the mouse moves, draw lines from the points at both ends of the curve <br/> private function oncontrolmove (Event: mouseevent ): void {<br/> drawcurve (); <br/> event. updateafterevent (); <br/>}</P> <p>}

 

Output result: