其他分享
首页 > 其他分享> > 使用jsplumb绘图,实现连线

使用jsplumb绘图,实现连线

作者:互联网

近期有个需求,实现节点之间的连线,选用的jsplumb来绘制。

我自己在实现过程中,遇到了重绘问题/加载顺序问题/自动刷新过程中保持连线正确等很多问题,查了好多资料后,得以解决,有问题的小伙伴可以一起交流。

jsplumb涉及的几个重要网址,可以作为研发过程中的依据:

 jsplumb官网:https://jsplumbtoolkit.com

 jsplumb中文(这个中文网站列出的API还是比较完善的):https://github.com/wangduanduan/jsplumb-chinese-tutorialhttps://wdd.js.org/jsplumb-chinese-tutorial/#/

jsPlumb是一个比较强大的绘图组件,它提供了一种方法,主要用于连接网页上的元素。在现代浏览器中,它使用SVG或者Canvas技术,而对于IE8以下(含IE8)的古董浏览器,则使用VML技术。

就该库而言,我认为有一个很重要的点,即视图与数据结构同步。jsplumb并不维护数据结构,数据结构需要自己去维护,如果页面发生改变,jsplumb会通过事件通知你。你通过事件去改变你的数据。

 

需要特别注意的一点是,jsplumb是操作dom进行运行的,必须要等dom全部加载完之后在进行渲染jsPlumb。vue开发的话,可以写在this.$nextTick方法里。流程图更新时,会重新获取dom的id。

同时需要注意:当数据改变时,流程图也要跟着改变,所以要清除之前的连接线,然后重新绘制。

清除连线调用reset方法:

let plumbIns = jsPlumb.getInstance();
plumbIns.reset();

使用该组件库最基本的配置如下代码:

private connectEle(relations) {
    // 定义默认配置
    const defaultConfig = {
      // 默认从左右选取最优锚点
      anchor: ['Left', 'Right'],
      // 连线为直线,间隙为10
      connector: ['Straight', { gap: 10 }],
      // 端点为空
      endpoint: 'Blank',
      // 设定线条样式
      paintStyle: { stroke: '#cdf1f1', strokeWidth: 2 },
      Container: 'monitor-chart-container',
    };
    this.plumbIns.ready(() => {
      relations.forEach(ele => {
        defaultConfig.paintStyle = ele.reachable
          ? { stroke: '#cdf1f1', strokeWidth: 2 }
          : { stroke: '#aaaaaa', strokeWidth: 1 };
        this.plumbIns.connect(
          {
            source: ele.source,
            target: ele.target,
          },
          defaultConfig,
        );
      });
    });
  }

 

标签:strokeWidth,连线,plumbIns,ele,jsplumb,绘图,defaultConfig
来源: https://blog.csdn.net/qq_29918313/article/details/114639790