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();
    }
  },

 

 

 

 

 

 

 

 

 

 

 

 

全屏手寫簽名: