移动端手写板 + 模态框 + 弹框,前端监听移动端返回按钮

今天的需求是把全屏的手写板改为同一个页面只占半屏的手写板,本来用的iframe,后面发现笔触和屏幕按下的位置不一样,然后用了jQuery的$.load(),发现用$.load会导致文件中的js不执行,后面还是重新开始,在同文件重新写了一个canvas手写板,然后发现了,canvas在全屏的时候没问题,在容器设置高度为50%的时候,笔触就还是会出现和屏幕按下位置不一样,后面是通过ctx.translate(0,-hheight/2);重置画板中的起始点完成需求的,套iframe也可以试试这个解决方法。,看代码(mui+jQuery+canvas)

  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= &eventcode= &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         ajax.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);
});