有时候使用canvas会以容器的宽高来填充,当容器div宽高发生变化时需要主动改变canvas的宽高以填充满,以下是vue3中监视div宽高变化的方式,实测有效。

使用watch 监视dom的ResizeObserver

    <div id="container" ref="stageRef" class="container-div" />

watch(stageRef, (newBox, oldBox) => {

  if (newBox) {

    // 监听宽度变化

    new ResizeObserver((entries) => {

      entries.forEach((entry) => {

        console.log('Width changed:', entry.contentRect.width);

        lastResize = new Date().getTime()

        let tmpResize = lastResize

        setTimeout(() => {

          if(tmpResize==lastResize){

        // 自适应

            if(currentWorkShop.value.map){

          if(konvaConfig.value.stage){

          konvaConfig.value.stage.removeChildren();

        }

  showTargetMap(currentWorkShop.value)

  }

          }

        }, 300);

      });

    }).observe(newBox);

  }

}, { immediate: false });

GitHub 加速计划 / vu / vue
109
18
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:4 个月前 )
9e887079 [skip ci] 1 年前
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 1 年前
Logo

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。

更多推荐