How to create a dotted line or dashed line in Flex 4

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.

Advertisements