乐趣区

关于javascript:jsPlumb使用简述

jiezi

1.jsPlumb 的作用：
用于绘制 dom 元素之间的连线的一个框架，须要一个开始点的 id, 以及完结点的 id 就能够进行连线。能够通过属性设置连线端点的地位、连线的款式、断开连接等内容

2. 装置 jsPlumb
（1）装置 jsPlumb 的依赖：

npm i jsplumb

（2）在 main.js 中进行挂载:

import jsPlumb from 'jsplumb'
Vue.prototype.$jsPlumb = jsPlumb.jsPlumb

3.vue 我的项目中利用（react 同理）
（1）援用 jsPlumb，设置父级容器
如果不须要扭转连贯状态（断开，实线变虚线，扭转连贯 dom 等），间接在连线办法前加上即可

var jsPlumbs = jsPlumb.getInstance();（引入实例）jsPlumbs.setContainer("#boxParent");（设置父级容器）

如果须要常常手动扭转连贯状态倡议写在 mounted 当中

this.$nextTick(() => {var jsPlumbs = jsPlumb.getInstance();
  jsPlumbs.setContainer("#boxParent");
  this.jsPlumbs = jsPlumbs;
});

留神：

1. 如果不设置父级元素 jsPlumb 的连线会基于全局进行定位，会导致连线地位呈现偏差
2. 如果援用 jsPlumb 的办法间接写在 <script> 标签中，切换 router 会呈现连线显示不进去的问题

（2）为避免连线地位偏离须要给父级容器（设置 #boxParent 那一层）设置 css 属性：

position: relative;

给具体利用 jsPlumb 进行连线的内容设置 css 属性：

position: absolute;

（3）具体连线的办法

   jsPlumbs.ready(function() {
        jsPlumbs.connect({
            source: '开始 id',
            target: '完结 id',
            anchor: [Right, Left],
            endpoint: ["Dot"],
            connector: ["Bezier", { curviness: '150'}],
            paintStyle: {
                    stroke: "#9254DE",
                    strokeWidth: 1.5,
                    dashstyle: '3',
                  },
            endpointStyle: {
                    fill: "#120e3a",
                    outlineStroke: "#120e3a",
                    outlineWidth: 0,
                  },
        });
   })

正文

1.jsPlumbs.connect：连线的具体方法，可循环调用连贯多条线
2.source 与 target：进行连贯的两个节点设置的 id
3.anchor 连接线端点的地位：Left Right Top Bottom Center TopRight TopLeft BottomRight BottomLeft
4.Endpoint 设置端点类型：Dot 圆点、Rectangle 矩形、Image 图像、Blank 空白
5.connector 连线类型：Bezier 贝塞尔曲线（通过{curviness: ‘150’} 能够设置弧度，默认 150）、Straight 直线、Flowchart 流程图、State Machine 状态机
6.paintStyle：设置连接线的款式，strokeWidth 设置粗细，dashstyle 管制是否是虚线
7.endpointStyle：设置端点的款式

（4）革除连贯（用于革除之前所有的连线）

jsPlumbs.reset();

参考文章：jsplumb 中文基础教程

退出移动版