微信 小程序 canvas 跟手绘制 组件

<view class="signCanvas">
  <text bindtap="onOpenSignCanvas">打开 canvas </text>
  <view wx:if="{{isSignCanvasShow}}" class="signCanvas-shade-box">
    <view class="signCanvas-shade">
      <view class="canvas-box">
        <canvas style="width:80vw;height:60vh;background-color: rgba(255, 255, 255, 1);" id="canvas" canvas-id="canvas" disable-scroll="true" bindtouchstart="canvasStart" bindtouchmove="canvasMove" bindtouchend="canvasEnd" touchcancel="canvasEnd" binderror="canvasIdErrorCallback"></canvas>

      </view>
      <view class="btn-box">
        <view bindtap='onOpenSignCanvas' class="canvasClear">
          关闭
        </view>
        <view bindtap='cleardraw' class="canvasClear">
          清除
        </view>
        <view bindtap='canvasExport' class="canvasExport">
          确认
        </view>

      </view>

    </view>

  </view>


</view>

 

.signCanvas{
  width: auto;
}

.signCanvas-shade-box{
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  right: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(10, 10, 10, 0.5);
}
.signCanvas-shade-box .signCanvas-shade{
  width: 80vw;
  height: 80vh;
  /* border: royalblue solid 4rpx; */
  border-radius: 20rpx;
}
.signCanvas-shade-box .btn-box{
  display: flex;
  justify-content: space-around;
  height: 80rpx;
  border: solid 2rpx #aaa;
  /* background:rgba(0, 0, 0, 0.7); */
  background-color: #fff;

}
.signCanvas-shade-box .canvasClear{
  /* background-color: rgb(88, 26, 26); */
  font-size: 24rpx;
  color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  border-right: solid 2rpx #aaa;

}
.signCanvas-shade-box .canvasExport{
  /* background-color: rgb(35, 165, 57); */
  font-size: 24rpx;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  color: rgb(35, 165, 57);

}

 

Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    isSignCanvasShow: false,
    canvasContext: null,
    dotArr: []
  },

  //生命周期函数
  lifetimes: {
    ready() {
      this.initFun()
    },

  },


  /**
   * 组件的方法列表
   */
  methods: {
    // onOpenSignCanvas  打开签字版

    onOpenSignCanvas(){
      const {isSignCanvasShow} = this.data;
      this.setData({
        isSignCanvasShow:!isSignCanvasShow
      })
      this.cleardraw()

    },

    //  初始化数据
    initFun() {
      const canvasContext = wx.createCanvasContext('canvas', this);
      canvasContext.beginPath()
      canvasContext.setStrokeStyle('#000000');
      canvasContext.setLineWidth(3);
      canvasContext.setLineCap('round');
      canvasContext.setLineJoin('round');
      canvasContext.draw(false);
      this.setData({
        canvasContext
      })
    },
    canvasIdErrorCallback(e) {
      console.error(e.detail.errMsg)
    },
    //开始
    canvasStart(event) {
      console.log(73333333,'触摸开始',event)
      this.setData({
        dotArr:[]
      })
    },
    //过程
    canvasMove(event) {
      const {
        canvasContext,
        dotArr
      } = this.data
      console.log(822222, dotArr)
      const dotObj = {
        x: event.changedTouches[0].x,
        y: event.changedTouches[0].y
      }
      dotArr.push(dotObj)
      dotArr.forEach(a=>{
        canvasContext.lineTo(a.x, a.y)
      })
      canvasContext.setStrokeStyle('#000000');
      canvasContext.setLineWidth(4);
      canvasContext.stroke();
      canvasContext.draw(true);
    },
    
    canvasEnd(event) {
      console.log(1900000,'触摸结束',event)
      this.setData({
        dotArr:[]
      })
    },
    cleardraw() {
      //清除画布
      this.data.canvasContext.draw(false);
      this.canvasEnd()
    },
  }
})