This is something I need to do every once in a while but can never find a way to create a dotted or dashed line using code. Usually the solution is to either repeat an image, or to use the drawing api to create a dotted line. I took some pointers from both approaches and created the following custom class to draw dotted/dashed lines without the need for images, but still maintaining the ability to customize the colors and sizes of the dashes. Enjoy!
First, create a new class by creating a custom MXML component that extends the Spark Rect class. (I have to leave off the opening xml tag to be able to insert the code here).
<s:Rect width="100%" height="100%" x="0" y="0" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" > <fx:Script> <![CDATA[ import flash.display.CapsStyle; import flash.display.JointStyle; import flash.display.LineScaleMode; /** Color of the primary dash in the line */ public function set dotColor( value:uint ):void { _dotColor = value; dispatchEvent( new Event( 'linePropertyChanged' ) ); } /** Alpha of the primary dash in the line */ public function set dotAlpha( value:Number ): void { _dotAlpha = value; dispatchEvent( new Event( 'linePropertyChanged' ) ); } /** With od the primary dash in the line */ public function set dotWidth( value:Number ):void { _dotWidth = value; dispatchEvent( new Event( 'linePropertyChanged' ) ); } /** Height of the primary dash in the line */ public function set dotHeight( value:Number ):void { _dotHeight = value; dispatchEvent( new Event( 'linePropertyChanged' ) ); } /** * Color of the spacer in the line (usually transparent, but can * be another color) */ public function set spacerColor( value:uint ):void { _spacerColor = value; dispatchEvent( new Event( 'linePropertyChanged' ) ); } /** * Alpha of the spacer in the line. (usually transparent, but doesn't * have to be) */ public function set spacerAlpha( value:Number ):void { _spacerAlpha = value; dispatchEvent( new Event( 'linePropertyChanged' ) ); } /** Width of the spacer in the line */ public function set spacerWidth( value:Number ):void { _spacerWidth = value; dispatchEvent( new Event( 'linePropertyChanged' ) ); } /** Height of the spacer in the line */ public function set spacerHeight( value:Number ):void { _spacerHeight = value; dispatchEvent( new Event( 'linePropertyChanged' ) ); } /** Padding betweent the dot and spacer */ public function set padding( value:Number ):void { _padding = value; dispatchEvent( new Event( 'linePropertyChanged' ) ); } [Bindable ('linePropertyChanged')] public function get lineSegment():Shape { var bg:Shape = new Shape(); bg.graphics.beginFill( _dotColor, _dotAlpha ); bg.graphics.drawRect( _padding, 0, _dotWidth, _dotHeight ); bg.graphics.endFill(); bg.graphics.beginFill( _spacerColor, _spacerAlpha ); bg.graphics.drawRect( _dotWidth + (_padding * 2 ), 0, _spacerWidth, _spacerHeight ); bg.graphics.endFill(); return bg; } private var _dotColor:uint = 0xFFFFFF; private var _dotAlpha:Number = 1; private var _dotWidth:Number = 3; private var _dotHeight:Number = _dotWidth private var _spacerAlpha:Number = 0; private var _spacerColor:uint = 0xFFFFFF; private var _spacerWidth:Number = _dotWidth; private var _spacerHeight:Number = _spacerWidth; private var _padding:Number = 0; ]]> </fx:Script> <!--- Fill the rect with a repeating LineSegment --> <s:fill> <s:BitmapFill source="{ lineSegment }" fillMode="repeat" /> </s:fill> </s:Rect>
To use the class, just place the following wherever you want a dotted/dashed line (assuming a class name of DottedLine.mxml)
<components:DottedLine width="500" height="2" dotColor="0xFFFFFF" dotWidth="3" dotAlpha="1" />
There are other optional parameters that allow for setting the color, alpha and width between the dots, but this is enough to get you started.
This is quite neat and simple approach. Thanks for posting.
Useful. Thank you for sharing.
This is awesome. Thank you 🙂