本文记录了一位开发者如何实现移动端手写签名组件，包括监听手机屏幕旋转，修正手指落点偏差，以及在签名完成后如何处理横屏显示。组件基于vue-sign-canvas修改，并参考了其他文章解决旋转和矫正问题。签完名的图片可以下载，代码适配了PC和移动端事件。
最近项目组要求做一个移动端手写签名的组件，效果图如下
去查了很多资料，也借鉴了很多别人写好的例子，最终完成，记录一下
因为需要横屏签名，所以有监听手机屏幕，如果是手机屏幕锁定的情况下就通过代码旋转页面div实现横屏效果，如果手机屏幕自己旋转了，那就直接正常显示
项目签名的canvas是在sign-canvas组件的基础上修改的https://github.com/richerdyoung/vue-sign-canvas，同时横屏显示借鉴了关于移动端页面强制竖屏https://www.cnblogs.com/daniao11417/p/9524374.html 文章，旋转base64是参考canvas实现手写签名并旋转base64图片https://www.shangmayuan.com/a/5e1c769abd854f489ea8baf6.html文章，修修补补最后做出了上图效果，记录一下，格式上面小细节还不太完善，后面再修改
packages文件直接去htt
最低0.47元/天 解锁文章
扫一扫
4782
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
