请选择 进入手机版 | 继续访问电脑版

canvas签字版强制横屏,签字完成竖屏下回显签名

[复制链接]
孤单 发表于 2020-12-31 18:56:23 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
业务场景:

为了做字迹判断,当用户进去签字版的时候强制用户横屏签字,签字完成后,需要把签字绘制到首页的pdf上(pdf.js将pdf绘制成的canvas元素)
待办理问题:


  • 在竖屏情况下显示横屏样式,横屏下样式稳定
  • 伪横屏下,需要将原点由(竖屏的左上角)修改成横屏下的左上角
  • 伪横屏下的签字再回显搭配pdf文档的时候需要做旋转处理处罚
办理在竖屏情况下显示横屏样式,横屏下样式稳定

在原有竖屏样式稳定的情况下,对竖屏情况下样式做处理处罚,这样做的目的是当用户开启横屏的时候,我们原有的竖屏样式会自适应,即在原生横屏下我们不需要做任那边置处罚,
只处理处罚我们伪横屏的情况

上面截图2个关键点:
1.A ,B ,C区需要旋转90度(正大概负,包管文字是可阅读的)
 
  1. transform: rotate(90deg);/*设置元素顺时针旋转正90度*/transform-origin: 0 100%;/*设置元素以右上角为原点举行旋转*/width: calc(100vh);/*设置元素的宽为视图窗口高度*//*因为元素旋转后宽高是相互变更的,旋转后的元素的宽 =  未旋转时整个视图的高 */
复制代码
办理伪横屏下,需要将原点由(竖屏的左上角)修改成横屏下的左上角

正常情况下获得签字版字迹坐标的思路:当前touch事件间隔视图窗口边沿的间隔 -  canvas元素间隔视图窗口边沿的间隔
 

由上图可知坐标切换点如下
新Y = canvas.width - 旧X
新X = 旧Y
  1. 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方法
  1. 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的图片绘制到文档的画板上
 
 
回显效果:右下角即为回显后的签名

 
 

来源:https://blog.csdn.net/weixin_39812195/article/details/111953200
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )