Flex 线组件

我在 OrgChart 中用的是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;
                }
                
        }
}

其中画箭头的算法是同事小王写的，在此感谢小王。

评论

4 楼 roger_588 2009-03-23  

谢谢指点！我已有思路了。

3 楼 iMzw 2009-03-19  

roger_588 写道

我想问下，折线怎么画？

^         |
|_________|

好比如上图，都是直线（由于无法具体描述），折点可托拽。
     

折线不就是几条直线么。折点是独立的组件，拖动折点时，更改折点端相关直线的坐标。

2 楼 roger_588 2009-03-18  

我想问下，折线怎么画？

^         |
|_________|

好比如上图，都是直线（由于无法具体描述），折点可托拽。
     

1 楼 roger_588 2009-03-18