uni-app 横屏签名

在uni-app中实现横屏签名功能，可以通过配置页面的屏幕方向、使用Canvas绘制签名，以及处理用户的触摸事件来实现。以下是一个简单的代码示例，展示如何在uni-app中实现横屏签名功能。

首先，在pages.json中配置页面的屏幕方向为横屏：

{
  "pages": [
    {
      "path": "pages/signature/signature",
      "style": {
        "navigationBarTitleText": "签名",
        "app-plus": {
          "screenOrientation": "landscape" // 设置为横屏
        }
      }
    }
  ]
}

接下来，在pages/signature/signature.vue文件中，使用Canvas来实现签名功能：

<template>
  <view class="container">
    <canvas canvas-id="signatureCanvas" style="width: 100%; height: 100%;" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      ctx: null,
      startX: 0,
      startY: 0,
      isDrawing: false
    };
  },
  onReady() {
    this.ctx = uni.createCanvasContext('signatureCanvas');
    this.ctx.setStrokeStyle('#000');
    this.ctx.setLineWidth(5);
    this.ctx.setLineCap('round');
    this.ctx.draw();
  },
  methods: {
    touchStart(e) {
      this.startX = e.touches[0].x;
      this.startY = e.touches[0].y;
      this.isDrawing = true;
    },
    touchMove(e) {
      if (!this.isDrawing) return;
      let endX = e.touches[0].x;
      let endY = e.touches[0].y;
      this.ctx.moveTo(this.startX, this.startY);
      this.ctx.lineTo(endX, endY);
      this.ctx.stroke();
      this.ctx.draw(true); // 在这里使用true参数来清空之前的绘制内容，实现连续绘制
      this.startX = endX;
      this.startY = endY;
    },
    touchEnd() {
      this.isDrawing = false;
    }
  }
};
</script>

<style>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

在上面的代码中，我们使用了Canvas组件来绘制签名，并通过监听触摸事件（touchStart、touchMove、touchEnd）来处理用户的绘制操作。touchStart方法记录起始点，touchMove方法根据用户的移动绘制线条，touchEnd方法结束绘制。

请注意，这里的this.ctx.draw(true)用于在每次绘制后清空之前的绘制内容，以实现连续绘制的效果。如果不需要连续绘制，可以将其改为this.ctx.draw()。

以上代码提供了一个基本的横屏签名功能实现，你可以根据实际需求进行进一步的优化和扩展。