快捷導(dǎo)航

詳解js中構(gòu)造流程圖的核心技術(shù)JsPlumb

更新時(shí)間：2015年12月08日 10:28:17 作者：懶得安分

這篇文章主要介紹了js中構(gòu)造流程圖的核心技術(shù)JsPlumb，jsPlumb是一個(gè)強(qiáng)大的JavaScript連線庫(kù)，它可以將html中的元素用箭頭、曲線、直線等連接起來(lái)，適用于開(kāi)發(fā)Web上的圖表、建模工具等，需要的朋友可以參考下

項(xiàng)目里面用到了Web里面的拖拽流程圖的技術(shù)JsPlumb，其實(shí)真不算難，不過(guò)項(xiàng)目里面用HTML做的一些類似flash的效果，感覺(jué)還不錯(cuò)，在此分享下。

一、效果圖展示

1、從左邊拖動(dòng)元素到中間區(qū)域，然后連線

2、連線類型可以自定義：這里定義為直線、折線、曲線。實(shí)際項(xiàng)目中根據(jù)業(yè)務(wù)我們定義為分裝線、分裝支線、總裝線等

3、鼠標(biāo)拖動(dòng)區(qū)域選中元素，并且選中元素統(tǒng)一拖動(dòng)位置。

4、對(duì)選中的元素左對(duì)齊。

5、對(duì)選中元素居中對(duì)齊

6、右對(duì)齊

7、上對(duì)齊

8、垂直居中對(duì)齊

9、下對(duì)齊

10、根據(jù)第一個(gè)選中的元素上下靠攏

11、根據(jù)第一個(gè)選中的元素左右靠攏

12、根據(jù)第一個(gè)選中的元素同高

13、根據(jù)第一個(gè)選中的元素同寬

14、選中元素順時(shí)針旋轉(zhuǎn)，點(diǎn)擊一次旋轉(zhuǎn)45度

15、選中元素逆時(shí)針旋轉(zhuǎn)。

16、選中統(tǒng)一刪除元素以及元素上面的連線

這里很多效果其實(shí)在項(xiàng)目中作用并不太大，很多單純就是為了展示用的。

二、代碼詳解
這里涉及的效果比較多，可能要分多篇來(lái)介紹。這篇還是來(lái)看看構(gòu)造流程圖的核心技術(shù)：JsPlumb。

1、概述
關(guān)于JsPlumb的內(nèi)容，在此就簡(jiǎn)單說(shuō)明下吧。jsPlumb是一個(gè)強(qiáng)大的JavaScript連線庫(kù)，它可以將html中的元素用箭頭、曲線、直線等連接起來(lái)，適用于開(kāi)發(fā)Web上的圖表、建模工具等。它同時(shí)支持jQuery+jQuery UI、MooTools和YUI3這三個(gè)JavaScript框架，十分強(qiáng)大。本項(xiàng)目中還是結(jié)合大家最熟悉的JQuery來(lái)講解。并且還要注意的一點(diǎn)就是JsPlumb的瀏覽器兼容性，JsPlumb支持IE 6以上、火狐、谷歌等各種瀏覽器

2、使用
（1）引入JS文件
可以直接去官網(wǎng)上面下載最新的js庫(kù)，由于JsPlumb需要JQuery的支持，按照網(wǎng)上的說(shuō)法，它只兼容jQuery1.3.x及以上版本，并在jQuery UI 1.7.x、1.8.x及1.9.x上測(cè)試通過(guò)。所以我們需要下載較高一點(diǎn)版本的JQuery和JQuery UI。關(guān)于JsPlumb的內(nèi)容只需要引用一個(gè)Js即可。類似

<script src="~/Content/jquery-1.9.1.min.js"></script>
<script src="~/Content/jquery-ui-1.11.4.custom/jquery-ui.js"></script>
<link href="~/Content/jquery-ui-1.11.4.custom/jquery-ui.min.css" rel="stylesheet" />
<script src="~/Content/jsPlumb-master/dist/js/jquery.jsPlumb-1.7.5.js"></script>

（2）初始化
使用JsPlumb需要注意一點(diǎn)，JsPlumb的連線的樣式是由點(diǎn)確定的，也就是說(shuō)點(diǎn)的樣式里面包含了相關(guān)的屬性來(lái)說(shuō)明當(dāng)使用此點(diǎn)來(lái)連線的時(shí)候，連線的樣式應(yīng)該是什么樣的。
在我們項(xiàng)目里面，左邊的模型區(qū)域，中間才是設(shè)計(jì)區(qū)域。那么要將一個(gè)元素從模型區(qū)域創(chuàng)建出來(lái)，就要用到我們JQuery UI里面的draggable和droppable事件。首先我們注冊(cè)左邊模型的draggable和中間區(qū)域的droppable事件。

cshtml頁(yè)面代碼，<div id="divContentLeftMenu">這個(gè)是左邊模型的容器，<div id="divCenter"></div>表示中間區(qū)域容器。
　　　　　　

<div id="divContentLeftMenu">
      <div class="sidebar-menu" id="divSidebar">
        <a href="#plantmodel" onclick="Resize()" class="nav-header menu-first collapsed" data-toggle="collapse">工廠模型</a>
        <ul id="plantmodel" class="nav nav-list collapse menu-second">
        </ul>
        <a href="#artlinemodel" onclick="Resize()" class="nav-header menu-first collapsed" data-toggle="collapse">工藝段模型</a>
        <ul id="artlinemodel" class="nav nav-list collapse menu-second">
          <li>
            <a href="#">
              <div class="node radius" id="node4" dbtype="DTO_TM_ART_LINE">
                <label>工段</label>
              </div>
            </a>
          </li>
          <li>
            <a href="#">
              <div class="node" id="node5" dbtype="DTO_TM_ULOC">
                <label>工位</label>
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <div id="divCenter"></div>

Js代碼：
首先我們定義幾個(gè)點(diǎn)的樣式的全局變量

//基本連接線樣式
var connectorPaintStyle = {
  strokeStyle: "#1e8151",
  fillStyle: "transparent",
  radius: 5,
  lineWidth: 2
};
// 鼠標(biāo)懸浮在連接線上的樣式
var connectorHoverStyle = {
  lineWidth: 3,
  strokeStyle: "#216477",
  outlineWidth: 2,
  outlineColor: "white"
};
var endpointHoverStyle = {
  fillStyle: "#216477",
  strokeStyle: "#216477"
};
//空心圓端點(diǎn)樣式設(shè)置
var hollowCircle = {
  DragOptions: { cursor: 'pointer', zIndex: 2000 },
  endpoint: ["Dot", { radius: 7 }], //端點(diǎn)的形狀
  connectorStyle: connectorPaintStyle,//連接線的顏色，大小樣式
  connectorHoverStyle: connectorHoverStyle,
  paintStyle: {
    strokeStyle: "#1e8151",
    fillStyle: "transparent",
    radius: 5,
    lineWidth: 2
  },    //端點(diǎn)的顏色樣式
  //anchor: "AutoDefault",
  isSource: true,  //是否可以拖動(dòng)（作為連線起點(diǎn)）
  connector: ["Straight", { stub: [0, 0], gap: 10, cornerRadius: 5, alwaysRespectStubs: true }], //連接線的樣式種類有[Bezier],[Flowchart],[StateMachine ],[Straight ]
  isTarget: true,  //是否可以放置（連線終點(diǎn)）
  maxConnections: -1,  // 設(shè)置連接點(diǎn)最多可以連接幾條線
  connectorOverlays: [["Arrow", { width: 10, length: 10, location: 1 }]]
};

然后再頁(yè)面初始化完成之后注冊(cè)事件

　　　　　　　　$(function(){
        //左邊區(qū)域的draggable事件
        $("#divContentLeftMenu .node").draggable({
          helper: "clone",
          scope: "plant"
        });

        //中間拖拽區(qū)的drop事件
        $("#divCenter").droppable({
          scope: "plant",
          drop: function (event, ui) {
            // 創(chuàng)建工廠模型到拖拽區(qū)
            CreateModel(ui, $(this));
          }
        });
　　　　　　　　});  
 
//1.創(chuàng)建模型（參數(shù)依次為：drop事件的ui、當(dāng)前容器、id、當(dāng)前樣式）
 function CreateModel(ui, selector) {
    //1.1 添加html模型
    var modelid = $(ui.draggable).attr("id");
    i++;
    var id = modelid + i;
    var cur_css = modelid;
    var type = $(ui.helper).attr("dbtype");
    $(selector).append('<div class="node ' + cur_css + '" id="' + id + '" dbtype="' + type + '" parentid="' + $(selector).attr("id") + '" onclick="oInitElement.GetPropertiesByType(\'' + type + '\',this)" ondblclick="InitStation().DbClick(\'' + type + '\',this)" >' + $(ui.helper).html() + '</div>');
    var left = parseInt(ui.offset.left - $(selector).offset().left);
    var top = parseInt(ui.offset.top - $(selector).offset().top);
    $("#" + id).css("left", left).css("top", top);
    //jsPlumb.setContainer($("#divCenter"));
    //1.2 添加連接點(diǎn)
    jsPlumb.addEndpoint(id, { anchors: "RightMiddle" }, hollowCircle);
    jsPlumb.addEndpoint(id, { anchors: "LeftMiddle" }, hollowCircle);
    jsPlumb.addEndpoint(id, { anchors: "TopCenter" }, hollowCircle);
    jsPlumb.addEndpoint(id, { anchors: "BottomCenter" }, hollowCircle);
    jsPlumb.draggable(id);

    //1.3 注冊(cè)實(shí)體可draggable和resizable
    $("#" + id).draggable({
      containment: "parent",
      start: function () {
        startMove();
      },
      drag: function (event, ui) {
        MoveSelectDiv(event, ui, id);
        jsPlumb.repaintEverything();
      },
      stop: function () {
        jsPlumb.repaintEverything();
      }
    });

    $("#" + id).resizable({
      resize: function () {
        jsPlumb.repaintEverything();
      },
      stop: function () {
        jsPlumb.repaintEverything();
        //oInitElement.SendPropRequest("DTO_TM_PLANT", $(this));
      }
    });
    return id;
  };

重點(diǎn)來(lái)看看這一句：

jsPlumb.addEndpoint(id, { anchors: "RightMiddle" }, hollowCircle);
調(diào)用了JsPlumb里面的addEndpoint方法，第一個(gè)參數(shù)表示頁(yè)面標(biāo)簽的id，第一個(gè)表示連線點(diǎn)的位置（RightMiddle、LeftMiddle、TopCenter、BottomCenter四個(gè)選項(xiàng)）；第三參數(shù)表示點(diǎn)的樣式以及連線的樣式。沒(méi)調(diào)用依次addEndpoint方法，元素上面就會(huì)多一個(gè)連線的節(jié)點(diǎn)。關(guān)于hollowCircle里面各個(gè)參數(shù)的意義，可以查看api。

還有一句多個(gè)地方都看到了：

jsPlumb.repaintEverything();
看字面意思大概能知道這句是干什么的，修復(fù)所有。當(dāng)在中間區(qū)域拖動(dòng)元素的時(shí)候，如果不帶這一句，節(jié)點(diǎn)不會(huì)跟著元素一起移動(dòng)。加上之后節(jié)點(diǎn)才會(huì)跟隨標(biāo)簽移動(dòng)。至此，最基礎(chǔ)的JsPlumb連線就完成了。

以上就是本文的全部?jī)?nèi)容，希望能夠幫助大家學(xué)習(xí)掌握流程圖的核心技術(shù)JsPlumb。

您可能感興趣的文章: