主页 / 问题 / 1316327
Accepted
xzdwq
Asked:2022-08-11 05:53:33 +0000 UTC2022-08-11 05:53:33 +0000 UTC

水平滚动时 JsPlumb 不会重绘链接

  • 772

使用 JsPlumb (2.15.6) 在 Vue 中的块之间建立链接。
水平滚动和重绘链接存在问题（见 gif） 在此处输入图像描述

特点是水平滚动不是整个页面，而是内部 div 元素（使用 css overflow-x: scroll）
初始化代码：

// свойства
defaultJsPlumbSettings: {
        Connector: ['Flowchart', {
          alwaysRespectStubs: true,
          midpoint: 0.2,
          stub: [10, 15],
          cornerRadius: 20
        } ],
        PaintStyle: {
          stroke: 'gray',
          strokeWidth: 2
        },
        EndpointStyles: [{ fill: 'gray' }, { fill: 'gray' }],
        HoverPaintStyle: { stroke: 'red' },
        EndpointHoverStyle: { fill: 'red' }
      }
// инициализация
jsPlumb.ready(() => {
      const usergroup_graph = this.$refs.usergroup_graph;
      const jsPlumbInstance = jsPlumb.getInstance({
        ...this.defaultJsPlumbSettings
      });

      jsPlumbInstance.setContainer(usergroup_graph);

      jsPlumbInstance.connect({
        source: el_1,
        target: el_2,
        ...
      });
})

这个函数将解决这个问题：

usergroup_graph.onscroll = () => { jsPlumbInstance.repaintEverything() };

但是使用这种方法，重绘会出现一些延迟，显然不被认为是一个合格的决定。比如根本不指定jsPlumbInstance.setContainer，那么水平滚动就不存在这样的问题，但是不指定容器，链接会移位，没有相对坐标

javascript

1 个回答

  1. Best Answer

    正如@Talleyran 在评论中所建议的那样，您需要将容器包装在另一个 div 块中并且已经将 css 挂在它上面，但是如果您没有为包装块和容器本身overflow-x: scroll指定相同的 css，这可能不起作用。 解决方案：position: relative;

    <div style="position: relative; overflow-x: scroll;">
  <div style="position: relative;" ref="usergroup_graph">
    • 0

相关问题