jsPlumb的簡單使用

1. jsPlumb概述
   jsPlumb是一個在dom元素之間繪制連接線的javascript框架，它使用svg技術繪制連接線。
2. 基本概念
   很明顯，一個連線主要要解決的問題包括誰和誰連，在哪里連(連接點在哪里)，連接點長啥樣，如何畫線等問題
   1：Anchor，錨點，它是一個邏輯概念，解決連線的連接點位置問題。
   2：Endpoint，端點，它是一個可視化的點，解決 連接點長啥樣的問題
   3：Connector，連線，解決如何畫線的問題
   4：Overlay，覆蓋物，它主要為連接添加一些裝飾物，不如標簽文本，連接點的箭頭。Anchor：
   錨點的定義方式主要有下面幾種
   1：用數組來定義
   [x位置，y位置，x方向，y方向]
   [x位置，y位置，x方向，y方向，x像素偏移，y像素偏移]
   位置的值在0~1之間
   方向的值為0,1,-1
   9個靜態的值為：
   Top TopRight
   Right BottomRight
   Bottom BottomLeft
   Left TopLeft
   Center
   AutoDefault 包括Top, Right, Bottom, Left
   需要注意的是，坐標使用第四象限的坐標
   一個常用的組合是：
   var defaultAnchors = ["Top", "Right", "Bottom", "Left", [0.25, 0, 0, -1], [0.75, 0, 0, -1], [0.25, 1, 0, 1], [0.75, 1, 0, 1]
   , [0, 0.25, 0, -1], [0, 0.75, 0, -1], [1, 0.25, 0, 1], [1, 0.75, 0, 1]];
   2：幾何圖形的周邊
   Circle Ellipse Triangle Diamond Rectangle Square
   anchor:[{ shape:"Triangle", anchorCount:150, rotation:25 } ]
   3：連續
   anchor:["Continuous", { faces:[ "top", "left" ] } ]

   Endpoint：
   jsPlumb提供了四種類型的端點，
   Dot,Rectangle,
   Blank，使用失敗了。
   Image，使用失敗了。

   Connectors
   jsPlumb提供了四種類型的連線，
   Bezier，StateMachine，Flowchart，Straight

   Overlay
   jsPlumb提供了3種類型的覆蓋物，
   Arrow：箭頭
   Label：標簽
   Custom：自定義的html元素
   ConnectionOverlays: [
   ["Arrow", {
   location: 1,
   //foldback: 1,
   foldback: 0.618, ///0.618： 普通箭頭，1：平底箭頭，2：鑽石箭頭
   visible: true,
   id: "arrow"
   }],
   ["Label", { location: 0.5,
   cssClass: "endpointTargetLabel",
   visible: true,
   id: "label" }]
   ]

3. 幾個需要注意的地方：
   1：所有的子元素在一個父容器中，並且子元素都要使用絕對布局
   position: absolute;
   2：端點可以通過樣式隱藏，直接使用"Blank"報錯了。
   3：性能，在多個連接的時候，需要使用批處理模式來繪制。
   sintoonUx.jsPlumbInstance.setSuspendDrawing(true)
   sintoonUx.jsPlumbInstance.setSuspendDrawing(false, true);
   4：設置可拖拽
   sintoonUx.jsPlumbInstance.draggable(btnDoms);
4. 使用范例

       drawConnectLine: function () {
           var sintoonUx = this;
           /// 定義錨點的位置
           var defaultAnchors = ["Top", "Right", "Bottom", "Left", [0.25, 0, 0, -1], [0.75, 0, 0, -1], [0.25, 1, 0, 1], [0.75, 1, 0, 1]
           , [0, 0.25, 0, -1], [0, 0.75, 0, -1], [1, 0.25, 0, 1], [1, 0.75, 0, 1]];
           /// 創建實例，配置默認的繪制屬性，建立通用繪圖方式等
           sintoonUx.jsPlumbInstance = jsPlumb.getInstance({
               PaintStyle: {
                   lineWidth: 2,
                   strokeStyle: "blue",
                   outlineColor: "blue",
                   dashstyle: "4 2",
                   outlineWidth: 1
               },
               // Connector: ["Bezier", { curviness: 30 }],
               // Connector: ["StateMachine"],
               // Connector: ["Flowchart", { stub: [40, 60], gap: 10, cornerRadius: 5, alwaysRespectStubs: true }],
               Connector: ["Straight", { stub: [20, 50], gap: 0 }],
   
               Endpoint: ["Dot", { radius: 5, cssClass: "displaynone" }],/// 通過樣式來隱藏錨點
               //Endpoint: ["Image ", { src: "http://rmadyq.sintoon.cn/Content/16Icons/arrow_right.png" }],/// 通過樣式來隱藏錨點
               // Endpoint: ["Blank", "Blank"], 失敗報錯了，
               EndpointStyle: { fillStyle: "#567567" },
               Anchor: [defaultAnchors],
               // Anchor: ["Perimeter", { shape: "Triangle" }],
               Container: sintoonUx.flowchartContainerId,
               DragOptions: { cursor: 'pointer', zIndex: 2000 },
               ConnectionOverlays: [
                   ["Arrow", {
                       location: 1,
                       //foldback: 1,
                       foldback: 0.618,
                       visible: true,
                       id: "arrow"
                   }],
                   ["Label", { location: 0.5, label: "zhu", cssClass: "endpointTargetLabel", visible: true, id: "label" }]
               ]
           });
   
           /// 繪制標簽
           sintoonUx.jsPlumbInstance.bind("connection",
               function (connInfo, originalEvent) {
                   var connection = connInfo.connection;
                   var labelText = connection.sourceId.substring(0, 15) + "-" + connection.targetId.substring(0, 15);
                   labelText = Ext.String.format("{0}---{1}", Ext.getCmp(connection.sourceId).flowStage,
                       Ext.getCmp(connection.targetId).flowStage);
                   connection.getOverlay("label").setLabel(labelText);
               });
   
           /// 批處理繪制
           sintoonUx.jsPlumbInstance.setSuspendDrawing(true);
           var searchPat = Ext.String.format("#{0} .btnDraggable", sintoonUx.flowchartContainerId);
           var btnDoms = sintoonUx.jsPlumbInstance.getSelector(searchPat);
   
           /// 設置dom元素的可拖拽性
           sintoonUx.jsPlumbInstance.draggable(btnDoms);
   
           /// 建立dom元素之間的連接，繪制連接線，錨點，覆蓋物等
           for (var i = 0; i < sintoonUx.btnConfigs.length - 1; i++) {
               sintoonUx.jsPlumbInstance.connect({ reattach: true, source: sintoonUx.btnConfigs[i].btnId, target: sintoonUx.btnConfigs[i + 1].btnId });
           }
   
           /// 強制繪制整個界面
           sintoonUx.jsPlumbInstance.setSuspendDrawing(false, true);
       }