Vue3监控div的宽高变化事件canvas自适应
有时候使用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 });
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。
更多推荐



所有评论(0)