uniapp中使用canvas做审批签名

在Uni-app中使用Canvas来实现审批签名功能需要以下步骤：

1. 在你的Uni-app项目中创建一个页面或组件，用于签名功能的界面。

2. 在该页面中创建一个Canvas元素，用于绘制签名。在模板中添加Canvas元素，如下所示：

   <template>
     <view>
       <canvas canvas-id="signatureCanvas" style="width: 100%; height: 300px; border: 1px solid #000;"></canvas>
       <button @tap="clearSignature">Clear Signature</button>
       <button @tap="saveSignature">Save Signature</button>
     </view>
   </template>

   在上面的示例中，我们创建了一个Canvas元素，用于绘制签名。我们还添加了两个按钮，一个用于清除签名，另一个用于保存签名。

3. 在页面的data中定义一些变量来管理Canvas绘制过程，例如当前画笔颜色、绘制状态等。同时，创建Canvas绘制的上下文：

   <script>
   export default {
     data() {
       return {
         signatureContext: null,
         penColor: 'black',
         isDrawing: false
       };
     },
     onReady() {
       // 获取Canvas绘制上下文
       this.signatureContext = uni.createCanvasContext('signatureCanvas', this);
     },
     // ...
   };
   </script>

   在上面的示例中，我们使用 uni.createCanvasContext 获取Canvas绘制上下文，并初始化了一些变量来管理签名绘制状态。

4. 实现签名绘制功能，监听Canvas的touchstart、touchmove和touchend事件，根据用户的手势进行绘制：

   methods: {
     handleTouchStart(e) {
       const x = e.touches[0].x;
       const y = e.touches[0].y;
   
       this.signatureContext.setStrokeStyle(this.penColor);
       this.signatureContext.setLineWidth(3);
       this.signatureContext.setLineCap('round');
       this.signatureContext.beginPath();
       this.signatureContext.moveTo(x, y);
       this.isDrawing = true;
     },
     handleTouchMove(e) {
       if (!this.isDrawing) return;
   
       const x = e.touches[0].x;
       const y = e.touches[0].y;
   
       this.signatureContext.lineTo(x, y);
       this.signatureContext.stroke();
       this.signatureContext.draw(true);
     },
     handleTouchEnd() {
       this.isDrawing = false;
     },
     // ...
   }

   在上面的示例中，我们监听了Canvas的touchstart、touchmove和touchend事件来实现绘制功能。handleTouchStart 开始绘制，handleTouchMove 处理绘制过程，handleTouchEnd 结束绘制。

5. 创建清除签名和保存签名的方法：

   methods: {
     // ...
     clearSignature() {
       // 清除Canvas内容
       this.signatureContext.clearRect(0, 0, uni.upx2px(300), uni.upx2px(300));
       this.signatureContext.draw(true);
     },
     saveSignature() {
       // 保存Canvas绘制为图片
       uni.canvasToTempFilePath({
         canvasId: 'signatureCanvas',
         success: (res) => {
           // res.tempFilePath 包含了绘制的签名图片的临时文件路径
           // 可以将该路径保存或上传到服务器
           console.log('Signature saved:', res.tempFilePath);
         }
       }, this);
     }
   }

   clearSignature 方法用于清除Canvas内容，saveSignature 方法用于保存Canvas绘制为图片。

6. 在模板中绑定事件处理程序，使按钮可以触发清除签名和保存签名的操作。

7. 这样，你就可以在Uni-app中创建一个简单的审批签名功能。用户可以在Canvas上绘制签名，然后选择清除或保存签名。保存签名时，你可以获取签名图片的临时文件路径，然后进行进一步的处理，例如保存到本地或上传到服务器。