Dashed Lines For AS3
Demo – Click to draw.
For a recent project I was looking into solutions to draw a dashed line with Flash in AS3.
Most 2D canvas implementations include such a line style, not so flash. I stumbled upon many
diverting solutions, where some where implemented using bitmap tiles to draw the line parts,
which is awfull. Luckily one of the first search results brought me to the DashedLine class by Andy Woodruff.
A very neat solution which also resolves correctly drawn corners.
Unfortunately the class was too unflexible for my purpose and like many other solutions it is heavy weight by being a complete sprite decendant, including two shapes for drawing. So I refactored it to be more of a drawing helper.
I also removed most of the comments, because the code speaks for itself and good code does not need inline comments.
But that’s another topic.
Anyway, here is an example of its usage:
var canvas:Shape = new Shape();
DashedLine.moveTo(canvas.graphics, -50, 50);
DashedLine.lineTo(canvas.graphics, 50, 50);
DashedLine.lineTo(canvas.graphics, 0, -50);
DashedLine.lineTo(canvas.graphics, -50, 50);
This actually draws a little triangle with default line settings. The parameter for the line style is the same
as in the original, except that it is set by DashedLine.setDashes() which takes an Array specifying the dash/gap lengths
in the infinite format [dash,gap,...,dash,gap]. Play with the dash format textfield in the demo.
I moved the class to my public as3components repository, which also includes the demo
and is availible at http://www.github.com/kommander/as3components