1 2 3 4 5 var bindDatas; 6 var opts; 7 var bindDatasStr; 8 //1.获取canvas 9 var myCanvas = document.getElementById("canvas"); 10 //获取2d对象 11 var ctx = myCanvas.getContext("2d"); 12 //清空画布 13 var reset = document.getElementById("reset"); 14 // 保存签名 15 var yes = document.getElementById("yes"); 16 // 保存的盒子 17 var imgs = document.getElementById("imgs"); 18 //控制线条是否画 19 var isMouseMove = false; 20 //线条位置 21 var lastX, lastY; 22 var is_painting = false; 23 mui.plusReady(function () { 24 opts = mui.currentWebview.selectParams; 25 // 从 localStorage 中获取字符串并将其转换为对象 26 bindDatasStr = localStorage.getItem('bindDatas'); 27 myCanvas.width = window.innerWidth; 28 hheight = window.innerHeight; 29 myCanvas.height = hheight /2;(关于笔触和触点偏移关键点在这里[设置画布的高]) 30 31 console.log(myCanvas.width); 32 console.log(myCanvas.height); 33 initCanvas(); 34 console.log(is_painting); 35 }); 36 37 function getMousePos(event) { 38 var rect = canvas.getBoundingClientRect(); 39 var x = event.clientX - rect.left; 40 var y = event.clientY - rect.top; 41 console.log("鼠标坐标：x=" + x + ", y=" + y); 42 } 43 //初始化 44 function initCanvas() { 45 // 重新设置画布的起始点(关于笔触和触点偏移关键点在这里) 46 ctx.translate(0,-hheight/2); 47 let offset = myCanvas.getBoundingClientRect(); 48 var start = (e) => { 49 e.preventDefault(); 50 isMouseMove = true; 51 drawLine( 52 e.changedTouches[0].clientX - offset.left, 53 e.changedTouches[0].clientY - offset.top, 54 false 55 ); 56 is_painting = true; 57 }; 58 let move = (e) => { 59 if (isMouseMove) { 60 getMousePos(e.changedTouches[0]); 61 drawLine( 62 e.changedTouches[0].clientX - offset.left, 63 e.changedTouches[0].clientY - offset.top, 64 true 65 ); 66 } 67 }; 68 let end = (e) => { 69 isMouseMove = false; 70 }; 71 let cancel = (e) => { 72 isMouseMove = false; 73 }; 74 75 myCanvas.addEventListener('touchstart', start) 76 myCanvas.addEventListener('touchmove', move) 77 myCanvas.addEventListener('touchend', end) 78 myCanvas.addEventListener("touchcancel", cancel) 79 } 80 //画线 81 function drawLine(x, y, isT) { 82 if (isT) { 83 ctx.beginPath(); 84 ctx.lineWidth = 1; //设置线宽状态 85 ctx.strokeStyle = 'black'; //设置线的颜色状态 86 ctx.lineCap = 'round' 87 ctx.lineJoin = "round"; 88 ctx.moveTo(lastX, lastY); 89 ctx.lineTo(x, y); 90 ctx.stroke(); 91 ctx.closePath(); 92 } 93 // 每次移动都要更新坐标位置 94 lastX = x; 95 lastY = y; 96 } 97 98 //清空画图 99 function clearCanvas() { 100 imgs.innerHTML = "" 101 ctx.beginPath(); 102 ctx.clearRect(0,hheight/2, myCanvas.width, myCanvas.height);//重新设置了起始点后,使用clearRect会出现没有清空画布这个问题,这里的hheight使用了window的高重置了一下clearRect的起始点 103 ctx.closePath(); //可加入，可不加入 104 is_painting = false; 105 } 106 //保存图片 107 function saveImgInfo() { 108 if (is_painting == true) { 109 var images = myCanvas.toDataURL('image/png'); 110 imgs.innerHTML = `<img src='${images}'>`; 111 imgs.classList.remove('mui-hidden'); 112 myCanvas.classList.add('mui-hidden'); 113 114 var options = { 115 async: false 116 }; 117 118 var data = { 119 src_data: images, 120 bindDatas: JSON.parse(bindDatasStr) 121 }; 122 123 var params = 'funid=asset_app&eventcode=uploadESign&data=' + JSON.stringify(data); 124 125 var hdcall = function () { 126 mui.toast('提交成功！'); 127 // var targetWin = plus.webview.getWebviewById(opts.callbackWinId); 128 // mui.fire(targetWin, opts.callbackEvent); 129 mui.back(); 130 } 131 132 jxm.post(params, hdcall, options); 133 } else { 134 console.log(is_painting); 135 mui.alert("请先签名!"); 136 return false; 137 } 138 } 139 140 reset.addEventListener("click", clearCanvas); 141 yes.addEventListener("click", saveImgInfo);
前端监听移动端返回按钮
document.addEventListener("plusready", function() {
// 注册返回按键事件
plus.key.addEventListener('backbutton', function() {
// 事件处理
}, false);
});