手写签名插件—jSignature使用心得

    最近需要做一个移动端手写签名的功能,上网搜了一下基本都是jSignature这个插件,几乎没得第二选择,于是照着网上的各个版本copy测试,在PC端测试是没什么问题的,很easy。

    问题1::在移动端改变了canvas的父盒子大小后就出现问题了,手写的和显示的不在一起,jSignature画笔出现了偏移,经过审查元素发现,是由于canvas的尺寸大小变成了100%引起的,解决办法就是需要手动设置canvas的尺寸,如果用100%、rem这些相对单位是会出现问题的,如果需要做响应式的,那么就在媒体查询里面写,如果需要用js控制,需设置canvas.attr(“width”,”200”),注意不要带单位!!,结论:style里的宽高和canvas标签里的宽高要对应,不然笔的位置就出现偏差;

    问题2:由于移动端有高倍屏,所以出现了画布笔画模糊的问题,这就需要根据屏幕的DPI来更改画布的大小,普通屏幕设置style=”width:300px;height:150px;” 属性里设置width=”300” height=”150”,在高清屏时style的宽高不变,canvas里的width=”300*DPI” heigth=”150*DPI”,这样就清晰了,好在已经有前辈封装好了,hidpi-canvas.js直接拿来用即可。

<script src="js/hidpi-canvas.js">script>
<script src="js/signature/jSignature.js" >script>

    问题3:落笔不够圆滑的问题,由于设置了画笔的宽度为10px,当点在屏幕上时显示的不是一个点,而是一个方块,一个10*10px的方块,已经看到有大神写了demo出来了,应该是用react写的,暂时还没有研究出来移植到我的代码中,参考地址:canvas签名组件,不过外观和自适应屏幕这块作者可能没有做很多处理,还需要自己再加工;

    问题4:签名没有笔锋,也就是没有原笔迹的那种效果,这个可真难到我了,毕竟牵涉到很多算法,不像是一笔画下去那么简单了,原以为web端实现几乎不可能,但还是有国外的高手几年前就写了demo了,正因为是高手写的,看起来也很费劲,文件层层引用,一个签名的页面请求的文件38个之多,想要拿过来用都很难,有兴趣的可以研究一下并分享哦!

    GitHub项目名称:sign-here
    canvas原笔迹签名demo

    下面是签名显示及上传到阿里云OSS代码,有需要的可以看看,如果只是需要看jSignature的参数,百度搜索简单版的看吧。


                    
                    

你可能感兴趣的:(HTML,JavaScript,前端开发)