uniapp小程序 使用canvas涂鸦实现撤销和恢复上一步

在uniapp小程序中，使用canvas涂鸦实现撤销和恢复上一步的功能，可以采用类似于原生小程序的方式进行操作。以下是示例代码：

<template>
  <canvas class="canvas" canvas-id="myCanvas" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd"></canvas>
  <view class="tools">
    <button class="btn" @tap="undo">撤销</button>
    <button class="btn" @tap="redo">恢复</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      ctx: null, // canvas绘图上下文
      startX: 0, // 起始x坐标
      startY: 0, // 起始y坐标
      drawData: [], // 绘制数据
      index: 0 // 当前绘制步骤
    }
  },
  mounted() {
    // 获取canvas绘图上下文
    let query = uni.createSelectorQuery().in(this)
    query.select('.canvas').fields({node: true, size: true}).exec((res) => {
      let canvas = res[0].node
      this.ctx = canvas.getContext('2d')
    })
  },
  methods: {
    // 监听touchstart事件
    touchStart(e) {
      this.startX = e.touches[0].clientX
      this.startY = e.touches[0].clientY
      
      // 绘制起始点
      this.ctx.beginPath()
      this.ctx.moveTo(this.startX, this.startY)
      
      // 将绘制数据添加到数组中
      this.drawData.splice(this.index, this.drawData.length - this.index, {
        type: 'start',
        x: this.startX,
        y: this.startY
      })
      this.index++
    },
    // 监听touchmove事件
    touchMove(e) {
      let currentX = e.touches[0].clientX
      let currentY = e.touches[0].clientY
      
      // 绘制线条
      this.ctx.lineTo(currentX, currentY)
      this.ctx.stroke()
      
      // 将绘制数据添加到数组中
      this.drawData.splice(this.index, this.drawData.length - this.index, {
        type: 'move',
        x: currentX,
        y: currentY
      })
      this.index++
    },
    // 监听touchend事件
    touchEnd(e) {
      // 将绘制数据添加到数组中
      this.drawData.splice(this.index, this.drawData.length - this.index, {
        type: 'end'
      })
      this.index++
    },
    // 撤销操作
    undo() {
      // 判断是否有可撤销的绘制步骤
      if(this.index > 0) {
        this.index--
        
        // 判断绘制数据类型
        while(this.index > 0 && this.drawData[this.index - 1].type !== 'start') {
          this.index--
        }
        
        // 重新绘制整个canvas
        this.redraw()
      }
    },
    // 恢复上一步操作
    redo() {
      // 判断是否有可恢复的绘制步骤
      if(this.index < this.drawData.length) {
        // 判断绘制数据类型
        while(this.index < this.drawData.length && this.drawData[this.index].type !== 'end') {
          this.index++
        }
        this.index++
        
        // 重新绘制整个canvas
        this.redraw()
      }
    },
    // 重新绘制整个canvas
    redraw() {
      // 清空canvas
      this.ctx.clearRect(0, 0, uni.upx2px(750), uni.upx2px(1000))
      
      // 循环绘制数据，重新绘制整个canvas
      for(let i = 0; i < this.index; i++) {
        let data = this.drawData[i]
        if(data.type === 'start') {
          // 绘制起始点
          this.ctx.beginPath()
          this.ctx.moveTo(data.x, data.y)
        } else if(data.type === 'move') {
          // 绘制线条
          this.ctx.lineTo(data.x, data.y)
          this.ctx.stroke()
        }
      }
    }
  }
}
</script>

<style>
.canvas {
  width: 750upx;
  height: 1000upx;
  background-color: #fff;
}
.tools {
  display: flex;
  justify-content: space-around;
  margin-top: 20upx;
}
.btn {
  width: 200upx;
  height: 80upx;
  line-height: 80upx;
  text-align: center;
  font-size: 32upx;
  color: #fff;
  background-color: #f00;
  border-radius: 40upx;
}
</style>

以上代码中，使用了canvas的touchstart、touchmove和touchend事件来监听用户的绘制操作，并将绘制数据存储到数组中。同时，还定义了撤销和恢复上一步操作的方法，并通过重新绘制整个canvas来实现撤销和恢复上一步操作的效果。