uniapp 画板

uniapp 实现画板功能的方法

在uniapp中实现画板功能可以通过canvas组件完成。以下是一种常见的实现方式：

基本实现步骤

创建canvas元素并设置基本样式

<template>
  <view>
    <canvas canvas-id="myCanvas" 
            style="width: 100%; height: 500px;"
            @touchstart="touchStart"
            @touchmove="touchMove"
            @touchend="touchEnd"></canvas>
  </view>
</template>

初始化画布上下文

onReady() {
  this.ctx = uni.createCanvasContext('myCanvas', this)
}

实现触摸事件处理

data() {
  return {
    points: []
  }
},
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.drawLine()
  },
  touchEnd() {
    // 结束绘制处理
  }
}

绘制线条方法

drawLine() {
  const ctx = this.ctx
  ctx.setStrokeStyle('#000000')
  ctx.setLineWidth(2)
  ctx.setLineCap('round')
  ctx.setLineJoin('round')

  ctx.beginPath()
  ctx.moveTo(this.points[0].x, this.points[0].y)

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

  ctx.stroke()
  ctx.draw(true)
}

功能扩展

添加清除画布功能

clearCanvas() {
  this.ctx.clearRect(0, 0, 10000, 10000)
  this.ctx.draw(true)
}

设置画笔颜色和粗细

setColor(color) {
  this.currentColor = color
},
setWidth(width) {
  this.currentWidth = width
}

性能优化

对于复杂画板应用，可以考虑以下优化措施：

使用离屏canvas减少重绘次数

const tempCanvas = uni.createOffscreenCanvas()
const tempCtx = tempCanvas.getContext('2d')

实现双缓冲技术

// 先在离屏canvas绘制
tempCtx.drawImage(...)
// 然后一次性绘制到主canvas
ctx.drawImage(tempCanvas, ...)

注意事项

1. 不同平台canvas实现有差异，需测试各平台兼容性
2. 小程序端canvas层级较高，可能覆盖其他组件
3. H5端性能较好，可支持更复杂功能
4. 保存画布内容时注意各平台API差异

以上方法提供了uniapp中实现基础画板功能的核心代码，可根据实际需求扩展更多功能如橡皮擦、撤销重做等。