vue3 @antv/x6 使用画布滚动条以后的几个问题的解决

花花鱼2024-08-21 17:31

1、先上一个官方的图：https://x6.antv.antgroup.com/tutorial/plugins/scroller

2、然后再上个问题图，初始化以后，滚动条的位置在居中位置。

其实这里的滚动条的位置也是在中间，但我们要求是从最顶部开始，如果宽度够的话，不要显示水平滚动条。

3、初始化代码如下：

import { Scroller } from '@antv/x6-plugin-scroller'

const graph = new Graph({
  background: {
    color: '#F2F7FA',
  },
})
graph.use(
  new Scroller({
    enabled: true,
  }),
)

4、然后我们来看一下Options：

5、我们来做一下选项的优化，让滚动条看上去还可以的样子：

代码如下：

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

这里面最主要有二个：

1）padding：设置上、右、下、左边距全设为0，不要留空白，当然这个根据实际情况进行调整。

2）className：自定义style，这里设置滚动条显示与否。

.scrollerCss {
    overflow-x: hidden;
    overflow-y: auto;
  }

这样一设置，基本上可以满足项目需要了。