jsplumb已知source和target怎么连线

Question

在网上查了好多资料,使用jsplumb.getAllConnects()获取到了所有的连接线的起始id和终止id,但是使用connect方法连接会在之前的端点的基础上加了一个新的遮罩层,想问一下各位有经验的前辈,有没有方法直接连接已经存在的遮罩层啊?在源码里面通过断点的方式发现里面有个this.draw()方法应该可以,但是不会使用,希望有经验的前辈能指点一二!感激不尽

Answer 1

Answer 2

找到解决办法了，connect传入uuids可以在已有点之间建立连线而不会重新建立节点

jsPlumb.connect({
  uuids: [source, target],
})

Answer 3

切换路由之后连线就没了是怎么回事呢

Answer 4

<template>
  <div id="labelManage">
    <div id="main">
      <ul class="flowchart-demo" id="flowchart-demo" ref="demo">
        <li class="circle" id="flowchartWindow1" ref="dd" @mouseenter="handleCircle1"><span>开始</span></li>
        <li class="window" id="flowchartWindow2" ref="qq" @mouseenter="handleWindow"><span>流程</span></li>
        <li class="diamond" id="flowchartWindow3" ref="dia" @mouseenter="handleDiamond"><span>判断</span></li>
        <li class="circle" id="flowchartWindow4" ref="cir" @mouseenter="handleCircle2"><span>结束</span></li>
      </ul>
    </div>
  </div>
</template>
<script>
    import {jsPlumb} from 'jsplumb';
    import draggable from 'vuedraggable';
    export default {
        components: {
            draggable
        },
        data () {
            return {
                count1: 1,
                count2: 1,
                count3: 1,
                count4: 1
            };
        },
        methods: {
            handleCircle1 () {
                let vm = this;
                document.onkeydown = function (e) {
                    if (e.keyCode === 67) {
                        let clone = vm.$refs.dd.cloneNode(true);
                        let target = vm.$refs.demo;
                        target.appendChild(clone);
                        let l = target.children[target.children.length - 1];
                        l.id = 'circle' + vm.count1;
                        vm.count1++;
                        vm.jsPlumbSet(l);
                    };
                };
            },
            handleCircle2 () {
                let vm = this;
                document.onkeydown = function (e) {
                    if (e.keyCode === 67) {
                        let clone = vm.$refs.cir.cloneNode(true);
                        let target = vm.$refs.demo;
                        target.appendChild(clone);
                        let l = target.children[target.children.length - 1];
                        l.id = 'cir' + vm.count2;
                        vm.count2++;
                        vm.jsPlumbSet(l);
                    }
                };
            },
            handleWindow () {
                let vm = this;
                document.onkeydown = function (e) {
                    if (e.keyCode === 67) {
                        let clone = vm.$refs.qq.cloneNode(true);
                        let target = vm.$refs.demo;
                        target.appendChild(clone);
                        let l = target.children[target.children.length - 1];
                        l.id = 'window' + vm.count3;
                        vm.count3++;
                        vm.jsPlumbSet(l);
                    }
                };
            },
            handleDiamond () {
                let vm = this;
                document.onkeydown = function (e) {
                    if (e.keyCode === 67) {
                        let clone = vm.$refs.dia.cloneNode(true);
                        let target = vm.$refs.demo;
                        target.appendChild(clone);
                        let l = target.children[target.children.length - 1];
                        l.id = 'diamond' + vm.count4;
                        vm.count4++;
                        vm.jsPlumbSet(l);
                    }
                };
            },
            jsPlumbSet (element) {
                // 基本连接线样式
                let connectorPaintStyle = {
                    lineWidth: 4,
                    strokeStyle: '#61B7CF',
                    joinstyle: 'round',
                    outlineColor: 'white',
                    outlineWidth: 2
                };
                // 鼠标悬浮在连接线上的样式
                let connectorHoverStyle = {
                    lineWidth: 4,
                    strokeStyle: '#216477',
                    outlineWidth: 2,
                    outlineColor: 'white'
                };
                jsPlumb.ready(function () {
                    let j = jsPlumb.getInstance({
                        DragOptions: {cursor: 'pointer', zIndex: 2000},
                        PaintStyle: {stroke: 'red', strokeWidth: 1},  // 配置自己拖拽小点的时候连接线的默认样式
                        Endpoint: 'Dot', // 这个是控制连线终端那个小点的半径
                        EndpointStyle: {fill: 'gray', radius: 4}, // 这个是控制连线终端那个小点的样式
                        EndpointHoverStyle: {fill: 'blue'}, // 这个是控制连线终端那个小点的样式
                        isSource: true,
                        isTarget: true,
                        Connector: ['Flowchart', {curviness: 70}],
                        maxConnections: -1, // 不限条数
                        connectorStyle: connectorPaintStyle,// 连接线的颜色，大小样式
                        connectorHoverStyle: connectorHoverStyle,
                        ConnectionOverlays: [
                            ['Arrow', {
                                location: 1,
                                events: {
                                    click: function (arrow, evt) {
                                    }
                                }
                            }],
                            ['Label', {
                                location: 0.5,
                                id: 'label',
                                cssClass: 'aLabel', //hover时label的样式名
                                events: {
                                    click: function (label, evt) {
                                    }
                                },
                                visible: true
                            }]
                        ],
                        Container: 'flowchart-demo'
                    });
                    j.draggable(element.id, {
                        containment: 'flowchart-demo'
                    });
                    j.addEndpoint(element.id, {anchor: 'Bottom'}, j);
                    j.addEndpoint(element.id, {anchor: 'TopCenter'}, j);
                    j.addEndpoint(element.id, {anchor: 'Left'}, j);
                    j.addEndpoint(element.id, {anchor: 'Right'}, j);
                    // j.repaintEverything(); // 节点跟着元素一起移动
                    j.bind('dblclick', function (conn, event) {
                        j.deleteConnection(conn);
                        return false;
                    });

                    // 自动避免连线源锚点和目标锚点在同一节点上
                    j.bind('beforeDrop', function (conn) {
                        if (conn.sourceId === conn.targetId) {
                            return false;
                        } else {
                            return true;
                        }
                    });
                });
            }
        },
        mounted () {
            // jsPlumb.ready(function () {
            //     let j = jsPlumb.getInstance({
            //         DragOptions: {cursor: 'pointer', zIndex: 2000},
            //         PaintStyle: {stroke: 'red', strokeWidth: 1},  //配置自己拖拽小点的时候连接线的默认样式
            //         Endpoint: 'Dot', //这个是控制连线终端那个小点的半径
            //         EndpointStyle: {fill: 'gray', radius: 4}, //这个是控制连线终端那个小点的样式
            //         EndpointHoverStyle: {fill: 'blue'}, //这个是控制连线终端那个小点的样式
            //         isSource: true,
            //         isTarget: true,
            //         Connector: ['Flowchart', {curviness: 70}],
            //         maxConnections: -1, // 不限条数
            //         ConnectionOverlays: [
            //             ['Arrow', {
            //                 location: 1,
            //                 events: {
            //                     click: function (arrow, evt) {
            //                     }
            //                 }
            //             }],
            //             ['Label', {
            //                 location: 0.5,
            //                 id: 'label',
            //                 cssClass: 'aLabel', //hover时label的样式名
            //                 events: {
            //                     click: function (label, evt) {
            //                     }
            //                 },
            //                 visible: true
            //             }]
            //         ],
            //         Container: 'flowchart-demo',
            //     });
            //
            //     j.draggable('flowchartWindow2');
            //     j.draggable('flowchartWindow3');
            //     j.draggable('flowchartWindow1');
            //     j.draggable('flowchartWindow4');
            //     j.addEndpoint('flowchartWindow2', {anchor: 'Bottom'}, j);
            //     j.addEndpoint('flowchartWindow3', {anchor: 'TopCenter'}, j);
            //     j.addEndpoint('flowchartWindow3', {anchor: 'Bottom'}, j);
            //     j.addEndpoint('flowchartWindow1', {anchor: 'TopCenter'}, j);
            //     j.bind('beforeDetach', function (conn, event) {
            //         debugger;
            //     });
            //     j.bind('dblclick', function (conn, event) {
            //         j.deleteConnection(conn);
            //         return false;
            //     });
            //     // 自动避免连线源锚点和目标锚点在同一节点上
            //     j.bind('beforeDrop', function (conn) {
            //         if (conn.sourceId === conn.targetId) {
            //             return false;
            //         } else {
            //             return true;
            //         }
            //     });
            //     // j.addEndpoint('flowchartWindow1', {uuid: 1, anchor: 'TopCenter', isSource: true});
            //     // j.addEndpoint('flowchartWindow2', {uuid: 2, anchor: 'Bottom', isSource: true});
            //     // j.addEndpoint('flowchartWindow3', {uuid: 3, anchor: 'TopCenter', isTarget: true});
            //     // // j.addEndpoint('flowchartWindow3', {uuid: 4, anchor: 'Buttom', isSource: true});
            //     // j.addEndpoint('flowchartWindow1', {uuid: 1, anchor: 'TopCenter', isTarget: true});
            //     // j.addEndpoint('flowchartWindow3', {anthors: 'Right', isTarget: true});
            //     // let line = j.connect({uuids: ["1", "2"], editable: true})
            //     // j.connect({
            //     //     uuids: [2, 3],  //根据uuid进行连接
            //     //     paintStyle: {stroke: 'red', strokeWidth: 3},  //线的样式
            //     //     endpointStyle: {fill: 'blue', outlineStroke: 'darkgray', outlineWidth: 2},//点的样式
            //     //     overlays: [['Arrow',
            //     //         {
            //     //             width: 12,
            //     //             length: 12,
            //     //             location: 0.5,
            //     //             Label: {
            //     //                 label: 'jj',
            //     //                 color: 'blue'
            //     //             }
            //     //         }
            //     //     ]]   //覆盖物 箭头 及 样式
            //     // });
            //
            // });

        }
    }
    ;
</script>

<style scoped>
  .flowchart-demo {
    width: 800px;
    height: 600px;
    border: 1px solid #000;
    position: relative;
  }

  .flowchart-demo li {
    border: 1px solid #346789;
    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;
    position: absolute;
    background-color: #eeeeef;
    color: black;
    font-family: helvetica;
    font-size: 0.9em;
    line-height: 60px;
    width: 120px;
    height: 60px;
    text-align: center;
  }

  .flowchart-demo .window {
    -moz-border-radius: 0.5em;
    border-radius: 0.5em;
  }

  .flowchart-demo .circle {
    border-radius: 30px;
  }

  .flowchart-demo .diamond {
    width: 70px;
    height: 70px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
  }

  .flowchart-demo .diamond > span {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
  }

  .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: 5em;
    left: 5em;
  }

  #flowchartWindow2 {
    top: 12em;
    left: 5em;
  }

  #flowchartWindow3 {
    top: 21em;
    left: 7em;
  }

  #flowchartWindow3 span {
    display: block;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
  }

  #flowchartWindow4 {
    top: 30em;
    left: 5em;
  }
</style>

请问，我这样写为什么复制出的div不能连接线