Drawing a dashed line using the AS3 drawing API

image warp

I was surprised recently to learn that the actionscript drawing api did not include a dashed-line style in the options. Well not to worry, drawing a dashed line is fairly straightforward. You just need to calculate the distance between each drawing points and divide it by the gap space. Then use a loop to draw multiple lines between the points, toggling the alpha to 0 or 1 on each iteration. Its not pixel perfect or anything, but its a relatively painless solution.

Checkout the example below to see it in action.

Dashed Line

This movie requires Flash Player 10

source

package {
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;

	/**
	 * @author Phil
	 */
	public class DashedLine extends Sprite {
		private var _lineThickness : Number = 1;
		private var _lineColor : uint = 0xFFFFFF;
		private var _dashSpace : Number = 5;

		public function DashedLine() {
			stage.align = StageAlign.TOP_LEFT
			stage.scaleMode = StageScaleMode.NO_SCALE
			graphics.beginFill(0x000000, 1)
			graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight)
			graphics.endFill();
			var data : Array = getPoints()
			var px : Number;
			var py : Number;
			var draw : Boolean = true;
			// main drawing loop
			for(var i : int = 0;i < data.length;i++) {
				var x : Number = data[i][0]
				var y : Number = data[i][1]
				if(i == 0) {
					graphics.moveTo(x, y)
				} else {
					var dx : Number = x - px;
					var dy : Number = y - py;
					var distance : Number = Math.sqrt(dx * dx + dy * dy);
					// calculate the number of dashed to draw based on the distance between each point
					// always draw at least 1 line
					var loops : int = Math.max(1, Math.floor(distance / _dashSpace))
					// dash drawing loop
					for (var j : int = 0;j < loops;j++) {
						var alpha : Number = draw ? 1 : 0; // toggle the alpha on and off for each dash iteration
						draw = !draw;
						graphics.lineStyle(_lineThickness, _lineColor, alpha)
						var a : Number = j / loops;
						graphics.lineTo(px + (dx * a), py + (dy * a))
					}
				}
				// complete the last line
				if(i == data.length - 1) {
					graphics.lineStyle(_lineThickness, _lineColor, 1)
					graphics.lineTo(x, y)
				}
				// save the previous position
				px = x
				py = y
			}
		}

		public function getPoints() : Array {
			var points : Array = [];
			points.push([100,300]);
			points.push([78.8,168.43990319999997]);
			points.push([88.64999999999999,167.8654816]);
			points.push([98.5,161.76375440000004]);
			points.push([108.35,159.4435878]);
			points.push([118.2,157.12367460000002]);
			points.push([128.05,161.7856192]);
			points.push([137.9,157.13815460000004]);
			points.push([147.75,150.45462099999997]);
			points.push([157.6,150.170813]);
			points.push([167.45,154.25098739999999]);
			points.push([177.29999999999998,151.93103799999997]);
			points.push([187.14999999999998,153.9744918]);
			points.push([197,153.4000702]);
			points.push([206.85,110.37080679999997]);
			points.push([216.7,130.17818400000002]);
			points.push([226.55,134.694658]);
			points.push([236.4,142.08358819999995]);
			points.push([246.25,138.89092920000002]);
			points.push([256.1,135.9892458]);
			points.push([265.95,133.0872366]);
			points.push([275.8,128.14915839999998]);
			points.push([285.65,123.79263320000001]);
			points.push([295.5,119.7267578]);
			points.push([305.35,117.2756667324]);
			points.push([315.2,50.82457562860003]);
			points.push([325.05,70.35882340200001]);
			points.push([334.9,90.44433818999997]);
			points.push([344.75,106.4859321994]);
			points.push([354.59999999999997,107.48357411719999]);
			points.push([364.45000000000005,106.0178218906]);
			points.push([374.29999999999995,104.05938458700001]);
			points.push([384.15000000000003,99.6382731932]);
			points.push([394,96.6944970124]);
			points.push([403.85,95.22874478580002]);
			points.push([413.7,92.77765371819999]);
			points.push([423.55,90.81921641459996]);
			points.push([433.4,87.87544023380002]);
			points.push([443.25,84.93169536599999]);
			points.push([453.1,84.94396709360001]);
			points.push([462.95,81.50750583580003]);
			points.push([472.8,77.08570573699996]);
			points.push([482.65,73.64924447920004]);
			points.push([492.5,69.22744434420002]);
			points.push([502.34999999999997,66.28369947639999]);

			points.push([502.34,300]);
			points.push([100,300]);
			return points;
		}
	}
}