小程序Canvas签名

在 uni-app 中使用 canvas 实现用户签名绘制的关键在于正确初始化 canvas、捕获触摸事件并实时将用户的绘制轨迹呈现出来。下面详细描述整个过程：

---

1. 页面结构与 canvas 组件

首先，在页面模板中添加 canvas 元素，并绑定触摸事件。示例代码如下：

<template>
  <view class="signature-container">
    <!-- canvas 用于用户签名绘制 -->
    <canvas
      id="signature"
      canvas-id="signature"
      class="signature-canvas"
      @touchstart="startDrawing"
      @touchmove="continueDrawing"
      @touchend="endDrawing">
    </canvas>
    <!-- 可选：清除和保存按钮 -->
    <view class="button-group">
      <view class="btn" @click="clearCanvas">清除</view>
      <view class="btn" @click="saveSignature">保存</view>
    </view>
  </view>
</template>

说明：

• 使用 @touchstart、@touchmove 和 @touchend 分别监听触摸开始、移动和结束事件。
• 样式部分需要设置 canvas 的尺寸和位置，确保用户手指在上面滑动时能正确捕获。

---

2. Canvas 初始化

在组件的逻辑部分，需要获取 canvas 节点并初始化 2D 绘图上下文。考虑到不同设备的像素比（dpr），需要对 canvas 进行适配。

export default {
  data() {
    return {
      ctx: null,           // canvas 的 2d 绘图上下文
      isDrawing: false,    // 标识当前是否在绘制中
      lastX: 0,            // 上一次触摸的 X 坐标
      lastY: 0,            // 上一次触摸的 Y 坐标
      dpr: 1,              // 设备像素比
    };
  },
  mounted() {
    // 使用 uni.createSelectorQuery 获取 canvas 节点及尺寸
    uni.createSelectorQuery().select('#signature').fields({ node: true, size: true }).exec((res) => {
      const canvas = res[0].node;
      // 获取设备像素比
      this.dpr = uni.getSystemInfoSync().pixelRatio;
      // 设置 canvas 的实际宽高，确保在高清屏上显示清晰
      canvas.width = res[0].width * this.dpr;
      canvas.height = res[0].height * this.dpr;
      // 获取 2D 绘图上下文，并做缩放处理
      this.ctx = canvas.getContext('2d');
      this.ctx.scale(this.dpr, this.dpr);
      // 设置默认绘制样式
      this.ctx.lineCap = 'round';
      this.ctx.lineWidth = 2;
      this.ctx.strokeStyle = '#000';
    });
  },
  methods: {
    // 后续在此处添加事件处理函数
  }
}

注意：

• uni.getSystemInfoSync().pixelRatio 用于获取设备像素比；
• 调整 canvas 的宽高和对上下文进行缩放，可以避免模糊问题。

---

3. 处理触摸事件

3.1 开始绘制（touchstart）

当用户开始触摸 canvas 时，记录初始点，并调用 beginPath 开始一条新路径。

function  startDrawing(e) {
    // 设置正在绘制标识为 true
    this.isDrawing = true;
    const touch = e.touches[0];
    // 记录初始触摸点（注意乘以 dpr 以保持一致性）
    this.lastX = touch.x;
    this.lastY = touch.y;
    // 开启一条新路径，并移动到起始点
    this.ctx.beginPath();
    this.ctx.moveTo(this.lastX, this.lastY);
  }
  // 后续添加 continueDrawing 与 endDrawing

3.2 绘制过程（touchmove）

在用户滑动手指时，不断获取当前触摸点，并用 lineTo 连接上一个点，从而形成连续线条。

  function continueDrawing(e) {
    if (!this.isDrawing) return;
    const touch = e.touches[0];
    const x = touch.x;
    const y = touch.y;
    // 绘制从上一个点到当前点的直线
    this.ctx.lineTo(x, y);
    this.ctx.stroke();
    // 更新上一个触摸点为当前点
    this.lastX = x;
    this.lastY = y;
  }

3.3 结束绘制（touchend）

当触摸结束时，将绘制标识设为 false，结束当前路径。

  function endDrawing(e) {
    this.isDrawing = false;
    // 可选：这里可对绘制轨迹进行平滑处理或存储轨迹数据
  }

提示：
为了使签名效果更加平滑，可以使用贝塞尔曲线（quadraticCurveTo 或 bezierCurveTo）来平滑曲线，但基本原理都是捕获触摸坐标，然后绘制曲线。

---

4. 附加功能：清除与保存

4.1 清除画布

通过调用 clearRect 方法可以清除整个 canvas 内容。

  function clearCanvas() {
    // 清除整个 canvas
    this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
  }

4.2 保存签名

使用 uni-app 提供的 API uni.canvasToTempFilePath 将 canvas 内容保存为图片文件，再传递给后续业务使用。

  function saveSignature() {
    uni.canvasToTempFilePath({
      canvasId: 'signature',
      // 传入 canvas 对象，保证获取正确内容
      canvas: this.ctx.canvas,
      fileType: 'png',
      quality: 1,
      success: (res) => {
        // 保存成功后，可将图片路径传递给父组件或进行其他处理
        console.log('保存成功，图片路径：', res.tempFilePath);
      },
      fail: (err) => {
        console.error('保存失败：', err);
      }
    }, this);
  }

注意：
在调用 uni.canvasToTempFilePath 时，要确保 canvas 已经完全绘制好，且传入正确的 canvas 对象。