canvas签字版强制横屏，签字完成竖屏下回显签名 |
您所在的位置：网站首页 › js实现手写签名 › canvas签字版强制横屏，签字完成竖屏下回显签名 |
canvas签字版强制横屏，签字完成竖屏下回显签名
|
业务场景：
为了做笔迹鉴定，当用户进去签字版的时候强制用户横屏签字，签字完成后，需要把签字绘制到首页的pdf上（pdf.js将pdf绘制成的canvas元素） 待解决问题： 在竖屏情况下显示横屏样式，横屏下样式不变伪横屏下，需要将原点由（竖屏的左上角）修改成横屏下的左上角伪横屏下的签字再回显搭配pdf文档的时候需要做旋转处理 解决在竖屏情况下显示横屏样式，横屏下样式不变在原有竖屏样式不变的情况下，对竖屏情况下样式做处理，这样做的目的是当用户开启横屏的时候，我们原有的竖屏样式会自适应，即在原生横屏下我们不需要做任何处理， 只处理我们伪横屏的情况
上面截图2个关键点： 1.A ，B ，C区需要旋转90度（正或者负，保证文字是可阅读的） transform: rotate(90deg);/*设置元素顺时针旋转正90度*/ transform-origin: 0 100%;/*设置元素以右上角为原点进行旋转*/ width: calc(100vh);/*设置元素的宽为视图窗口高度*/ /*因为元素旋转后宽高是相互调换的，旋转后的元素的宽 = 未旋转时整个视图的高 */ 解决伪横屏下，需要将原点由（竖屏的左上角）修改成横屏下的左上角正常情况下获得签字版笔迹坐标的思路：当前touch事件距离视图窗口边缘的距离 - canvas元素距离视图窗口边缘的距离
由上图可知坐标切换点如下 新Y = canvas.width - 旧X 新X = 旧Y let newX ,newY; this.$canvas.on('mousedown touchstart', (event)=>{ if (event.type.indexOf('touch') !== -1) { newX = event.touches[0].clientY - canvas.offsetTop; //伪横屏的情况下， canvas上下是全部撑满的 canvas.offsetTop = 0； newX = oldY newY = canvas.width + 40 - event.touches[0].clientX; }else{ newX = event.clientY - this.canvas.offsetTop; newY = this.canvas.width + 40 - event.clientX; } });
解决伪横屏下的签字回显
因为是是我们自己写的假的横屏，所以实际canvas.toDataUrl导出的图片还是横着的，在竖屏浏览的时候回显我们的签名是有问题的 这个时候旋转canvas，然后调用drawImage方法 let ctx = canvas.getContext("2d"); let scale = 0.1 ; let imgObj = new Image(); imgObj.src = canvas.toDataURL(); //如果是伪横屏情况下，回显签名旋转 if (window.innerHeight > window.innerWidth) { ctx.translate(canvas.width / 2, canvas.height - canvas.width / 2); //旋转中心移动到右侧中下方，构建出右侧一个正方形，旋转后只有左侧会超出屏幕 ctx.rotate(-90 * Math.PI / 180); ctx.drawImage(imgObj, -canvas.width / 2 + 110, 200, canvas.width *scale , canvas.height *scale); }
先设置canvas的旋转中心，然后逆时针旋转90度，然后调用canvas.drawImage()将canvas导出的base64的图片绘制到文档的画板上
回显效果：右下角即为回显后的签名
|
【本文地址】
今日新闻 |
推荐新闻 |