uniapp: 简单实现手写签名

onShow() {
    let self = this;
    let backData = self.$miniApp.getNavigateBackData();
    if (backData && backData.signature) {
      self.signature = backData.signature;
      self.close();
    }
  },

 

横版手写签名弹出层:

<view class="popup-content">
          <view class="clear" @click="clear">清除</view>
          <view class="clear" @click="nextToPage">全屏</view>
          <view class="x-m-con">
            <canvas
              class="sign-canvas"
              canvas-id="signcanvas"
              @touchstart="touchstart"
              @touchmove="touchmove"
              @touchend="touchend"
            ></canvas>
          </view>
        </view>

定义data:

data() {
    return {
      showPopup: false,
      ctx: "", //绘图图像
      points: [], //路径点集合
      signature: "",
      screenWidth: "",
      screenHeight: "",
    };
  },

获取手机屏幕

onLoad() {
    let self = this;
    uni.getSystemInfo({
      success: function (res) {
        self.screenWidth = res.windowWidth;
        self.screenHeight = res.windowHeight;
      },
    });
  },

横屏返回签名图片

 

onShow() {
    let self = this;
    let backData = self.$miniApp.getNavigateBackData();
    if (backData && backData.signature) {
      self.signature = backData.signature;
      self.close();
    }
  },

 

 

 

 

 

 

 

 

 

 

 

 

全屏手写签名: