@antv/x6 要求不显示水平滚动条，并且如果水平方向上显示不全的节点，则要求自动显示全部节点，垂直方向可以出现滚动条来滚动显示所有的节点。

news2024/11/15 1:57:36

1、要求一共有二个：

要求一：水平滚动条不显示。之前的文章中就已经发表过，可以用Scroller的className来处理。
要求二：水平方向上显示全部节点，如果有显示不全的节点（即看不到的节点）要求能够显示出来，垂直方向的滚动条可以显示出来，然后用滚动条来滚动显示下面看不到的节点。

2、思路：

思路一：水平不显示滚动条。vue3 @antv/x6 使用画布滚动条以后的几个问题的解决_antv x6超出屏幕滚动条-CSDN博客

graph.use(
      new Scroller({
        enabled: true,
        padding: {
          top: 0,
          right: 0,
          bottom: 0,
          left: 0,
        },
        pageVisible: false,
        pageBreak: false,
        autoResize: true,
        className: 'scrollerCss',
      }),
    );

思路二：水平方向上显示所有节点。

可以通过节点的视口的坐标与容器的宽度进行比较，查看是否已经超过，如果超过，就需要重新处理容器的rect，这样就可以了。

// 自定义函数来检测节点是否完全显示
  function isNodeCompletelyVisible(node) {
    const bbox = node.getBBox(); // 获取节点的包围盒
    // const viewport = graph.getContentArea(); // 获取画布视口
    // console.log(bbox.x, viewport.x, bbox.right, viewport.x + viewport.width);

    // 检查节点的四个角是否都在视口内
    return (
      // bbox.x > viewport.x &&
      // bbox.y > viewport.y &&
      // bbox.right < viewport.x + viewport.width &&
      // bbox.bottom < viewport.y + viewport.height
      // bbox.x > viewport.x && bbox.right > viewport.x + viewport.width
      bbox.x > unref(containerWidth)
    );
  }

注掉的部分是baidu ai生成的代码，实测还是有些问题，与我们项目的要求还是不太相符。

通过实测，发现bbox.x > unref(containerWidth)，这样就会返回true，那么我们就要重新设置rect来达到显示所有节点的效果。

const containerWidth = ref(0);

function resizeFitContent() {
    let nodes = graph.getNodes();
    let reqResize = false;
    nodes.forEach((node) => {
      if (!reqResize) {
        reqResize = isNodeCompletelyVisible(node);
      }
    });

    if (reqResize) {
      let rect = graph.getContentArea();
      // console.log(rect.x, rect.y, rect.width, rect.height);
      //下面是我们实测的padding与rect，需要根据自己项目的实际情况进行调整。
      graph.zoomToRect(
        {
          x: rect.x - 10,
          y: rect.y,
          width: rect.width + 20,
          height: viewState.height - 100,
        },
        {
          padding: {
            top: '0px',
            right: '30px',
            bottom: '0px',
            left: '30px',
          },
        },
      );
    }

3、最好上张图，来明确下效果：

一开始只显示了四个节点，然后我们通过检测要不要自动调整以适应画布，然后看到所有的节点。