antv/g6 窗口大小变化，canvas跟随窗口大小进行自适应

需求背景

canvas跟随窗口大小进行自适应

分析

当我们首次绘制的时候，canvas是已经绘制完成了，窗口大小发生改变了，canvas并没有进行重新绘制，就会导致看上去“不自适应”，一开始尝试过手动去修改canvas的width属性，以及它的style.width，但是这种修改，由于不是重新绘制，而是原地修改，会导致css的属性都发生变化了，但是canvas绘制的尺寸对不上，那既然这样，不如把canvas直接清除，让它自己去拿到屏幕的尺寸，重新绘制。

解决方式

正确的做法是对画布进行清除,并且重新绘制，那应该什么时候进行画布清除，就需要监听容器div的宽度什么时候发生改变。

    
    /**
     * 监听宽度变化 清除画布，重新绘制canvas
     */
    resizeDom() {
      const resizeObserver = new ResizeObserver(() => {
        if (this.$refs.treeWrap&&this.wrapWidth !== this.$refs.treeWrap?.clientWidth) {
          //wrapWidth： 存储容器的旧宽度，与新的宽度对比
          this.wrapWidth = this.$refs.treeWrap.clientWidth;
          this.graph.clear(); // 清除画布
          this.showChart(this.treeData);// 重新绘制
          this.$forceUpdate();// 
        }
      });
      resizeObserver.observe(document.querySelector('.main-container'), {
        attributeFilter: ['style']
      });
    },

参考

1. antv-g6-clear
2. ResizeObserver