【jsPlumb】使用记录

最新推荐文章于 2024-09-16 07:17:33 发布

兵腾傲宇

最新推荐文章于 2024-09-16 07:17:33 发布

阅读量1k

点赞数 1

分类专栏：开发心得文章标签： jsPlumb svg 曲线绘图

本文链接：https://blog.csdn.net/qq_23334071/article/details/121131294

版权

本文记录了在Vue项目中使用jsPlumb库进行SVG曲线绘图的实践，包括遇到的问题及解决方案。在操作过程中，需注意保存连接线以便正确删除，避免使用数组split方法。同时，文章提供了关于jsPlumb的默认配置说明和示例代码。

摘要由CSDN通过智能技术生成

vue中的引用方式

import { jsPlumb } from 'jsplumb';

问题1：删除连接线或节点报错

答：1、创建连接的时候，需要将line保存起来

const line = plumbIns.connect({...})
jsPlumb.$container.push(line);

2、每次删除的时候，需要将对应的线也进行删除（千万别使用split进行切割数组）

let Arr = [];
/**
  * @connections 初始化添加的svg线
  * @deleteConnection 删除线的时候，必须同步删除  @connections  否则会到导致组件报错
  *
  */
for (var i in connections) {
  if (connections[i].sourceId === 'A001') {
    plumbIns.deleteConnection(connections[i]);
  } else {
    Arr.push(connections[i]);
  }
}
jsPlumb.$container = Arr;

2、默认配置及说明

const jsPlumbConfig = {
  Anchor: 'BottomCenter', //端点的定位点的位置声明（锚点）：left，top，bottom等
  Anchors: [null, null], //多个锚点的位置声明
  ConnectionsDetachable: true, //连接是否可以使用鼠标默认分离
  ConnectionOverlays: [], //附加到每个连接的默认重叠
  Connector: 'Bezier', //要使用的默认连接器的类型：折线，流程等
  Container: null, //设置父级的元素，一个容器
  DoNotThrowErrors: false, //如果请求不存在的Anchor，Endpoint或Connector，是否会抛出
  DragOptions: {}, //用于配置拖拽元素的参数
  DropOptions: {}, //用于配置元素的drop行为的参数
  Endpoint: 'Dot', //端点（锚点）的样式声明（Dot）
  Endpoints: [null, null], //多个端点的样式声明（Dot）
  EndpointOverlays: [], //端点的重叠
  EndpointStyle: { fill: '#456' }, //端点的css样式声明
  EndpointStyles: [null, null], //同上
  EndpointHoverStyle: null, //鼠标经过样式
  EndpointHoverStyles: [null, null], //同上
  HoverPaintStyle: null, //鼠标经过线的样式
  LabelStyle: { color: 'black' }, //标签的默认样式。
  LogEnabled: false, //