vue移动端横屏手写签名

最近项目组要求做一个移动端手写签名的组件，效果图如下

去查了很多资料，也借鉴了很多别人写好的例子，最终完成，记录一下

因为需要横屏签名，所以有监听手机屏幕，如果是手机屏幕锁定的情况下就通过代码旋转页面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文件直接去https://github.com/richerdyoung/vue-sign-canvas链接下载后复制过来就可以了，复制之后去自己项目的main.js进行组件全局注册，注册完成在自己页面使用即可

//全局注册 main.js
import SignCanvas from 'sign-canvas';Vue.use(SignCanvas)

这个是main.vue中我改动后的代码

const l = this.canvas.offsetLeft;

const t = this.canvas.offsetTop;加了这两个去矫正手指落点偏差

bindEvent() {// pc事件//鼠标按下 => 下笔this.canvas.addEventListener("mousedown", e => {e && e.preventDefault() && e.stopPropagation();this.writeBegin({x: e.offsetX || e.clientX,y: e.offsetY || e.clientY});});//书写过程 => 下笔书写this.canvas.addEventListener("mousemove", e => {e && e.preventDefault() && e.stopPropagation();this.config.isWrite && this.writing({ x: e.offsetX, y: e.offsetY });});//鼠标松开 => 提笔this.canvas.addEventListener("mouseup", e => {e && e.preventDefault() && e.stopPropagation();this.writeEnd({ x: e.offsetX, y: e.offsetY });});//离开书写区域 => 提笔离开this.canvas.addEventListener("mouseleave", e => {e && e.preventDefault() && e.stopPropagation();this.writeEnd({ x: e.offsetX, y: e.offsetY });});// app事件//手指按下 => 下笔this.canvas.addEventListener("touchstart", e => {e && e.preventDefault() && e.stopPropagation();const touch = e.targetTouches[0];// 这个是为了解决移动端手指落点偏移问题const l = this.canvas.offsetLeft;const t = this.canvas.offsetTop;// const t=0this.writeBegin({x: touch.pageX - l || touch.clientX - l,y: touch.pageY - t || touch.clientY - t});});//手指移动 => 下笔书写this.canvas.addEventListener("touchmove", e => {e && e.preventDefault() && e.stopPropagation();const touch = e.targetTouches[0];const l = this.canvas.offsetLeft;const t = this.canvas.offsetTop;// const t=0this.config.isWrite &&this.writing({ x: touch.pageX - l, y: touch.pageY - t });});//手指移动结束 => 提笔离开this.canvas.addEventListener("touchend", e => {e && e.preventDefault() && e.stopPropagation();const tcs = e.targetTouches;const ccs = e.changedTouches;const touch =(tcs && tcs.length && tcs[0]) || (ccs && ccs.length && ccs[0]);const l = this.canvas.offsetLeft;const t = this.canvas.offsetTop;// const t=0this.writeEnd({ x: touch.pageX - l, y: touch.pageY - t });});},

这个是签名的页面index.vue，用来展示签完的名字

<template><div class="sign b-white"><van-nav-bar title="我的签名" left-arrow @click-left="onClickLeft"/><div class="img"><img :src="src" alt class="myImg" v-if="src"></div><div class="btn" @click="btnClick">{{src?'重签':'签名'}}</div></div>
</template>
<script>
import { mobileURL } from '@/config/baseURL'
export default {data() {return {src: ""};},methods: {btnClick() {this.$router.push(`${mobileURL}/sign/mySign`);this.src = "";},onClickLeft() {// this.$router.go(-1)}},created() {// console.log(this.$route.query.img);if (this.$route.query.img) {this.src = this.$route.query.img;}}
};
</script>
<style lang="less">
.sign {height: 100vh;padding: 10px;.img {width: 100%;height: 175px;margin-top: 10px;border: 1px solid #eee;border-radius: 5px;background: #fff;.myImg {width: 100%;height: 100%;}}.btn {padding: 5px 10px;width: 90%;height: 30px;line-height: 30px;border: 2px solid #eee;border-radius: 10px;text-align: center;margin: 20px auto;cursor: pointer;background: #1890ff;color: #fff;}
}
</style>

这个是签名页面，使用了canvas组件，同时做了横屏处理

签完名也可以下载到本地，按钮我注释了，js代码还在，可以自己选择，样式方面也可以根据自己要求调整。

备注：强制横屏那里，原本我的思路是选择整个html，但是旋转完canvas手指落点就完全不对了，调整起来比较麻烦，所以我就canvas依然是竖的，但是我把里面的其他所有元素放在一个div里面用js代码旋转了，这样看起来就是整个屏幕旋转，凑合这用吧

vue移动端横屏手写签名相关推荐

php手写签名保存,PHP+JS实现PC端+移动端PDF手写签名合并
PHP+JS实现PC端+移动端PDF手写签名合并 1年前阅读 3029 评论 0 喜欢 0 前端插件:`jSignature.js` PHP插件:`FPDF+FPDI` `index.html`代码 ...
html移动端实现手写签名，signature手写签名实现，微信公众号浏览器html手写签名实现
前言 html移动端手写自动横竖签名实现,并base64图片格式获取: 横竖根据屏幕宽高自动平铺. 效果图图一图二实现如下代码直接复制成.html文件打开即可预览效果 <!DOCTYPE ...
html5 移动端手写签名,H5移动端项目实现手写签名功能 vue实现手写签名
vue 移动端实现手写签名效果,功能很完美,保存时保存为base64格式. 刚好项目用到此功能,就网上找了一下,清理了无用代码,简单方便,因为项目中多个地方需要使用,所以我将它整理为组件,通过ref和 ...
H5移动端项目实现手写签名功能 vue实现手写签名
vue 移动端实现手写签名效果,功能很完美,保存时保存为base64格式. base64转file文件格式 vue中将base64转file文件格式刚好项目用到此功能,就网上找了一下,清理了无用代码 ...
Vue使用sign-canvas实现在线手写签名
效果图: sign-canvas 一个基于 canvas 开发,封装于 Vue 组件的通用手写签名板(电子签名板),支持 pc 端和移动端. 更新日志 v1.1.4 功能更新:增加全屏手写方案,可以 ...
手机手写签名 php,基于canvas实现手写签名（vue）
最近一直在研究canvas的东西,正好之前对手写签名这块有点兴趣.就自己基于vue写了一个简易的手写签名demo. 其中原理比较简单,先生成一个canvas画布,并对canvas进行touchstar ...
在app端手写签名并保存下来（以文件形式或者是base64编码）
最近做的项目有个需求,在app端手写签名的并保存为文件或者base64编码.所以就刚好有时间写了一下并记录下来: 先上效果图: 分析思路:因为这里是要获取手势轨迹并画出来,所以肯定是有个Touch事件 ...
vue 手写签名_与众不同的手写签批
随着移动互联网+时代的到来,手机成了我们日常生活中不可缺少的必备用品,它不仅仅是一个通讯工具,更是一台移动电脑.因此越来越多的单位把希望在手机上就能完成业务的处理,但也希望能还原线下办理的效果.因此, ...
html5采集手写签名,前端canvas手写签名（含移动端）
image.png 直接上代码手写签名 html, body { margin: 0; padding: 0; } .saveimg { text-align: center; } .saveimg ...

vue移动端横屏手写签名

因为需要横屏签名，所以有监听手机屏幕，如果是手机屏幕锁定的情况下就通过代码旋转页面div实现横屏效果，如果手机屏幕自己旋转了，那就直接正常显示

vue移动端横屏手写签名相关推荐

最新文章

热门文章