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