uniapp 画板

实现画板功能的基本思路

在UniApp中实现画板功能，主要通过Canvas组件完成。Canvas提供了绘制路径、图形、文字的能力，结合触摸事件可以实现手指或鼠标绘制功能。

核心代码结构

<template>
  <view>
    <canvas 
      canvas-id="myCanvas"
      @touchstart="touchStart"
      @touchmove="touchMove"
      @touchend="touchEnd"
      style="width: 100%; height: 500px; background: #f8f8f8;"
    ></canvas>
    <button @click="clearCanvas">清除画板</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      points: [],
      ctx: null
    }
  },
  onReady() {
    this.ctx = uni.createCanvasContext('myCanvas', this)
  },
  methods: {
    touchStart(e) {
      this.points = []
      this.points.push({
        x: e.touches[0].x,
        y: e.touches[0].y
      })
    },
    touchMove(e) {
      this.points.push({
        x: e.touches[0].x,
        y: e.touches[0].y
      })
      this.draw()
    },
    touchEnd() {
      this.points = []
    },
    draw() {
      this.ctx.beginPath()
      this.ctx.moveTo(this.points[0].x, this.points[0].y)

      for(let i = 1; i < this.points.length; i++) {
        this.ctx.lineTo(this.points[i].x, this.points[i].y)
      }

      this.ctx.setStrokeStyle("#000000")
      this.ctx.setLineWidth(2)
      this.ctx.stroke()
      this.ctx.draw(true)
    },
    clearCanvas() {
      this.ctx.clearRect(0, 0, 300, 500)
      this.ctx.draw(true)
    }
  }
}
</script>

功能优化方向

增加画笔颜色选择 通过添加颜色选择器组件，修改setStrokeStyle的值实现多色绘制功能。

调整画笔粗细 添加滑块控件，动态修改setLineWidth的参数值。

保存绘制内容 使用uni.canvasToTempFilePath将画布内容转换为图片路径，再通过uni.saveImageToPhotosAlbum保存到相册。

橡皮擦功能 将画笔颜色设置为背景色，或使用globalCompositeOperation属性实现擦除效果。

跨平台注意事项

H5平台需注意touch事件与鼠标事件的兼容处理，App端需注意Canvas层级问题。各平台Canvas实现存在差异，建议进行充分测试。

性能优化建议

频繁绘制可能导致性能问题，可通过以下方式优化：

• 减少不必要的重绘
• 使用离屏Canvas
• 对绘制路径进行简化处理
• 在绘制复杂图形时考虑使用requestAnimationFrame