微信小程序实现简单手写签名组件的方法实例

微信小程序实现简单手写签名组件的方法

1. 确定需求

首先，我们需要了解我们的需求。这里我们需要实现一个手写签名功能的组件，其具体需求如下：

• 用户可以在小程序中手写签名；
• 签名过程中，需要支持画笔颜色和粗细的选择；
• 签名完成后，需要将签名数据保存起来，同时提供清空签名的操作；
• 签名板的大小需要适应屏幕大小。

2. 实现思路

根据我们的需求，我们可以考虑以下的实现思路：

1. 使用 canvas 元素实现画板，记录用户签名数据；
2. 封装 canvas 相关功能为组件，提供画笔颜色和粗细选择、清空签名等操作；
3. 将签名数据转换为图片，并保存到本地。

此外，我们还需要考虑以下问题：

• 如何在小程序中使用 canvas 元素？（小程序中可以使用 canvas，但部分 API 不支持）
• 如何优化 canvas 画图性能？

3. 实现步骤

基于上述思路，我们可以按以下步骤进行实现。

3.1 创建组件

首先，我们需要创建一个手写签名的组件。可以创建一个名为 handwritten-signature 的文件夹，其中包含以下文件：

handwritten-signature/
|- handwritten-signature.js
|- handwritten-signature.json
|- handwritten-signature.wxml
|- handwritten-signature.wxss

其中，.js 文件是组件逻辑的代码，.json 文件是组件的配置，.wxml 文件是组件的结构，.wxss 文件是组件的样式。

3.2 组件结构

接下来我们需要定义组件的结构。根据需求，我们需要一个画板，一个插件区和一些绘制画布的画笔工具

<!-- handwritten-signature.wxml -->
<view class="wrapper">
  <canvas 
    class="canvas" 
    canvas-id="canvas" 
    style="width:{{canvasWidth}}px;height:{{canvasHeight}}px;" 
    bindtouchstart="handleTouchStart" 
    bindtouchmove="handleTouchMove" 
    bindtouchend="handleTouchEnd" 
    bindtouchcancel="handleTouchEnd" 
    disable-scroll="true">
  </canvas>
  <view class="panel">
    <view class="tools">
      <view class="tool" bindtap="setColor('black')" style="background-color: black;"></view>
      <view class="tool" bindtap="setColor('red')" style="background-color: red;"></view>
      <view class="tool" bindtap="setColor('green')" style="background-color: green;"></view>
      <view class="tool" bindtap="cleanCanvas">清除</view>
    </view>
    <view class="actions">
      <view class="action" bindtap="handleSave">保存</view>
    </view>
  </view>
</view>

在上述代码中，canvas 元素使用了 canvas-id 属性用于唯一标识该 canvas 元素。同时，我们也绑定了 touch 事件来监听用户的手写操作。

紧接着我们还提供了一组颜色选择按钮，以供用户选择画笔颜色；清空画布按钮，以便用户清楚当前画布；最后是“保存”按钮，用户完成了手写签名可以点击这个按钮把它保存到本地。

3.3 组件逻辑

下面是组件的逻辑部分，主要负责实时监听用户手写操作，以及提供相应的操作函数。其中 handwritten-signature.js 文件包含以下代码：

// handwritten-signature.js
Component({
  properties: {
    // 画笔颜色，默认黑色
    color: {
      type: String,
      value: 'black'
    },
    // 画笔粗细，默认5px
    lineWidth: {
      type: Number,
      value: 5
    }
  },

  data: {
    // 画板宽度和高度
    canvasWidth: 0,
    canvasHeight: 0,
    // 画布上下文
    ctx: null,
    // 是否正在手写
    isTouching: false,
    // 画笔路径
    paths: []
  },

  methods: {
    // 获取画布上下文
    initCanvas() {
      const query = wx.createSelectorQuery().in(this);
      query.select('.canvas').fields({ node: true, size: true })
        .exec(([canvas]) => {
          const ctx = canvas.node.getContext('2d');
          const dpr = wx.getSystemInfoSync().pixelRatio;
          const canvasWidth = canvas.width;
          const canvasHeight = canvas.height;
          ctx.scale(dpr, dpr);
          ctx.strokeStyle = this.properties.color;
          ctx.lineWidth = this.properties.lineWidth;
          ctx.lineCap = 'round';
          ctx.lineJoin = 'round';

          this.setData({
            canvasWidth,
            canvasHeight,
            ctx
          });
        });
    },

    // 开始手写时，记录起始位置，开始绘制
    handleTouchStart(e) {
      const touch = e.touches[0];
      const x = touch.x;
      const y = touch.y;
      this.setData({
        isTouching: true,
        paths: [...this.data.paths, [{ x, y }]]
      });
    },

    // 手写过程中，不断绘制路径
    handleTouchMove(e) {
      if (!this.data.isTouching) return;
      const touch = e.touches[0];
      const x = touch.x;
      const y = touch.y;
      const paths = [...this.data.paths];
      const lastPath = paths[paths.length - 1];
      lastPath.push({ x, y });
      this.setData({ paths });
      this.draw();
    },

    // 手写结束时，停止绘制
    handleTouchEnd() {
      this.setData({ isTouching: false });
    },

    // 清空画布
    cleanCanvas() {
      this.setData({
        paths: []
      });
      this.draw();
    },

    // 绘制画布
    draw() {
      const ctx = this.data.ctx;
      const paths = this.data.paths;
      ctx.clearRect(0, 0, this.data.canvasWidth, this.data.canvasHeight);
      paths.forEach((path) => {
        const firstPoint = path[0];
        ctx.beginPath();
        ctx.moveTo(firstPoint.x, firstPoint.y);
        path.forEach((point) => {
          ctx.lineTo(point.x, point.y);
        });
        ctx.stroke();
      });
    },

    // 设置画笔颜色
    setColor(color) {
      const ctx = this.data.ctx;
      ctx.strokeStyle = color;
    },

    // 保存签名到本地
    handleSave() {
      // 将画布转成图片
      wx.canvasToTempFilePath({
        canvasId: 'canvas',
        success: res => {
          console.log(res.tempFilePath);
        }
      }, this);
    }
  },

  ready() {
    // 初始化
    this.initCanvas();
  }
})

在这个文件中定义了一个组件，定义了初始化、手写中、清空画板等函数，同时我们也可以看到上面提到的监听用户手写操作的相关代码，以及保存签名到本地等操作的具体实现。

4. 代码示例

下面是一个简单的代码示例，演示了如何使用 handwritten-signature 组件：

<!-- index.wxml -->
<view class="page">
  <handwritten-signature id="signature" />
</view>

在 index.js 文件中可以通过 this.selectComponent('#signature') 获取到组件的实例，从而可以调用组件的方法，例如：

// index.js
Page({
  // 保存签名
  saveSignature() {
    const signature = this.selectComponent('#signature');
    signature.handleSave();
  },
  // 清空签名
  cleanSignature() {
    const signature = this.selectComponent('#signature');
    signature.cleanCanvas();
  }
})

总结

通过以上的实现思路和代码演示，我们已经学习了如何在微信小程序中实现一个简单手写签名组件。当然，这只是一个简单的示例，实际应用中还需要考虑一些细节问题，例如性能优化、跨平台兼容等等。