微信小程序实现横屏手写签名
作者:huangzhin
这篇文章主要为大家详细介绍了微信小程序实现横屏手写签名,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序实现横屏手写签名的具体代码,供大家参考,具体内容如下
1.关键配置:
"pageOrientation": "landscape" ---- 配置该页面横屏展示
2.效果图:
3.代码:
wxml
<view class="container"> <canvas class="canvas" id="canvas" canvas-id="canvas" disable-scroll="true" bindtouchstart="canvasStart" bindtouchmove="canvasMove" bindtouchend="canvasEnd" touchcancel="canvasEnd" binderror="canvasIdErrorCallback"></canvas> <view class="tips"> 请在框内签字 </view> <view class='addBtn'> <button type="default" class='txt' bindtap="cleardraw">重新签名</button> <button type="default" class='txt' bindtap="getimg">提交签字</button> </view> </view>
js
const fileManager = wx.getFileSystemManager(); // canvas 全局配置 var context = null; // 使用 wx.createContext 获取绘图上下文 context var isButtonDown = false; var arrx = []; var arry = []; var arrz = []; var canvasw = 0; var canvash = 0; //获取系统信息 wx.getSystemInfo({ success: function (res) { canvasw = res.windowHeight * 1.2; //设备宽度 // canvash = res.windowWidth * 7 / 15; canvash = res.windowWidth * 1.2; } }); //注册页面 Page({ /** * 页面的初始数据 */ data: { signFlag: false, }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { context = wx.createCanvasContext('canvas'); context.setFillStyle('#fff') context.fillRect(0, 0, canvasw, canvash) context.draw(true) context.beginPath() context.setStrokeStyle('#000000'); context.setLineWidth(4); context.setLineCap('round'); context.setLineJoin('round'); }, onShow() { arrx = []; arry = []; arrz = []; }, isJSON(str) { if (typeof str == 'string') { try { var obj = JSON.parse(str); if (typeof obj == 'object' && obj) { return true; } else { return false; } } catch (e) { return false; } } }, canvasIdErrorCallback: function (e) { }, //开始 canvasStart: function (event) { isButtonDown = true; arrz.push(0); arrx.push(event.changedTouches[0].x); arry.push(event.changedTouches[0].y); //context.moveTo(event.changedTouches[0].x, event.changedTouches[0].y); }, //过程 canvasMove: function (event) { if (isButtonDown) { arrz.push(1); arrx.push(event.changedTouches[0].x); arry.push(event.changedTouches[0].y); // context.lineTo(event.changedTouches[0].x, event.changedTouches[0].y); // context.stroke(); // context.draw() }; this.setData({ signFlag: true, }) 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.setStrokeStyle('#000000'); context.setLineWidth(4); context.setLineCap('round'); context.setLineJoin('round'); context.stroke(); context.draw(true); }, canvasEnd: function (event) { isButtonDown = false; }, cleardraw: function () { //清除画布 arrx = []; arry = []; arrz = []; context.clearRect(0, 0, canvasw, canvash); context.draw(true); }, //导出图片 getimg: function () { let that = this if (arrx.length == 0) { wx.showModal({ title: '提示', content: '签名内容不能为空!', showCancel: false }); return false; }; console.log(this.data.signFlag); if (!this.data.signFlag) { wx.showModal({ title: '提示', content: '签名内容不能为空!', showCancel: false }); return false; } //生成图片 wx.canvasToTempFilePath({ canvasId: 'canvas', success: function (res) { //将图片转换为base64 的格式 let base64 = 'data:image/jpg;base64,' + fileManager.readFileSync(res.tempFilePath, 'base64'); //其他 } }) }, })
wxss
page{ background: #fff; } .container { width: 95%; position: absolute; height: 95%; top: 50%; left: 50%; transform: translate(-50%, -50%); box-sizing: border-box; background: #fff; border-radius: 5px; } .canvas { width: 100%; height: 70%; border: 1px solid #aaa; box-sizing: border-box; } .tips{ height: 10%; display: flex; align-items: center; justify-content: center; text-align: center; color: #aaa; } .addBtn { display: flex; align-items: center; justify-content: center; height: 18%; position: fixed; bottom: 0; width: 100%; background: #fff; z-index: 100; } .addBtn .txt { text-align: center; width: 90%; font-size: 13px; border-radius: 100px; background: #0097fe; color: #fff; box-sizing: border-box; margin: 0 10px; padding: 10px; z-index: 100; }
json
{ "navigationBarTitleText": "电子签名", "pageOrientation": "landscape" }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。