Typescript Vue3，合成API&；HTML画布绘图刷新问题

我有一个typescript代码库，我在其中创建了一个工作的数独板，只需直接处理DOM，并使用它的API在HTML画布元素上绘制

我现在想将我的项目扩展到一个完整的站点，我正在尝试将我已经拥有的东西合并到一个Vue3项目中。我正在将合成API与typescript一起使用。我已开始取得进展，但因电路板刷新问题而停止

以下是我的线路板组件的开始代码：

<template>
    <button @click="grow">Grow</button>
    <br><br>
    <div class="board">
        <canvas ref='myCanvas' :width="size.w" :height="size.h" tabindex='0' 
style="border:1px solid #000000;"
        ></canvas>
    </div>
</template>

<script lang="ts">

    import { defineComponent, onMounted, ref, reactive } from 'vue'
    import { CanvasManager } from '@/managers/canvasmanager'

    export default defineComponent({
        
        setup() {
                 
            let myCanvas = ref(null)
            let myContext = ref(null)
            let manager = ref(null)

            let size = reactive({
                w: 200,
                h: 200
            })

            function grow() {
                size.w += 10
                size.h += 10
                manager.drawGrid(4, 4, 1, 'black')
            }
            
            onMounted(() => {
                myContext = myCanvas.value.getContext('2d')
                manager = new CanvasManager(myContext, size.w, size.h)
                manager.drawGrid(4, 4, 1, 'black')
            })

            return {
                myCanvas,
                size,
                grow
            }
        }
    })
</script>

成长



从“vue”导入{defineComponent，onMounted，ref，reactive}
从“@/managers/CanvasManager”导入{CanvasManager}
导出默认定义组件({
设置（）{
让myCanvas=ref（null）
让myContext=ref（null）
let manager=ref（null）
让大小=反应({
w:200，
h:200
})
函数grow（）{
尺寸w+=10
尺寸h+=10
manager.drawGrid（4,4,1，‘黑色’）
}
未安装（（）=>{
myContext=myCanvas.value.getContext（'2d'）
manager=新的画布管理器（myContext，size.w，size.h）
manager.drawGrid（4,4,1，‘黑色’）
})
返回{
我的画布，
大小，
成长
}
}
})

这里导入的

CanvasManager

是我编写的一个实用程序类，它包含各种Canvas API绘图助手

此代码在首次加载时起作用。

manager.drawGrid（4,4,1，'black'）

调用内部的

onMounted

工作并在画布上绘制一个4乘4的网格

grow方法还增加了画布的大小，可以看到边框在增长，但是，在grow方法中调用

manager.drawGrid（4,4,1，'black'）

没有效果。边界内的栅格将消失，并且不会重新绘制

我使用Vue（任何版本）才几周，现在还不知道如何进行调试

控制台中没有错误。我已经在CanvasManager中的drawGrid方法中添加了控制台日志记录，并且可以看到它肯定正在被调用

任何帮助都将不胜感激

---

Cheers

Vue在数据发生更改时再次渲染组件，但这并不意味着重新装载，您的画布只准备在装载时绘制

。因此，当组件重新渲染节点时，上一个图形将丢失。解决此问题的一个快速方法是绘制更新的

on

：

函数绘图（）{
myContext=myCanvas.value.getContext（'2d'）
manager=新的画布管理器（myContext，size.w，size.h）
manager.drawGrid（4,4,1，‘黑色’）
}
未安装（牵引）；
未更新（绘制）；

但我会进一步改进代码，不在每次渲染时创建一个新的

CanvasManager

对象，这只需执行一次

函数绘图（）{
manager.drawGrid（4,4,1，‘黑色’）
}
未安装（（）=>{
myContext=myCanvas.value.getContext（'2d'）
manager=新的画布管理器（myContext，size.w，size.h）
draw（）；
});
未更新（（）=>{
draw（）；
});

---

这是一个有一些其他小的结构改进的例子

我猜是vue重新渲染，因为没有参考vue中实际发生的情况，网格没有重新渲染。我看到的大多数教程w/vue for canvas似乎在任何更改时都会重新绘制整个画布etc@DerekPollard我听到你说的了，但是想知道为什么它第一次工作，因为这也是一个外部类做的工作。我可以尝试将绘制方法移动到board组件本身中。