1. 程式人生 > >jsplumb外掛學習--單個節點新增多個錨點

jsplumb外掛學習--單個節點新增多個錨點

 

思路:

     其實所謂的新增多個描點,就是新增相同的端點,但是指定描點不同的位置

核心程式碼:

          /*新增多個錨點*/
          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>

 

效果圖: