這是一個簡單的虛線元件，還未做記憶體管理效率化以及點的大小動態更改處理。
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:view="ut.view.*">
<s:VGroup width="100%" paddingTop="5" paddingLeft="5" paddingRight="5">
<view:DottedLine width="100%" dotteLineMode="line" color="0x0000FF"/>
<view:DottedLine width="100%" dotteLineMode="dot" color="0x0000FF"/>
<view:DottedLine width="100" dotteLineMode="line" color="0xFF0000"/>
<view:DottedLine width="100" dotteLineMode="dot" color="0xFF0000"/>
<s:HGroup>
<view:DottedLine width="100" dotteLineMode="dot" color="0xFF0000" rotation="90"/>
<view:DottedLine width="100" dotteLineMode="line" color="0xFF0000" rotation="90"/>
<view:DottedLine width="100" dotteLineMode="line" color="0xFF0000" rotation="90"/>
<view:DottedLine width="100" dotteLineMode="dot" color="0xFF0000" rotation="90"/>
</s:HGroup>
</s:VGroup>
</s:Application>
package ut.view
{
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.DisplayObject;
import flash.display.Graphics;
import flash.display.Shape;
import flash.utils.getTimer;
import mx.graphics.BitmapFillMode;
import spark.primitives.BitmapImage;
import ut.enum.DottedLineMode;
public class DottedLine extends BitmapImage
{
public function DottedLine(color:uint = 0xD4D4D4 , dotteLineMode:String=DottedLineMode.DOT)
{
this.color = color
this.dotteLineMode = dotteLineMode;
}
private var _color:uint;
/**虛線的顏色*/
public function get color():uint
{
return _color;
}
public function set color(value:uint):void
{
if(_color != value)
{
_color = value;
changeSource();
}
}
private var _dotteLineMode:String;
/**選則點或線的虛線，可由DottedLineMode選擇輸入參數*/
[Inspectable(category="General", enumeration="dot,line", defaultValue="stretch")]
public function get dotteLineMode():String
{
return _dotteLineMode;
}
public function set dotteLineMode(dottedLineMode:String):void
{
if(dottedLineMode == DottedLineMode.DOT || dottedLineMode == DottedLineMode.LINE)
{
if(_dotteLineMode != dottedLineMode)
{
_dotteLineMode = dottedLineMode;
changeSource();
}
}
}
/**bitmapImage所要填入source*/
private function changeSource():void
{
switch(dotteLineMode)
{
case DottedLineMode.DOT:
setSource(createDotDotted);
break;
case DottedLineMode.LINE:
setSource(createLineDotteed);
break;
default:
}
}
/**預設為點狀態的虛線*/
private function setSource(createMethod:Function):void
{
this.source = null;
this.source = getBitmap(createMethod(color));
this.fillMode = BitmapFillMode.REPEAT;
}
/**將畫好的圖轉換成bitmap (displayObject to bitmap)*/
private function getBitmap(target:DisplayObject):Bitmap
{
var _bitMapData:BitmapData = new BitmapData(target.width , target.height , true , 0x000000);
_bitMapData.draw(target);
var _bitMap:Bitmap = new Bitmap(_bitMapData);
return _bitMap;
}
/**畫兩個圓依照color,其中一個是看不見,如此bitmap在repeat時方有間隔*/
protected function createDotDotted(color:uint=0xD4D4D4 , ellipseX:Number=0 , ellipseY:Number=0 , ellipseWidth:Number=2 , ellipseHeight:Number=2):DisplayObject
{
var grapgics:Shape = new Shape();
//first ellipse alpha is 1
grapgics.graphics.beginFill(color);
grapgics.graphics.drawEllipse(ellipseX , ellipseY , ellipseWidth , ellipseHeight);
//second ellipse alpha is 0
grapgics.graphics.beginFill(0xFFFFFF , 0);
grapgics.graphics.drawEllipse(ellipseX+ellipseWidth , ellipseY , ellipseWidth , ellipseHeight);
//end fill
grapgics.graphics.endFill();
return grapgics;
}
/**畫兩個線段*/
protected function createLineDotteed(color:uint=0xD4D4D4 , rectX:Number=0 , rectY:Number=0 , rectWidth:Number=3 , rectHeight:Number=1):DisplayObject
{
var grapgics:Shape = new Shape();
//first line
grapgics.graphics.beginFill(color);
grapgics.graphics.drawRect(rectX , rectY , rectWidth , rectHeight);
//second line
grapgics.graphics.beginFill(0xFFFFFF , 0);
grapgics.graphics.drawRect( rectX + rectWidth , rectY , rectWidth , rectHeight);
//end fill
grapgics.graphics.endFill();
return grapgics;
}
}
}
package ut.enum
{
public class DottedLineMode
{
static public const DOT:String = "dot";
static public const LINE:String = "line";
public function DottedLineMode()
{
}
}
}
