jsplumb 繪製頁面連結線
最近公司打算實現通用的流程設計，對比之前公司有一套原始碼，發現它採用的是FlowDesign來實現的，但從晚上查詢之後發現它實際上是採用了jsplumb 來實現流程繪製的，這也不難理解，畢竟jsplumb 是通用的程式，FlowDesign只能算是jsplumb的具體使用，
FlowDesign 的地址是http://flowdesign.leipi.org/
Jsplumb官網：https://jsplumbtoolkit.com
GitHub：https://github.com/sporritt/jsplumb/
jsplumb 的概念中主要分為四部分：參照jsplumb介紹的文件寫的
錨
端點(Endpoint )：連結的一端的視覺化表示，您可以建立並可以連結他們；您可以讓他們支援拖拽，或者您可以直接使用jsPlumb.connect()在建立連結時直接建立它們。
聯結器
覆蓋物(Overlay)：一個UI元件，是用來是用來裝飾聯結器，例如標籤、箭頭等。
參照https://segmentfault.com/a/1190000013422507 繪製的位置圖來理解
按照說明必須引用的檔案如下：
<script type="text/javascript" src="js/jquery.min.js" ></script>
<script type="text/javascript" src="js/jquery-ui-1.8.14.custom.min.js" ></script>
<script type="text/javascript" src="js/jsplumb.min.js" ></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
在使用jsplumb來實現自己的示例程式如下：
<style>
#diagramContainer {
padding: 20px;
width: 80%;
height: 400px;
border: 1px solid gray;
background-image: url(http://p3alsaatj.bkt.clouddn.com/20180227163310_1bVYeW_grid.jpeg);
background-repeat: repeat;
}
.item {
height: 80px;
width: 80px;
border: 1px solid blue;
float: left;
}
.myCssClass
{
color: bisque;
background-color: red;
}
</style>
</head>
<body>
<div id="diagramContainer">
<div id="item_left" class="item"></div>
<div id="item_right" class="item" style="margin-left:300px;margin-top: 100px;"></div>
</div>
</body>
<script>
//Straight:直線，Bezier :Bezier曲線,流程圖連結器 Flowchart
var common = {
isSource:true,
isTarget:true,
connector: ['Bezier'],
//paintStyle: { stroke: 'lightgray', strokeWidth: 3 },//空的錨點風格
endpointStyle: { fill: 'lightgray', outlineStroke: 'darkgray', outlineWidth: 2 }
}
jsPlumb.ready(function(){
//新增節點
jsPlumb.addEndpoint('item_left',{achors:['Right']},common)
jsPlumb.addEndpoint('item_right',{achors:['Left']},common)
jsPlumb.draggable('item_left', {
containment: 'parent',
grid: [10, 10]
})
jsPlumb.draggable('item_right')
// 單點選了連線線, 似乎不怎麼好用
jsPlumb.bind('click', function (conn, originalEvent) {
if (confirm('確定刪除所點選的連結嗎？')) {
jsPlumb.detach(conn)
}
})
});
//增加拖拽，也不怎麼好用
$('.item').resizable({
resize: function (event, ui) {
jsPlumb.repaint(ui.helper)
}
})
//jsPlumb.setContainer('adiagramContainer')
</script>顯示效果如下
C#實現參考地址：http://www.cnblogs.com/sggx/p/3836432.html