FLEX 画虚线

实例运行效果如下图

源码如下：

画线类：

MyDashLine.as

package ascomponent

{

import flash.display.Graphics;

import flash.display.Sprite;

import flash.geom.Point;

import mx.core.UIComponent;

import spark.core.SpriteVisualElement;

public class MyDashLine

{

/* 虚线 */

public static const DASHLINE:String = "dashLine";

/* 实线 */

public static const REALLINE:String = "realLine";

private var lines:SpriteVisualElement = new SpriteVisualElement();

private var component:UIComponent = new UIComponent();

public function MyDashLine()

{

lines = new SpriteVisualElement();

component = new UIComponent();

}

/*init()函数参数注解：

* 1、shuliang 虚线的条数

* 2、lineColor 虚线的颜色

* 3、lineAlpha 虚线的alpha值

* 4、fromX 虚线起始点的x轴的值

* 5、fromY 虚线起始点的y轴的值

* 6、toX 虚线末点的x轴的值

* 7、toY 虚线末点的y轴的值

* 8、pointWidth 单个点的厚度

* 9、pointLength 单个点的长度

* 10、twoPointDistance 两个点之间的间隔

* 11、secondColor 虚线分段颜色，默认白色

*/

public function init(shuliang:Number, lineColor:uint,

lineAlpha:Number, fromX:Number, fromY:Number, toX:Number,

toY:Number, pointWidth:Number, pointLength:Number,

twoPointDistance:Number, type:String="dashLine", secondColor:uint=0xFFFFFF):UIComponent

{

drawDashed(lines.graphics, lineColor, lineAlpha, new Point(fromX, fromY),

new Point(toX, toY), pointWidth, pointLength, twoPointDistance, type, secondColor);

return component;

}

private function drawDashed(graphics:Graphics, lineColor:uint, lineAlpha:Number,

p1:Point, p2:Point, pointWidth:Number,

pointLength:Number, twoPointDistance:Number, type:String, secondColor:uint):void

{

var max:Number = Point.distance(p1, p2);

var dis:Number = 0;

var p3:Point;

var p4:Point;

switch(type)

{

case DASHLINE:

var p5:Point = p1;

while(dis < max){

p3 = Point.interpolate(p2, p1, dis / max);

dis += pointLength;

if(dis > max){

dis = max;

}

p4 = Point.interpolate(p2, p1, dis / max);

graphics.lineStyle(pointWidth, secondColor, lineAlpha);

lines.graphics.moveTo(p5.x, p5.y);

lines.graphics.lineTo(p3.x, p3.y);

graphics.lineStyle(pointWidth, lineColor, lineAlpha);

lines.graphics.moveTo(p3.x, p3.y);

lines.graphics.lineTo(p4.x, p4.y);

p5 = p4;

dis += twoPointDistance;

}

break;

default:

case REALLINE:

with(graphics)

{

lineStyle(pointWidth, lineColor, lineAlpha);

moveTo(p1.x, p2.y);

lineTo(p2.x, p2.y);

}

break;

}

component.addChild(lines);

}

}

}

应用：

<?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:local="*"

creationComplete="{myInit()}"

>

<fx:Declarations>

<!-- Place non-visual elements (e.g., services, value objects) here -->

</fx:Declarations>

<fx:Script>

<![CDATA[

import ascomponent.MyDashLine;

private function myInit():void

{

var myDashLine:MyDashLine = new MyDashLine();

this.addElement(myDashLine.init(2, 0xFF0000, 0.9, 100, 100, 500, 100, 5, 30, 25, MyDashLine.DASHLINE, 0x000000));

this.addElement(myDashLine.init(2, 0xFF00FF, 0.9, 100, 200, 500, 200, 5, 30, 25, MyDashLine.REALLINE));

this.addElement(myDashLine.init(2, 0x00ff00, 0.9, 100, 300, 500, 300, 5, 30, 25));

this.addElement(myDashLine.init(2, 0xFF0000, 0.9, 100, 400, 500, 400, 5, 30, 25, MyDashLine.DASHLINE));

}

]]>

</fx:Script>

</s:Application>