- package view.line
- {
- import flash.geom.Point;
- import mx.core.UIComponent;
- public class ArrowUI extends UIComponent
- {
- public static var CENTER:String = "CENTER";
- public static var STARTPOINT:String = "STARTPOINT";
- public static var ENDPOINT:String = "ENDPOINT";
- private var _endPoint:Point;//终点坐标
- private var _startPoint:Point;//起点坐标
- private var radius:uint=6;//箭头大小
- // 箭头所放的位置,"center" ,"startPoint","endPoint"
- private var _arrowAlign:String = "ENDPOINT";
- public function ArrowUI()
- {
- super();
- }
- public function draw():void
- {
- this.graphics.clear();
- var p2:Point;
- var angle:Number = Util.getAngle(startPoint,endPoint);
- switch(_arrowAlign)
- {
- case ArrowUI.ENDPOINT:
- p2= startPoint;
- break;
- case ArrowUI.STARTPOINT:
- p2 = endPoint;
- break;
- default:
- p2= new Point((startPoint.x+endPoint.x)/2,(startPoint.y+endPoint.y)/2);
- break;
- }
- var centerX:Number = p2.x - radius * Math.cos(angle*(Math.PI/180));
- var centerY:Number = p2.y + radius * Math.sin(angle*(Math.PI/180));
- var leftX:Number = centerX + radius * Math.cos((angle+120)*(Math.PI/180));
- var leftY:Number = centerY - radius * Math.sin((angle+120)*(Math.PI/180));
- var rightX:Number = centerX + radius * Math.cos((angle+240)*(Math.PI/180));
- var rightY:Number = centerY - radius * Math.sin((angle+240)*(Math.PI/180));
- var p1:Point = new Point( leftX , leftY);
- var p3:Point= new Point(rightX , rightY);
- var p4:Point= new Point(centerX , centerY);
- drawArrow(p1,p2,p3,p4);
- }
- protected function drawArrow(p1:Point,p2:Point,p3:Point,p4:Point):void
- {
- this.graphics.beginFill(fillColor);
- this.graphics.lineStyle(1, fillColor, 1);
- this.graphics.moveTo(p1.x,p1.y);
- this.graphics.lineTo(p2.x,p2.y);
- this.graphics.lineTo(p3.x,p3.y);
- this.graphics.lineTo(p4.x,p4.y);
- this.graphics.lineTo(p1.x,p1.y);
- this.graphics.endFill();
- }
- //线填充色(箭头)
- private var _fillcolor:uint = 0x66FF66;//0x0000FF
- public function set fillColor(color:uint):void
- {
- _fillcolor=color;
- }
- [Bindable]
- public function get fillColor():uint
- {
- return _fillcolor;
- }
- //起点坐标
- public function set startPoint(p:Point):void
- {
- _startPoint = p;
- }
- public function get startPoint():Point
- {
- return _startPoint;
- }
- //终点点坐标
- public function set endPoint(p:Point):void
- {
- _endPoint = p;
- }
- public function get endPoint():Point
- {
- return _endPoint;
- }
- // 箭头所放的位置,"center" ,"startPoint","endPoint"
- public function get arrowAlign():String
- {
- return _arrowAlign;
- }
- public function set arrowAlign(str:String):void
- {
- _arrowAlign = str;
- }
- }
- }
=======================================
package view.line
{
import flash.geom.Point;
import mx.containers.Canvas;
import mx.effects.Move;
import mx.events.EffectEvent;
public class DottedLine extends Canvas
{
private var _endPoint:Point;//终点坐标
private var _startPoint:Point;//起点坐标
private var _lineSize:Number = 5;//虚线 空白长度
private var radius:uint=6;//箭头大小
private var _doMove:Boolean = true;// 是否移动
private var _duration:Number = 5000;//箭头运动时间
private var myMove:Move;
private var arrow:ArrowUI ;
[Bindable]
private var tooltip:String;
public function DottedLine()
{
//TODO: implement function
super();
this.toolTip = tooltip;
arrow = new ArrowUI;
}
public function drawLine():void
{
var xTemp:Number = 0; // x 坐标 count的偏移x坐标差
var yTemp:Number = 0; // y 坐标 count的偏移y坐标差
var count:uint = 1; //虚实相间
if(!_startPoint || !_endPoint || _startPoint == _endPoint)
{
return;
}
this.graphics.clear();
this.graphics.beginFill(fillColor);
this.graphics.lineStyle(1, fillColor, 1);
this.graphics.moveTo(_startPoint.x,_startPoint.y);
var xLen:Number = -_startPoint.x + _endPoint.x;//起始点x坐标差距
var yLen:Number = -_startPoint.y + _endPoint.y;//起始点y坐标差距
var lineLen:Number = Math.sqrt(xLen * xLen + yLen * yLen);
// if(_duration == 0)
// _duration = Math.round(lineLen * 20);
xTemp =( _lineSize * xLen )/lineLen;//求出 x 坐标 count的偏移x坐标差
yTemp =( _lineSize * yLen )/lineLen;//求出 y 坐标count 的偏移y坐标差
var x0:Number = _startPoint.x;
var y0:Number = _startPoint.y;
while((lineLen/_lineSize) >= 1)
{
x0 = x0 + xTemp;//求出偏移x坐标
y0 = y0 + yTemp ;//求出偏移y坐标
if(0 == count%2)
{
this.graphics.moveTo(x0,y0);
}else
{
this.graphics.lineTo(x0,y0);
}
count++;
lineLen = lineLen - _lineSize;
}
// this.graphics.lineTo(_endPoint.x , _endPoint.y);
this.graphics.endFill();
//画箭头
arrow.startPoint = this.startPoint;
arrow.endPoint = this.endPoint;
arrow.arrowAlign = ArrowUI.STARTPOINT;
arrow.fillColor = this.fillColor;
arrow.draw();
var num:Number = this.numChildren;
if(_doMove)
{
this.stopMove();
myMove = new Move();
myMove.xFrom = -endPoint.x + startPoint.x;
myMove.yFrom = -endPoint.y + startPoint.y;
myMove.xTo = 0;
myMove.yTo = 0;
myMove.repeatCount = 0;
myMove.target = arrow;
myMove.duration = _duration;
myMove.play();
}
}
//线填充色(箭头)
private var _fillcolor:uint=0x00FF00;//0x808080
public function set fillColor(color:uint):void
{
_fillcolor=color;
}
[Bindable]
public function get fillColor():uint
{
return _fillcolor;
}
//起点坐标
public function set startPoint(p:Point):void
{
_startPoint = p;
}
public function get startPoint():Point
{
return _startPoint;
}
//终点点坐标
public function set endPoint(p:Point):void
{
_endPoint = p;
}
public function get endPoint():Point
{
return _endPoint;
}
//虚线 空白长度
public function set lineSize(num:Number):void
{
_lineSize = num;
}
public function get lineSize():Number
{
return _lineSize;
}
//是否显示箭头
public function set arrowVisible(num:Boolean):void
{
arrow.visible = num;
}
public function set arrowDoMove(num:Boolean):void
{
stopMove();
_doMove = num;
arrow.visible = num;
}
//是否移动箭头
public function stopMove():void
{
if(null != myMove && myMove.isPlaying)
{
myMove.stop();
}
}
public function get isPlaying():Boolean
{
return myMove.isPlaying;
}
public function get arrowObj():ArrowUI
{
return arrow;
}
}
}