@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、也可以用函数的形式:

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

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

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值