jsplumb外掛學習--單個節點新增多個錨點
阿新 • • 發佈:2018-11-20
思路:
其實所謂的新增多個描點,就是新增相同的端點,但是指定描點不同的位置
核心程式碼:
/*新增多個錨點*/ let endpoint6_1 = jsPlumb.addEndpoint('flowchartWindow2',{ anchor: [0.25, 0, 0, -1], },dragConnection); /*新增多個錨點*/ let endpoint6_2 = jsPlumb.addEndpoint('flowchartWindow2',{ anchor: [0.75, 0, 0, -1], },dragConnection);
全部程式碼:
<template> <div> ============================40、Jsplumb外掛的使用--單個節點新增多個錨點========================= <div id="labelManage"> <div id="main"> <div class="flowchart-demo" id="flowchart-demo"> <div class="window" id="flowchartWindow1">1 </div> <div class="window" id="flowchartWindow2">2 </div> </div> </div> </div> </div> </template> <script> import jsplumb from 'jsplumb' export default { name: "vue2-preview_36", data(){ }, /* mounted()函式是vue生命週期中的一個函式 當DOM生成以後所呼叫的函式 這個函式一般都是用來操作DOM * */ mounted(){ this.jsPlumb(); }, methods:{ jsPlumb(){ jsPlumb.ready(function () { //=========設定flowchartWindow1節點可以拖動PlainArrow /* 引數一:可以傳入節點標籤id/元素id列表/選擇器 引數二:{containment: 'parent'} 表示在父容器內部拖動,不能越出(限制節點的拖動範圍) */ jsPlumb.draggable('flowchartWindow1',{containment: 'parent'}); jsPlumb.draggable('flowchartWindow2',{containment: 'parent'}); //=========拖動建立連線========= //jsPlumb.setContainer('diagramContainer'); /* 核心程式碼: isSource: true, isTarget: true, dragConnection 表示拖動的配置 當isSource和isTarget都為true時,那麼就可以實現拖動建立連線 connector: ['Straight'], 表示連線的樣式為直線 endpointStyle 表示端點的樣式 maxConnections: -1, -1表示可以拖拽出多條線,預設是1,如果給定數字5表示最多可以連線5條線 * */ let dragConnection = { isSource: true, isTarget: true, connector: ['Straight'], endpointStyle: { fill: 'lightgray', outlineStroke: 'lightgray', outlineWidth: 1 ,width: 12, length: 5}, maxConnections: -1, }; let endpoint5 = jsPlumb.addEndpoint('flowchartWindow1',{ anchor: ['Bottom'], },dragConnection); /*新增多個錨點*/ let endpoint6_1 = jsPlumb.addEndpoint('flowchartWindow2',{ anchor: [0.25, 0, 0, -1], },dragConnection); /*新增多個錨點*/ let endpoint6_2 = jsPlumb.addEndpoint('flowchartWindow2',{ anchor: [0.75, 0, 0, -1], },dragConnection); }) } } } </script> <style scoped lang="scss"> .flowchart-demo { width: 800px; height: 600px; border: 1px solid #000; position: relative; } .flowchart-demo .window { border: 1px solid #346789; /*box-shadow 屬性向框新增一個或多個陰影 box-shadow: 2px 2px 19px #aaa; box-shadow: (必需。水平陰影的位置。允許負值) (必需。垂直陰影的位置。允許負值。) (可選。模糊距離。) (可選。陰影的顏色。) 因為是新屬性,為了相容各主流瀏覽器並支援這些主瀏覽器的較低版本,基於主流瀏覽器上使用box-shadow屬性時, 我們需要將屬性的名稱寫成-webkit-box-shadow的形式。 Firefox瀏覽器則需要寫成-moz-box-shadow的形式 歐朋瀏覽器 -o-box-shadow IE>9 -ms-box-shadow -webkit 是在Chrome瀏覽器中用的 一般是指 瀏覽器是webkit核心 -webkit-box-shadow */ box-shadow: 2px 2px 19px #aaa; -o-box-shadow: 2px 2px 19px #aaa; -webkit-box-shadow: 2px 2px 19px #aaa; -moz-box-shadow: 2px 2px 19px #aaa; /* -moz-border-radius 火狐瀏覽器的邊框圓角*/ -moz-border-radius: 0.5em; border-radius: 0.5em; opacity: 0.5; filter: alpha(opacity=80); text-align: center; position: absolute; background-color: #eeeeef; color: black; font-family: helvetica; font-size: 0.9em; line-height: 60px; width: 60px; height: 60px; } .flowchart-demo .window:hover { box-shadow: 2px 2px 19px #444; -o-box-shadow: 2px 2px 19px #444; -webkit-box-shadow: 2px 2px 19px #444; -moz-box-shadow: 2px 2px 19px #444; opacity: 0.6; filter: alpha(opacity=60); } .flowchart-demo .active { border: 1px dotted green; } .flowchart-demo .hover { border: 1px dotted red; } #flowchartWindow1 { top: 7em; left: 30em; } #flowchartWindow2 { top: 34em; left: 30em; } </style>