使用
svg完成畫圖，四個概念：
anchor: endpoint
在的位置，可通過
name
訪問endpoint
：connection
的一端節點,通過
addpoint makesource, connect
建立，connector
：連線線
overlay:connector
的裝飾元件，如
labelarrow 乙個
connection
由乙個connector
，兩個endpoint，0
或者多個
overlay
構成，每個
endpoint
有乙個關聯的
anchor.
static：固定不可移動的點
dynamic：從一組
staticanchor
中，每次動態選取乙個合適的
perimeter：沿著特定圖形的邊
continous：沒有固定的位置，根據線另一端點的朝向決定
bezier(default)：彎曲的貝塞爾曲線，引數是
curviness
用來定義控制點，預設
150
straight：stub
和gap
（線和endpoint
的間隔）
flowchart:折線，有
stubalwaysrespectstubs gap midpoint
**折點）和
cornerradius
statemachine：輕微彎曲的線，
quadraticbezier
（二次貝塞爾曲線），有
margin,curviness, proximitylimit
（連線到自己時最小距離）
dot：radius cssclass hoverclass
rectangle:width height cssclas hoverclass
blank:不可見，對於可拖拽鏈結的，使用
dot和
rectangle
引數，並在
css中設為透明。
image:從url
得到image
，src cssclass hoverclass
arrow:控制長寬等
label:
plainarrow：三角形箭頭
diamond：菱形
custom：任意的
dom元素，需要實現
create
方法
[0..1]代表connector
上的比例
大於1或小於
0代表絕對值的
pixel
adding
：在connectmakesource addendpoint
中show
和hideoverlay
：connection.hideoverlay,connection.showoverlay
，endpoint
有同樣的方法
removeoverlay
：connection.removeoverlay()
var common = ;
jsplumb.connect(, common);
jsplumb.connect(, common);
設定將整個endpoint
為 source
var examplegreyendpointoptions = ,
issource:true,
connectorstyle : ,
istarget:true
};
var endpoint = jsplumb.addendpoint('elementid', examplegreyendpointoptions
);
element
變成target
或source
設定只有乙個jsplumb.makesource("el1", ],maxconnections:3
});
endpoint
通過jsplumb.detach(conn);刪除eljsplumb.detachallconnections(el, [params])
jsplumb.detacheveryconnection();
connect
中的parameters
引數向jsplumb
中傳入引數。
jsplumb.animate : function(el, properties, options)呼叫方式類似於jquery
可以用來查詢overlays: cssclassconnection
或者endpoint
等
paintstyle
可設定：
fillstyle strokestyle linewidth outlinewidth outlinecolordashstyle
hoverpaint style
hoverpaintstyle endpointhoverstyles
JsPlumb例項展示
function firewall css vpn2 css vpn css exchange css wangzha css exchange1 css cms css jsplumb.ready function jsplumb.importdefaults 拖動時滑鼠停留在該元素上顯示指標，通...
jsplumb 繪製頁面鏈結線
最近公司打算實現通用的流程設計，對比之前公司有一套原始碼，發現它採用的是flowdesign來實現的，但從晚上查詢之後發現它實際上是採用了jsplumb 來實現流程繪製的，這也不難理解，畢竟jsplumb 是通用的程式，flowdesign只能算是jsplumb的具體使用，flowdesign 的位...
JsPlumb使用心得 1
1.初始化方法 必須要 jsplumb.bind ready function dot rectangle image從給定的url中繪製影象 connector flowchart 連線線樣式 bezier curviness彎度 150,stub曲線離開始點距離 0 貝塞爾曲線,flowchar...