Drawing a dashed/dotted line
These days I needed in one of my applications to draw some dashed and dotted lines. After doing some research, I realized that there is no line style that would enable one to draw lines like this.
So I started implementing an algorithm that would draw a dashed/dotted line given two points. Drawing a dashed line is determined by setting the length of the dash and the length of the gap.
I decided drawing my dashed line by drawing smaller lines and adding gaps after each one of them.
private function drawDashedLine (x1:Number, y1:Number, x2:Number,y2:Number, dashLength:int, gapLength:int, color:uint):void
{
var lineLength:Number=0;
//counts the current length of the dashed line
startLength = 0;
//the container where the dashed line will be added
drawingCanvas = new UIComponent();
//set up the line style of the dashed line
drawingCanvas.graphics.lineStyle(3,color,1);
//move mouse to starting point
drawingCanvas.graphics.moveTo(x1,y1);
//start drawing dash
lineLength = Math.sqrt((Math.pow((x1-x2),2)+Math.pow((y1-y2),2)));
//while have the necessary space dashes and gaps can be drawn
while ((lineLength-startLength)>=(dashLength+gapLength))
{
drawDash(x1,x2,y1,y2,lineLength,dashLength);
drawGap(x1,x2,y1,y2,lineLength,gapLength);
}
//if there is not enough space to draw another dash, just draw part of the dash
if ((lineLength-startLength)<=dashLength)
{
drawingCanvas.graphics.lineTo(x2,y2)
}
else
{
drawDash(x1,x2,y1,y2,lineLength,dashLength);
}
try
{
cnvContainer.addChild(drawingCanvas);
}
catch (e:Error)
{
trace("child adding failed ")
}
}
The dash is drawn by determining the coordinates of the ending point of the dash.
//calculate the point where the dash ends and draw line
private function drawDash(x1:Number,x2:Number,y1:Number,y2:Number,lineLength:Number, dashLength:Number):void
{
var proportionDash:Number = 0;
startLength = startLength + dashLength;
//the percentage of the line(relative to the starting point)
//at wich the end point of the dash will be found
proportionDash = (startLength*100)/lineLength;
var retPoint:Point = getCoordinatesForProportion(x1,x2,y1,y2,proportionDash);
drawingCanvas.graphics.lineTo(retPoint.x,retPoint.y);
}
The gap is also implemented by moving the mouse cursor to the starting point of a new dash.
//calculate the point where the gap ends and move mouse cursor
private function drawGap(x1:Number,x2:Number,y1:Number,y2:Number,lineLength:Number, gapLength:Number):void
{
var proportionGap:Number = 0;
startLength = startLength + gapLength;
//the percentage of the line(relative to the starting point)
//at wich the end point of the gap will be found
proportionGap = (startLength*100)/lineLength;
var retPoint:Point = getCoordinatesForProportion(x1,x2,y1,y2,proportionGap);
drawingCanvas.graphics.moveTo(retPoint.x,retPoint.y);
}
Next I use a function that will determine the coordinates of the point located at a certain distance (in percents) from the starting point of the line. This does mostly what the Point.interpolate method of the framework does.
private function getCoordinatesForProportion(x1:Number,x2:Number,y1:Number,y2:Number,proportion:Number):Point
{
var newX:Number = 0;
var newY:Number = 0;
var retPoint:Point = new Point(0,0);
if (x1>=x2)
newX = x1 - Math.abs(x1-x2)*proportion/100;
else
newX = x1 + Math.abs(x1-x2)*proportion/100;
if (y1>=y2)
newY = y1 - Math.abs(y1-y2)*proportion/100;
else
newY = y1 + Math.abs(y1-y2)*proportion/100;
retPoint.x = newX;
retPoint.y = newY;
return retPoint;
}
You can download the source code here.
