GraphicsUtil. A Utility Class for Drawing Arrows

I recently had need of an arrow drawing function in Flash which I wanted to use to annotate diagrams. I was unable to find one through Google that suited my needs, so I decided to roll my own Actionscript class for drawing arrows. I tried to keep the arrow drawing interface easy to use but flexible. It draws a clean vector outline of the arrow, so you can use the graphics.lineStyle and graphics.beginFill to set the color styles.

Figure 1. A sample of the various styles of arrow that can be easily created with GraphicsUtil.drawArrow

Creating a Simple Arrow

You need only provide a graphics instance as well as the start and end points of the arrow. The GraphicsUtil class can handle the rest. This is the simplest arrow you can draw. It will take on whatever lineStyle and fill properties you set on the graphics instance and basically functions similarly the graphics.drawRect and graphics.drawCircle.

Code Sample 1. The simplest use case for GraphicsUtil.drawArrow

import com.dncompute.graphics.GraphicsUtil;

//Create a display object to draw into and set the colors
var shape:Shape = new Shape();
shape.graphics.lineStyle(1,0x000000);
shape.graphics.beginFill(0x999999);

//Draw an arrow from 30,30 to 100,100
GraphicsUtil.drawArrow(
		shape.graphics,
		new Point(30,30),new Point(100,100)
		);

Figure 2. The Actionscript shown in Code Sample 1 will generate this arrow; it is the default arrow that will be created if you don’t pass any styling parameters.

Styling the Arrow

If you need to customize the look of the arrow, you can do so in Actionscript by passing in a style object. This can be done using the shorthand generic object notation (i.e., an associate array). You can also style the arrow using the more OOP friendly method of creating an instance of the ArrowStyle class.

Code Sample 2a. Shorthand Styling Using Object Notation

import com.dncompute.graphics.GraphicsUtil;
import flash.display.Shape;

//Create a display object to draw into and set the colors
var shape:Shape = new Shape();
shape.graphics.lineStyle(1,0x999999);
shape.graphics.beginFill(0x000000);

//Draw an arrow from 30,30 to 100,100
GraphicsUtil.drawArrow(shape.graphics,
		new Point(30,30),new Point(100,100),
		{shaftThickness:5,headWidth:40,headLength:60,
		shaftPosition:.25,edgeControlPosition:.75}
		);

Code Sample 2b. Style Using the ArrowStyle Class

import com.dncompute.graphics.GraphicsUtil;
import com.dncompute.graphics.ArrowStyle;

//Create a display object to draw into and set the colors
var shape:Shape = new Shape();
shape.graphics.lineStyle(1,0x999999);
shape.graphics.beginFill(0x000000);

//Set the arrow style
var style:ArrowStyle = new ArrowStyle();
style.shaftThickness = 5;
style.headWidth = 40;
style.headLength = 60;
style.shaftPosition = .25;
style.edgeControlPosition = .75;

//Draw an arrow from 30,30 to 100,100
GraphicsUtil.drawArrow(shape.graphics,
		new Point(30,30),new Point(100,100),
		style
		);

Figure 3. The Actionscript in Code Sample 2a and 2b will generate the same styled arrow you see here.

Arrow Style Editor

While it’s relatively easy to style the arrows, the style parameters may seem unintuitive at first. To help alleviate any confusion, I’ve provided the following arrow style generator which will allow you to interactively create an arrow style and print out the generated code. You can also use the “randomize” button to morph the shape into a randomly styled arrow.

The drawArrow method uses a line intersection function based on Erik Gustavsson’s tutorial and sample code. I recommend Mr. Gustavsson’s tutorial if you are interested in the math involved in drawing the arrow outline.