uni-app 定制一个画板插件

在uni-app中定制一个画板插件，可以通过使用canvas组件来实现。以下是一个基本的画板插件实现代码案例，它包括了绘制线条、清除画布等基本功能。

首先，在你的uni-app项目中创建一个新的页面，比如DrawBoard.vue，用于显示画板。

<template>
  <view class="container">
    <canvas
      canvas-id="drawCanvas"
      style="width: 100%; height: 100%;"
    ></canvas>
    <button @click="clearCanvas">清除画布</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      ctx: null,
      startX: 0,
      startY: 0,
      isDrawing: false,
    };
  },
  onLoad() {
    this.initCanvas();
  },
  methods: {
    initCanvas() {
      const query = uni.createSelectorQuery().in(this);
      query.select('#drawCanvas').fields({ node: true, size: true }).exec((res) => {
        const canvas = res[0].node;
        const ctx = canvas.getContext('2d');
        this.ctx = ctx;
        canvas.width = res[0].width;
        canvas.height = res[0].height;
        this.startX = 0;
        this.startY = 0;

        // 监听触摸事件
        canvas.addEventListener('touchstart', this.handleTouchStart);
        canvas.addEventListener('touchmove', this.handleTouchMove);
        canvas.addEventListener('touchend', this.handleTouchEnd);
      });
    },
    handleTouchStart(e) {
      const touch = e.touches[0];
      this.startX = touch.x;
      this.startY = touch.y;
      this.isDrawing = true;
    },
    handleTouchMove(e) {
      if (!this.isDrawing) return;
      const touch = e.touches[0];
      const endX = touch.x;
      const endY = touch.y;
      this.ctx.beginPath();
      this.ctx.moveTo(this.startX, this.startY);
      this.ctx.lineTo(endX, endY);
      this.ctx.setStrokeStyle('#000');
      this.ctx.setLineWidth(5);
      this.ctx.setLineCap('round');
      this.ctx.stroke();
      this.startX = endX;
      this.startY = endY;
    },
    handleTouchEnd() {
      this.isDrawing = false;
    },
    clearCanvas() {
      const query = uni.createSelectorQuery().in(this);
      query.select('#drawCanvas').boundingClientRect((rect) => {
        const ctx = this.ctx;
        ctx.clearRect(0, 0, rect.width, rect.height);
        ctx.draw();
      }).exec();
    },
  },
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
button {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}
</style>

这个示例展示了如何使用canvas组件和触摸事件来实现一个简单的画板功能。你可以进一步扩展这个基础，比如添加颜色选择器、线条粗细调整等功能。