踩坑小程序canvas，uni + vite + vue3 搞起来

先放出小程序码：

功能

先列出目前小程序已完成了功能：

• 笔记绘制；
• 颜色和宽度；
• 背景；
• 撤销；
• 恢复撤销；
• 清空；
• 保存本地；
• 笔记播放；
• 分享/口令分享；

下面简单介绍几个重要的功能实现

画布的实现

由于一开始使用了uni + vite + vue3来进行小程序的开发，遇到的第一个坑就是当前版本的uni不支持canvas响应touch事件，从而直接导致无法进行正常的绘制操作。于是就给uni-app提了一个issue，为了不影响开发进度，于是先自己搞了一个解决方案：

其实也比较简单，就是在canvas上面覆盖了一层view，将touch事件绑定在view上。

然后就是创建上下文，由于目前uni没有跟上微信官方的api，所以就直接使用了微信官方提供 的api来获取上下文：

export default function usePaint(selector: string) {
   
  const paint = ref<Paint>();

  const initCanvas = (canvas: any) => {
   
    const {
    windowWidth, windowHeight, pixelRatio } = uni.getSystemInfoSync();
    /**
     * 解决绘图路径锯齿问题
     * 1. 尺寸取物理像素 windowWidth * pixelRatio
     * 2. 画布缩放像素比 ctx.scale
     */
    canvas.width = windowWidth * pixelRatio;
    canvas.height = windowHeight * pixelRatio;

    const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
    ctx.translate(windowWidth * pixelRatio / 2, windowHeight * pixelRatio / 2);

    // #ifndef MP-TOUTIAO
    ctx.scale(pixelRatio