=================== 01月更新 ===================
发现好多小伙伴查看这个Demo案例,于是将组件发布到Npm - 【@jensonhui/signature-h5】了,需要的小伙伴可以直接安装使用,文档请查看README
安装:
yarn add @jensonhui/signature-h5orcnpm install @jensonhui/signature-h5
使用:main.js
// main.jsimport Vue from 'vue';import App from './App.vue';// 手写签名import signatureH5 from '@jensonhui/signature-h5';import '@jensonhui/signature-h5/lib/signatureH5.css';Vue.config.productionTip = false;Vue.use(signatureH5);new Vue({render: (h) => h(App),}).$mount('#app');// template<template><div id="app"><signature-h5 /></div></template>
=================== 7月更新 ===================
最近发现,开源出来的源码、教程被某度收录到文库中了,但这不是关键,重点是它们在收费查看下载,恶心至极,索性直接把源码放出来,大家不用花冤枉money了!!(文下有地址)。
移动端下业务需要全屏手写签名,需求:兼容横竖屏,无论横竖屏下,签字图都需要是横向显示
这里直接用SignaturePad插件,主要记录踩坑:
实现效果:
思路分析:
1. 移动H5虽可以判断横竖屏,但考虑到多设备访问问题(微信下,有的手机需要用户开启横屏模式才可以旋转,一般人不知道怎么设置),所以强制横屏显示只能放弃。
2. 无法强制横屏,那么我们是否可以通过CSS将页面旋转达到视觉横屏效果呢? 答案当然是可以,通过transform: rotate(90deg)即可实现。
3. 通过transform可以将页面旋转,但是会面临新的问题:canvas画布旋转后会导致落笔精度丢失,如果你是手写canvas可以通过计算X,Y调整落笔,由于笔者采用插件,所以只能另寻思路。
4. 不能旋转canvas区域,那么我们只旋转按钮和文字提示区域,绘图canvas区域通过css媒体查询判断横竖屏,赋值不同得宽高,这样来达到视觉上得强制横屏。
踩坑记录:
1 . 移动端屏幕旋转,canvas触控点失灵,签名位置错乱
解决方案不唯一,首先canvas的父容器(class='recruit-canvas')固定定位在body下,默认宽高继承body,100%;其次,定位canvas采用定位,脱离文档流,动态设定宽高即可(宽高设置无效看踩坑三)
2 . 安卓微信下,网页无法旋转,IOS下网页旋转正常
ios手机权限高于微信,所以微信**旋转方向**默认开启跟随系统android手机下,微信默认关闭旋转跟随系统,打开设置步骤:我的-设置-通用-开启横屏模式(跟随系统旋转)
3 . canvas赋值宽高无效
canvas.style.width/height 与 canvas.width/height 设置不同,单独设置canvas.width/height前提需要在html标签中初始化默认width,height属性;单独设置canvas.style.width/height,需要在后面添加'px'单位,否则失效;备注:实际测试中Google chrome,发现不设置属性依然可以设置canvas.width/height,可能与兼容性有关
实现方式:
方式两种:区别在于用户感知
1. 通过window.resize或window.orientation判断横屏竖屏状态,设置对应宽高 - 无感知
2. 监听window.resize, 重新加载reload- 有感知,页面会刷新
// 这里为部分布局html,详情实现请看 DEMO<template><div class='recruit-canvas'><div class="canvas-box" ref="canvasRef" v-show="!previewImage"><canvas ref="canvasMapRef" id="canvas-map" width="100" height="100"></canvas></div><div class="btn-box flex-row"><span class="del-btn" @click="clearCanvasHandle">清除</span><span class="sure-btn" @click="makeCanvasHandle">确认</span></div><img v-show="previewImage" class="preview-image" :src="previewImage" alt="生成预览"></div></template><style lang='css' scoped>.recruit-canvas {position: fixed;top: 0;left: 0;width: 100%;height: 100%;}.recruit-canvas .preview-image {position: absolute;top: 50%;left: 50%;z-index: 999;transform: translate(-50%, -50%);}.recruit-canvas .canvas-box,.recruit-canvas .btn-box {position: absolute;top: 50%;z-index: 100;}.recruit-canvas .btn-box {left: -22%;z-index: 1000;text-align: center;transform: rotate(90deg);-o-transform: rotate(90deg);-ms-transform: rotate(90deg);-moz-transform: rotate(90deg);-webkit-transform: rotate(90deg);}.recruit-canvas .btn-box .del-btn,.recruit-canvas .btn-box .sure-btn {display: inline-block;width: 100px;height: 24px;margin: 0 10px;line-height: 24px;border-radius: 6px;background-color: #fff;}.recruit-canvas .btn-box .del-btn {color: #FF5E00;}.recruit-canvas .btn-box .sure-btn {color: #fff;background: linear-gradient(100deg, #FF4E01 0%, #FFBC01 100%);}.recruit-canvas .canvas-box {left: 22%;height: 80vh;width: 70vw;overflow: hidden;border: 1px dashed #D4D4D4;transform: translateY(-50%);background-color: #fff;}.recruit-canvas .canvas-box #canvas-map {width: 100%;height: 100%;}@media screen and (orientation: portrait) {/*竖屏 css*/}@media screen and (orientation: landscape) {/*横屏 css*/.recruit-canvas .canvas-box {top: 20px;left: 10%;width: 80vw;height: 70vh;transform: translateY(0);}.recruit-canvas .btn-box {width: 60%;left: 20%;top: 86%;transform: rotate(0);}}</style>
传送门:
查看完整DEMO源码 ( 兼容横竖屏,最终生成是横屏效果图)
特别感谢:
我是中小学生,程先生哈,提供了思路方向