@antv/x6 填充一个背景图片,并让其显示出来。

1、填充背景色的时候,开始不显示背景图片,只显示背景颜色。

2、开始是放在assets/images目录下:

const graph = new Graph({
    container: document.getElementById("container") as HTMLElement,
    width: widthPx,
    height: heightPx,
    background: {
      color: "#F2F7FA",
      position: {
        x: 0,
        y: 0,
      },
      size: {
        width: widthPx,
        height: heightPx,
      },
      image:
        "../assets/images/bg.jpg", // 设置背景图片
    },
  });

然后我们可以发现,并没有显示出来,只有背景颜色。

3、要显示的效果图如下 :

4、解决不显示图片的问题:将图片的相对路径改为url就可以了,http开头的。

const graph = new Graph({
    container: document.getElementById("container") as HTMLElement,
    width: widthPx,
    height: heightPx,
    background: {
      color: "#F2F7FA",
      position: {
        x: 0,
        y: 0,
      },
      size: {
        width: widthPx,
        height: heightPx,
      },
      image:
        "https://img.zcool.cn/community/038d08b56dfd4846ac72531cb42cdff.jpg", // 设置背景图片
    },
  });

5、也可以用函数的形式:

@antv/x6 填充一个背景图片,并让其显示出来。_第1张图片

graph.drawBackground({
    color: '#000',
    position:{
      x: 0,
      y: 0,
    },
    size: {
      width: widthPx,
      height: heightPx,
    },
    image: 'https://img.zcool.cn/community/038d08b56dfd4846ac72531cb42cdff.jpg', // 设置背景图片
  })

同样都可以达到相同的效果。

你可能感兴趣的:(@antv/x6,Vue3,vue.js)