Drawing lines and curves
All drawing that you do with a Graphics instance is based on basic drawing with lines and curves. Consequently, all Haxe-based drawing must be performed using the same series of steps:
- Define line and fill styles
- Set the initial drawing position
- Draw lines, curves, and shapes (optionally moving the drawing point)
- If necessary, finish creating a fill
Defining line and fill styles
To draw with the
graphics property of a Shape, Sprite, or MovieClip instance, you must first define the style (line size and color, fill color) to use when drawing. Just like when you use the drawing tools in Adobe® Flash® Professional or another drawing application, when you’re using Haxe code to draw you can draw with or without a stroke, and with or without a fill color. You specify the appearance of the stroke using the
lineGradientStyle() method. To create a solid line, use the
lineStyle() method. When calling this method, the most common values you’ll specify are the first three parameters:
alpha. For example, this line of code tells the Shape named
myShape to draw lines that are 2 pixels thick, red (0x990000), and 75% opaque:
myShape.graphics.lineStyle (2, 0x990000, .75);
The default value for the
alpha parameter is 1.0 (100%), so you can leave that parameter off if you want a completely opaque line. The
lineStyle() method also accepts two additional parameters for pixel hinting and scale mode; for more information about using those parameters see the description of the
Graphics.lineStyle() method in the API Reference).
To create a gradient line, use the
lineGradientStyle() method. This method is described in Creating gradient lines and fills.
If you want to create a filled shape, you call the
beginShaderFill() methods before starting the drawing. The most basic of these, the
beginFill() method, accepts two parameters: the fill color, and (optionally) an alpha value for the fill color. For example, if you want to draw a shape with a solid green fill, you would use the following code (assuming you’re drawing on an object named
Calling any fill method implicitly ends any previous fill before starting a new one. Calling any method that specifies a stroke style replaces the previous stroke, but does not alter a previously specified fill, and vice versa.
Once you have specified the line style and fill properties, the next step is to indicate the starting point for your drawing. The Graphics instance has a drawing point, like the tip of a pen on a piece of paper. Wherever the drawing point is located, that is where the next drawing action will begin. Initially a Graphics object begins with its drawing point at the point 0, 0 in the coordinate space of the object on which it’s drawing. To start the drawing at a different point, you can first call the
moveTo() method before calling one of the drawing methods. This is analogous to lifting the pen tip off of the paper and moving it to a new position.
With the drawing point in place you draw using a series of calls to the drawing methods
lineTo() (for drawing straight lines) and
curveTo() (for drawing curved lines).
While you are drawing, you can call the
moveTo() method at any time to move the drawing point to a new position without drawing.
While drawing, if you have specified a fill color, you can close off the fill by calling the
endFill() method. If you have not drawn a closed shape (in other words, if at the time you call
endFill() the drawing point is not at the starting point of the shape), when you call the
endFill() method OpenFL automatically closes the shape by drawing a straight line from the current drawing point to the location specified in the most recent
moveTo() call. If you have started a fill and not called
beginFill() (or one of the other fill methods) closes the current fill and starts the new one.
Drawing straight lines
When you call the
lineTo() method, the Graphics object draws a straight line from the current drawing point to the coordinates you specify as the two parameters in the method call, drawing with the line style you have specified. For example, this line of code puts the drawing point at the point 100, 100 then draws a line to the point 200, 200:
myShape.graphics.moveTo (100, 100); myShape.graphics.lineTo (200, 200);
The following example draws red and green triangles with a height of 100 pixels:
var triangleHeight = 100; var triangle = new Shape (); // red triangle, starting at point 0, 0 triangle.graphics.beginFill (0xFF0000); triangle.graphics.moveTo (triangleHeight / 2, 0); triangle.graphics.lineTo (triangleHeight, triangleHeight); triangle.graphics.lineTo (0, triangleHeight); triangle.graphics.lineTo (triangleHeight / 2, 0); // green triangle, starting at point 200, 0 triangle.graphics.beginFill (0x00FF00); triangle.graphics.moveTo (200 + triangleHeight / 2, 0); triangle.graphics.lineTo (200 + triangleHeight, triangleHeight); triangle.graphics.lineTo (200, triangleHeight); triangle.graphics.lineTo (200 + triangleHeight / 2, 0); this.addChild (triangle);
curveTo() method draws a quadratic Bézier curve. This draws an arc that connects two points (called anchor points) while bending toward a third point (called the control point). The Graphics object uses the current drawing position as the first anchor point. When you call the
curveTo() method, you pass four parameters: the x and y coordinates of the control point, followed by the x and y coordinates of the second anchor point. For example, the following code draws a curve starting at point 100, 100 and ending at point 200, 200. Because the control point is at point 175, 125, this creates a curve that moves to the right and then downward:
myShape.graphics.moveTo (100, 100); myShape.graphics.curveTo (175, 125, 200, 200);
The following example draws red and green circular objects with a width and height of 100 pixels. Note that due to the nature of the quadratic Bézier equation, these are not perfect circles:
var size = 100; var roundObject = new Shape (); // red circular shape roundObject.graphics.beginFill (0xFF0000); roundObject.graphics.moveTo (size / 2, 0); roundObject.graphics.curveTo (size, 0, size, size / 2); roundObject.graphics.curveTo (size, size, size / 2, size); roundObject.graphics.curveTo (0, size, 0, size / 2); roundObject.graphics.curveTo (0, 0, size / 2, 0); // green circular shape roundObject.graphics.beginFill (0x00FF00); roundObject.graphics.moveTo (200 + size / 2, 0); roundObject.graphics.curveTo (200 + size, 0, 200 + size, size / 2); roundObject.graphics.curveTo (200 + size, size, 200 + size / 2, size); roundObject.graphics.curveTo (200, size, 200, size / 2); roundObject.graphics.curveTo (200, 0, 200 + size / 2, 0); this.addChild (roundObject);