小程序封装电子签名

父组件

<sign bind:GetSignEvent="getSign" bind:backEvent="bindback"></sign>

Page({

  /**
   * 页面的初始数据
   */
  data: {},

  getSign(e){
    console.log(e.detail)
  },
 

})

子组件

<!-- 电子签名组件 -->
<view class="title">
<view class="qianm-all">请在空白处签字</view>
<view class="text1" wx:if="{{isshowcav}}">
   <canvas  type="2d"  id="myCanvas" style='width:680rpx; height:430rpx;' canvas-id="myCanvas"  disable-scroll="true" class="myCanvas" bindtouchstart="bindtouchstart" bindtouchmove="bindtouchmove" ></canvas>
</view>
<view class="containers">
<view bindtap="generateSign" class="container-back1">取消</view>
<view bindtap="clear" class="container-back2">清空重写</view>
<view bindtap="sure" class="container-back3">提交签名</view>
</view>
</view>

Component({
  attached(){
    // 初始化
    let that = this
    // 获取画布
    const query = this.createSelectorQuery()
    query.select('#myCanvas')
      .fields({
        node: true,
        size: true
      })
      .exec((res) => {
        console.log(res,'res');
        const canvas = res[0].node
        const ctx = canvas.getContext('2d')
        const dpr = wx.getSystemInfoSync().pixelRatio
        canvas.width = res[0].width * dpr
        canvas.height = res[0].height * dpr
        ctx.scale(dpr, dpr)
        // ctx.fillRect(0, 0, 100, 100)
        // 设置笔触信息
        ctx.strokeStyle = 'rgb(23, 24, 24)'
        ctx.lineWidth = 5
        ctx.font = "20px Arial"
        that.setData({
          canvas: canvas,
          context: ctx
        })
      })
  },
  detached: function() {
    // 在组件实例被从页面节点树移除时执行
    this.data.canvas.width = 0
    this.data.canvas.height = 0
    this.setData({
      isshowcav: false,
    })
  },
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    config: config.host,
    isshowcav: true,
    canvas: null,
    context: null,
    // 前一点
    preX: 0,
    preY: 0,
  },

  /**
   * 组件的方法列表
   */
  methods: {
    generateSign() {
this.triggerEvent('backEvent','')
    },
    bindtouchstart(e) {
      let context = this.data.context
      let curX = e.changedTouches[0].x
      let curY = e.changedTouches[0].y
      context.beginPath()
      context.moveTo(curX, curY)
      this.data.preX = curX
      this.data.preY = curY
    },
    bindtouchmove(e) {
      this.setData({
        nullflag: true
      })
      let context = this.data.context
      let preX = this.data.preX //前面的点坐标
      let preY = this.data.preY
      let curX = e.changedTouches[0].x //现在的点坐标
      let curY = e.changedTouches[0].y

      let deltaX = Math.abs(preX - curX) //新旧值连接画线,取绝对值
      let deltaY = Math.abs(preY - curY)

      // 相差大于3像素的时候作二阶贝塞尔曲线
      if (deltaX >= 3 || deltaY >= 3) {
        // 前后两点中心点
        let centerX = (preX + curX) / 2
        let centerY = (preY + curY) / 2

        //这里以前一点作为控制点，中心点作为终点，起始点为上一次的中点
        context.quadraticCurveTo(preX, preY, centerX, centerY);
        context.stroke();
        this.data.preX = curX
        this.data.preY = curY
      }

    },
    clear(e) {
      let context = this.data.context
      let canvas = this.data.canvas
      context.clearRect(0, 0, canvas.width, canvas.height);
      context.strokeStyle = '#000000'
      context.lineWidth = 5
      context.font = "20px Arial"
    },
    sure() {
      let that = this
      setTimeout(() => {
        wx.canvasToTempFilePath({
          x: 0,
          y: 0,
          width: this.data.canvas.width,
          height: this.data.canvas.height,
          canvas: this.data.canvas,
          success(res) {
            that.setData({
              canvanImg: res.tempFilePath,
            })
            wx.uploadFile({
              filePath: res.tempFilePath,
              name: 'file',
              url: '',
              success(res) {
                that.triggerEvent('GetSignEvent',JSON.parse(res.data).message)
              }
            })
          },
          fail(res) {
            console.log(res, 'fail');
          }
        }, that)
      }, 300)
    },
  }
})

.title{
  background-color: #eee;
  height: 100vh;
 }
 .containers{
   width: 700rpx;
   margin-left: 10rpx;
   height: 18vh;
   /* justify-content: space-around; */
   display: flex;
   }
   .container-back1{
    display: inline-block;
    width: 110rpx;
    margin-left: 40rpx;
    margin-top: 5vh;
    height: 6vh;
    line-height: 6vh;
    text-align: center;
    border-radius: 20rpx;
    font-size: 28rpx;
    border: 1rpx solid #B99C65;
    color: #B99C65;
   }
   .container-back2,.container-back3{
    display: inline-block;
    width: 140rpx;
    margin-top: 5vh;
    height: 6vh;
    line-height: 6vh;
    text-align: center;
    border-radius: 20rpx;
    font-size: 28rpx;
   }
   .container-back2{
    border: 1rpx solid #B99C65;
    color: #B99C65;
    margin-left: 260rpx;
   }
   .container-back3{
    border: 1rpx solid #B99C65;
    color: #f1f0ee;
    background-color: #B99C65;
    margin-left: 30rpx;
   }
  .qianm-all{
      width:750rpx;
      height:10vh;
      line-height: 10vh;
      text-align: center;
      color: rgb(104, 103, 103);
      font-size: 28rpx;
   }
   .text{
      margin-left: 20rpx;
      height: 8vh;
      line-height: 8vh;
   }
   .text1{
      border-radius: 16rpx;
      margin-left: 35rpx;
      width: 680rpx;
      background-color: white;
      /* border:1rpx solid black; */
   }