Here is an ActionScript 3 class I use all the time to draw pixel perfect dotted lines in Flash. You can set the line width, line height, color, alpha, dot width, and dot spacing. Simple but useful!
Dotted line preview:
Dotted line usage:
-
import com.warmforestflash.drawing.DottedLine;
-
var s:Shape = new DottedLine(630, 1, 0×603120, 0.9, 1, 2);
-
addChild(s);
Dashed line preview:
Dashed line usage:
-
import com.warmforestflash.drawing.DottedLine;
-
var s:Shape = new DottedLine(630, 1, 0×603120, 0.9, 10, 8);
-
addChild(s);
» Download the zip containing the class and the above samples
Feel free to use it in whatever way you see fit.
__
Related posts:
thank you !
Wonderful, just what I need. Thanks!
Thanks! works like a charm.
That’s pretty sweet. Just what I’m looking for, might give it a try. I take it when you increase dot widths, they are perfect circles?
@KJ
Actually they are rectangular rather than circular once they get bigger.
I just feel like commenting
Good stuff!
How to make the line width follow the stage width? I’m no script heroes…
Anyway…nice stuff!
@rdh
You should be able to just redraw the line in your stage resize function and use the stage width as the line width. Something like the following:
private function onStageResize(e:Event = null):void
{
var s:Shape = new DottedLine(stage.stageWidth, 1, 0×603120, 0.9, 1, 2);
addChild(s);
}
Hope that helps.
-Jay
Thanks, this class is very useful.
thanks!
Hi, This is a very smart way to generate dotted/dashed lines. Thanks for the useful class that you have written.
I have a quick question: If I want to draw a dashed line between two given points, how should I go about it ? (I mean, I want to have a dashed line that is not necessarily horizontal). Thanks.
Karthik
@karthik
It’s not really setup to easily connect to two points but for non-horizontal lines you can just use the rotation property to rotate it.
-Jay
If you need to draw dashed lines between two points you should check out Andy Woodruff’s DashedLine class.
http://www.cartogrammar.com/blog/drawing-dashed-lines-with-actionscript-3/
I’ve used it in a project and it worked perfectly.
Thanks for this !
A note to Flex programmers.
Don’t forget to wrap “this” with a UIComponent before adding
it as a child to your containers.
Also change the graphics.drawRect to always use x=0 and y=0
and then set your x and y with the UIComponent wrapper..
Todd
private function drawDottedLine():void
{
..
..
..
graphics.drawRect(0, 0, _w, _h);
graphics.endFill();
//*************************************************************
// Wrap the Display object in a UIComponent so it can be
// displayed in the pageContainer (which is a UIComponent )
//*************************************************************
hComp = new UIComponent();
hComp.addChild(this);
_pageContainer.addChild(hComp);
hComp.x = _x;
hComp.y = _y;
}
thanks!! great class!
Great thanks for making this available, really useful.
I did notice that dotAlpha isn’t given a datatype in the class DottedLine method, even though it will work without.
hi, thanks for the class! i’ve added a little bit of code to your class to automatically redraw the line when you change the width or height of the shape:
//---------------------------------------
// GETTER / SETTERS
//---------------------------------------
/**
* Get and Set width
*/
override public function get width():Number
{
return _w;
}
/**
* @private
*/
override public function set width(value:Number):void
{
if (value !== _w)
{
_w = Math.round(value);
drawDottedLine();
}
}
/**
* Get and Set height
*/
override public function get height():Number
{
return _h;
}
/**
* @private
*/
override public function set height(value:Number):void
{
if (value !== _h)
{
_h = Math.round(value);
drawDottedLine();
}
}
thank you for your response !
HI,
Iam using this class in flex as iam adding it intially by intialising values and i added to ui component and then i added to canvas but the line is displaying and dashed lines are not displaying here below is my code pls reply me ASAP it is urgent.
var s:Shape = new DottedLine(1, 800,0×0600D8, 0.9, 10,4);
dasedcompnt.graphics.drawRect(0,0,1,4)
dasedcompnt.graphics.endFill();
// s.graphics.drawRect(0,0,1,4)
var uicomponent:UIComponent = new UIComponent;
uicomponent.addChild(s);
uicomponent.height = 800;
dashedCanvas.addChild(uicomponent);
@chandra
I don’t really use Flex so I’m not sure but if you scroll up a few comments someone else posted some advice for using this in Flex. Hope that helps.
-Jay
Jay, I hope you don’t mind me mentioning this, and I’m not sure if this would be useful for you or anyone else here, but I’ve developed a couple classes for drawing dotted/dashed circles.
I wanted to mention it because I’ve definitely found the need for drawing straight dotted/dashed lines. But it’s quite difficult to draw circles using this method!!
So, I hope it’s useful for you all.
@Arjun Mehta
Awesome class and thanks for sharing. I’m sure others will find it useful.
-Jay
When I rotate the lines they sometimes disappear…