Flex 线组件

我在 [url="http://nealmi.iteye.com/admin/blogs/252077"]OrgChart [/url]中用的是Rule组件来划线,实际上最好用轻量级的 Shape 组件来画线。前几天刚好又有类似的工作,就顺便写了一个。


package mobi.imzw.control{
import flash.display.Shape;
import flash.geom.Point;

public class LineDescriptor extends Shape {

private var _start:Point = new Point(0, 0);
private var _startX:Number;
private var _startY:Number;

private var _end:Point = new Point(0, 0);
private var _endX:Number;
private var _endY:Number;

private var _hasArrowHead:Boolean=false;

private var _thinkness:Number = 1;
private var _color:uint = 0x000000;
private var _alpha:Number = 1;
private var _pixelHinting:Boolean = false;
private var _scaleMode:String = "normal";


public function LineDescriptor(startPoint:Point=null,
endPoint:Point=null,
hasArrow:Boolean=false){
start = startPoint;
end = endPoint;
hasArrowHead = hasArrowHead;
}


public function draw():void{
graphics.clear();
with(graphics){
lineStyle(_thinkness, _color, _alpha, _pixelHinting, _scaleMode);
moveTo(start.x, start.y);
lineTo(end.x, end.y);
}

if(hasArrowHead){
drawArrowHead();
}
}

/**
* 画箭头
**/
private function drawArrowHead():void{
var startX:Number = start.x;
var startY:Number = start.y;
var endX:Number = end.x;
var endY:Number = end.y;

var arrowLength : Number = 10;
var arrowAngle : Number = Math.PI / 6;
var lineAngle : Number;
if(endX - startX != 0)
lineAngle = Math.atan((endY - startY) / (endX - startX));
else{
if(endY - startY < 0)
lineAngle = Math.PI / 2;
else
lineAngle = 3 * Math.PI / 2;
}
if(endY - startY >= 0 && endX - startX <= 0){
lineAngle = lineAngle + Math.PI;
}else if(endY - startY <= 0 && endX - startX <= 0){
lineAngle = lineAngle + Math.PI;
}
//定义三角形
var angleC : Number = arrowAngle;
var rimA : Number = arrowLength;
var rimB : Number = Math.pow(Math.pow(endY - startY,2) + Math.pow(endX - startX,2),1/2);
var rimC : Number = Math.pow(Math.pow(rimA,2) + Math.pow(rimB,2) - 2 * rimA * rimB * Math.cos(angleC),1/2);
var angleA : Number = Math.acos((rimB - rimA * Math.cos(angleC)) / rimC);

var leftArrowAngle : Number = lineAngle + angleA;
var rightArrowAngle : Number = lineAngle - angleA;
var leftArrowX : Number = startX + rimC * Math.cos(leftArrowAngle);
var leftArrowY : Number = startY + rimC * Math.sin(leftArrowAngle);
var rightArrowX : Number = startX + rimC * Math.cos(rightArrowAngle);
var rightArrowY : Number = startY + rimC * Math.sin(rightArrowAngle);


with(graphics){
moveTo(end.x, end.y);
lineTo(leftArrowX, leftArrowY);
moveTo(end.x, end.y);
lineTo(rightArrowX, rightArrowY);
}
}

/**
* 是否有箭头
**/
public function get hasArrowHead():Boolean{
return _hasArrowHead;
}
public function set hasArrowHead(value:Boolean):void{
_hasArrowHead = value;
}

/**
* 线的起点
**/
public function get start():Point{
return _start;
}
public function set start(value:Point):void{
if(value){
_start = value;
}
}

public function get startX():Number{
return _start.x;
}
public function set startX(value:Number):void{
_start.x = value;
}

public function get startY():Number{
return _start.y;
}
public function set startY(value:Number):void{
_start.y = value;
}

/**
* 线的终点
**/
public function get end():Point{
return _end;
}
public function set end(value:Point):void{
if(value){
_end = value;
}
}

public function get endX():Number{
return end.x;
}
public function set endX(value:Number):void{
_end.x = value;
}

public function get endY():Number{
return end.y;
}
public function set endY(value:Number):void{
_end.y = value;
}

}
}



其中画箭头的算法是同事小王写的,在此感谢小王。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值