YZProjectCloud/yanzhu-ui-app/miniprogram/pages/components/sign/sign.js

Component({
  behaviors: ["wx://form-field"], //,"wx://form-field-group"
  /**
   * 组件的对外属性
   */
  properties: {
    show: {
      type: Boolean,
      value: false,
    },
    canvasId:{
      type:String,
      value:"mkl_canvas"
    },
    imageUrl:{
      value:"",
      type: String
    }
  },
  observers:{
    imageUrl(val){
      if(val.length <= 0){
        this.cleardraw()
        this.setData({
          showimg:true
        })
      }
    }
  },
  /**
   * 组件的初始数据
   */
  data: {
    signShow:false,
    context : null,// 使用 wx.createContext 获取绘图上下文
    isButtonDown : false,
    arrx : [],
    arry : [],
    arrz : [],
    canvasw : 0,
    canvash : 0,
    showimg:true,
    height:'',
    btnHeight:'',
    type:0
  },
  /**
   * 组件的方法列表
   */
  ready: function () {
    let properties = this.properties;
    let that = this;
    setTimeout(function(){
      if(properties.imageUrl){
        that.setData({
          showimg: false,
          type:1,
          imageUrl:properties.imageUrl
        })
      }else{
        that.setData({
          type:0
        })
      }
    },400);
  
    this.init()  
  },
  methods: {
      init(){
        let that = this;
        wx.getSystemInfo({
          success: function(res){
            that.setData({
              height:(res.windowHeight-150)+"px",
              btnHeight:(res.windowHeight-150) / 3+"px"
            })
          }
        })
        //获取系统信息
        wx.getSystemInfo({
         success: function (res) {
           const {canvasId} = that.properties;
           // 使用 wx.createContext 获取绘图上下文 context
           let context = wx.createCanvasContext(canvasId,that);
           context.beginPath()
           context.setStrokeStyle('#000000');
           context.setLineWidth(4);
           context.setLineCap('round');
           context.setLineJoin('round');
           that.setData({
            context:context,
            canvasw :res.windowWidth,//设备宽度
            canvash : res.windowHeight, //设备高度
          });
         }
        });
        
       
      },
      canvasIdErrorCallback: function (e) {
        console.error(e.detail.errMsg)
       },
       //绘制开始
       canvasStart: function (event) {
         let {arrz,arrx,arry}= this.data;
         arrz.push(0);
         arrx.push(event.changedTouches[0].x);
        arry.push(event.changedTouches[0].y);
        this.setData({
          isButtonDown : true,
          arrz,arrx,arry
        })
       },
       //绘制过程
       canvasMove: function (event) {
         let {arrz,arrx,arry,isButtonDown,context,canvasw,canvash}= this.data;
        if (isButtonDown) {
         arrz.push(1);
         arrx.push(event.changedTouches[0].x);
         arry.push(event.changedTouches[0].y);
        };
        for (var i = 0; i < arrx.length; i++) {
         if (arrz[i] == 0) {
          context.moveTo(arrx[i], arry[i])
         } else {
          context.lineTo(arrx[i], arry[i])
         };
        };
        context.clearRect(0, 0, canvasw, canvash);
       
        context.setStrokeStyle('#000000');
        context.setLineWidth(4);
        context.setLineCap('round');
        context.setLineJoin('round');
        context.stroke();
       
        context.draw(false);
        this.setData({
          arrz,arrx,arry,context,canvasw,canvash
        })
       },
       canvasEnd: function (event) {
        this.setData({
          isButtonDown : false
        })
       },
       cleardraw: function () {
        let {arrz,arrx,arry,context,canvasw,canvash}= this.data;
        //清除画布
        arrx = [];
        arry = [];
        arrz = [];
        if(context != null){
          context.clearRect(0, 0, canvasw, canvash);
          context.draw(true);
          this.setData({
            arrz,arrx,arry,context,canvasw,canvash
          })
        }
        
       },
       //导出图片
       getimg: function () {
        this.triggerEvent("addto",true);
         let {arrx}= this.data;
        if (arrx.length == 0) {
         wx.showModal({
          title: '提示',
          content: '签名内容不能为空！',
          showCancel: false
         });
         return false;
        };
        const {canvasId} = this.properties;
        //生成图片
        let that = this;
        wx.canvasToTempFilePath({
         canvasId: canvasId,
         success: function (res) {
           that.setData({
            imageUrl:res.tempFilePath,
            signShow:false,
            showimg:false,
            type:0
           })
           that.triggerEvent("returnData",res.tempFilePath);
         }
        },this)
       },
       showSign:function(){
        this.triggerEvent("addto",false);
         this.setData({
          signShow:true,
         })
       },
       onClose:function(){
        this.triggerEvent("addto",true);
        this.setData({
          signShow:false,
         })
       }
  },
});