關鍵字：設計器源代碼，Web設計器，工作流設計器，jQuery插件，組態設計器，SCADA系統設計器，流程圖設計，表單設計建模，報表設計，可視化，設計時，運行時，輕量級開放平臺。

前面章節已講到如何在兩個組件間通過曲線（貝塞爾曲線）進行連接，一般在實際應用中，貝塞爾曲線在數據流圖、思維導圖中應用比較多，許多如組織架構圖等通過折線連接，本文在之前的基礎上如何快速實現兩個組件間的折線連接：

之前示例是用checkbox來指示是否畫線狀態，現在增加了一種線條所以需要修改一下用三種狀態來識別是選擇/曲線/折線之一，index.html中代碼片斷如下：

<ul class="lineTypeUL"><li class="arrowli active"></li><li class="lineCurve"></li><li class="linePoly"></li></ul>
//
 
樣式定義如下：
    <style>
        .lineTypeUL{
            display:inline-block;
            text-align:center;
            border:1px solid lightgray;
            border-radius: 3px;
        }
        .lineTypeUL li{
            display:inline-block;
            background-image: url("icons.png");
            width:18px;
            height:18px;
            margin:2px;
        }
        .lineTypeUL li:hover{
            background
 
-color:lightgray;
        }
        .lineTypeUL .active{
            background-color:lightgray;
        }
        .arrowli{
            background-position:0 0px;
        }
        .lineCurve{
            background-position: -18px 0px;
        }
        .linePoly{
            background-position:-36px 0px;
        }
    
 
</style>
//事件代碼：
        $(".lineTypeUL li").each(
            function(){
                $(this).on("click", function () {
                    $(".lineTypeUL li").removeClass("active");
                    view.setLineStatus(this.className);
                    $(this).addClass("active");
                })
            }
        )

對於前端開發來說必須掌握的一個技能就是spirit圖標，一個網站用到的圖標通過合並在一個文件中，能夠減少網站資源請求的次數（雖然是異步並行請求），提高效率，註意background的用法。

在visualDesigner.js中，增加一個PolyLine類，同BezierLine的寫法：

function PolyLine() {
        this.properties={};
        this.properties.typeName = "折線";
        this.properties.strokeWidth = 2;
        this.properties.strokeColor = ‘red‘;      
    }
    PolyLine.prototype = $.extend({}, Component.prototype);
    PolyLine.prototype = $.extend(PolyLine.prototype, {
        render: function (options) {

            this.properties=$.extend(this.properties,options)
            this.properties.x = Math.min(this.properties.sxy.x, this.properties.txy.x);
            this.properties.y = Math.min(this.properties.sxy.y, this.properties.txy.y);
            this.properties.width = Math.abs(this.properties.txy.x - this.properties.sxy.x);
            this.properties.height = Math.abs(this.properties.txy.y - this.properties.sxy.y);

            this.group=new paper.Group();
            this.properties.x=Math.min(this.properties.sxy.x,this.properties.txy.x);
            this.properties.y=Math.min(this.properties.sxy.y,this.properties.txy.y);
            this.properties.width = Math.abs(this.properties.txy.x - this.properties.sxy.x);
            this.properties.height = Math.abs(this.properties.txy.y - this.properties.sxy.y);

            if (this.properties.targetType=="left" || this.properties.targetType=="right")
            {
                if (this.properties.mxy1==undefined && this.properties.mxy2==undefined){
                    this.properties.mxy1=[this.properties.sxy.x+(this.properties.txy.x-this.properties.sxy.x)/2,this.properties.sxy.y];
                    this.properties.mxy2=[this.properties.sxy.x+(this.properties.txy.x-this.properties.sxy.x)/2,this.properties.txy.y];
                }
                else
                {
                    this.properties.mxy1[1]=this.properties.sxy.y;
                    this.properties.mxy2[1]=this.properties.txy.y;
                }
            }
            else
            {
                if (this.properties.mxy1==undefined && this.properties.mxy2==undefined){
                    this.properties.mxy1=[this.properties.sxy.x,(this.properties.txy.y-this.properties.sxy.y)/2+this.properties.sxy.y];
                    this.properties.mxy2=[this.properties.txy.x,(this.properties.txy.y-this.properties.sxy.y)/2+this.properties.sxy.y];
                }
                else
                {
                    this.properties.mxy1[0]=this.properties.sxy.x;
                    this.properties.mxy2[0]=this.properties.txy.x;
                }
            }
            
            this.group=new paper.Group();
            var me = this;
            var drag = false;
            var line = new paper.Path();
            line.strokeWidth = 2;

            line.strokeColor = this.properties.strokeColor;    
            line.add(this.properties.sxy);
            line.add(this.properties.mxy1);
            line.add(this.properties.mxy2);
            line.add(this.properties.txy);
            //BezierArrow(line,targetType,this.properties.txy.x, this.properties.txy.y);
            this.group.addChild(line);

            //this.group.translate(this.properties.x, this.properties.y);
            return this;
        }
    });

同時修改createLine方法

    VisualDesigner.prototype.createLine= function (typeName, options) {
        if (!options.id)
            options.id = this.createId(); //為元素增加id屬性
        var element = null;
        switch (typeName) {
            case "曲線":
                element = new BezierLine().init().render(options);
                break;
            case "折線":
                element=new PolyLine().init().render(options);
                break;
        }
        this.lines[element.properties.id] = element;
        element.designer = this;

    } 

增加一創建線條的分支，當然還需要修改當前畫線類型和畫線結束的代碼

    VisualDesigner.prototype.setLineStatus = function (status) {
        if (status=="arrowli")
            this.lining = false;
            else
            {
                this.lining=true;
                if (status=="lineCurve")
                    this.lineType="曲線";
                else if (status="linePoly")
                    this.lineType="折線";
            }
    }
。。。。
        dragEnd:function(co,pos)
        {
            var xy = co.node.getConnectorCenterByPos(pos); //獲取當前鼠標位置處連接點的中央坐標
            if (this.line !== null  ) {
                if (this.start.node.properties.id!=co.node.properties.id){
                    this.designer.createLine(this.designer.lineType,{sourceType:this.start.node.getConnectorDirection(this.startPos),targetType:co.node.getConnectorDirection(pos),source:this.start.node.properties.id,target:co.node.properties.id,sxy:this.startPos,txy:xy});
                }
                this.line.remove();

            }
            this.start=null; //清除畫線狀態，等待重新畫線
            this.startPos=null;
            
        },

至此就大功告成了，得益於之前我們以OOP的思路構建的框架，在擴展新的組件或連線時，代碼變得如些精簡。

同學們快動手試試增加更多的連線方式吧。

源代碼：sample.1.8.rar

（本文為原創，在引用代碼和文字時請註明出處）

10.折線連接--WEB設計器JQUERY插件講解（含源碼）