uniAPP 小程序 签名组件
本文共 5185 字，大约阅读时间需要 17 分钟。
该插件是横屏签名插件， 修改后的插件已经的可以拿来就是用的状态，增加了显示功能，先上效果图
下面介绍代码：1.首先是插件本身，建议复制代码到common中使用。
<template>
<!-- 签名组件 LYH 横屏组件 --> <view class="signa"> <view class="btn"> <view class="cancel-btn" @click="clear"> <span class="iconfont" style="margin-right: 10px;"></span> 重写 </view> <view class="save-btn" @click="save"> <span class="iconfont" style="margin-right: 10px;"></span> 保存 </view> <view class="cancel-bth" @click="colse"> <span class="iconfont" style="margin-right: 10px;"></span> 关闭 </view> </view> <canvas class="canvas" disable-scroll="true" :style="{'width':width,'height':height}" canvas-id="designature" @touchstart="starts" @touchmove="moves" @touchend="end"></canvas> </view> </template><script>
export default { components: {}, data() { return { dom: null, line: [], radius: 0, width: '0px', height: '0px', } }, onLoad() { }, computed:{ }, created() { uni.getSystemInfo({ success: (res) => { this.width = res.windowWidth - 60 + 'px'; this.height = res.windowHeight - 15 + 'px'; } }); this.dom = uni.createCanvasContext('designature',this); }, onShow(){ }, methods: { end(e) { }, distance(a, b) { let x = b.x - a.x; let y = b.y - a.y; return Math.sqrt(x * x + y * y); }, // 开始 starts(e) { this.line.push({ points: [{ time: new Date().getTime(), x: e.touches[0].x, y: e.touches[0].y, dis: 0 }] }) let currentPoint = { x: e.touches[0].x, y: e.touches[0].y } this.currentPoint = currentPoint this.drawer(this.line[this.line.length - 1]) }, // 滑动 moves(e) { let point = { x: e.touches[0].x, y: e.touches[0].y } this.lastPoint = this.currentPoint, this.currentPoint = point this.line[this.line.length - 1].points.push({ time: new Date().getTime(), x: e.touches[0].x, y: e.touches[0].y, dis: this.distance(this.currentPoint, this.lastPoint) }) this.drawer(this.line[this.line.length - 1]) }, // 书写 drawer(item) { let x1, x2, y1, y2, len, radius, r, cx, cy, t = 0.5, x, y; var time = 0; if (item.points.length > 2) { let lines = item.points[item.points.length - 3]; let line = item.points[item.points.length - 2]; let end = item.points[item.points.length - 1]; x = line.x; y = line.y; x1 = lines.x; y1 = lines.y; x2 = end.x; y2 = end.y; var dis = 0; time = (line.time - lines.time) + (end.time - line.time) dis = line.dis + lines.dis + end.dis; var dom = this.dom; var or = Math.min(time / dis * this.linePressure + this.lineMin, this.lineMax); cx = (x - (Math.pow(1 - t, 2) * x1) - Math.pow(t, 2) * x2) / (2 * t * (1 - t)) cy = (y - (Math.pow(1 - t, 2) * y1) - Math.pow(t, 2) * y2) / (2 * t * (1 - t)) dom.setLineCap('round') dom.beginPath(); dom.setStrokeStyle('black') dom.setLineWidth(5) dom.moveTo(x1, y1); dom.quadraticCurveTo(cx, cy, x2, y2); dom.stroke(); dom.draw(true) } }, // 清除 clear() { this.dom.clearRect(0, 0, 1000, 1000) this.dom.draw() }, //关闭 colse(e){ this.$emit('colse',false); }, // 保存图片 save() { var t=this; uni.canvasToTempFilePath({ canvasId: 'designature', fileType: 'png', quality: 1, //图片质量 success:function(res) { t.$emit('getImg',res.tempFilePath) // uni.navigateBack({ // delta:1 // }) }, fail(e){ console.log(e) } },this) } } } </script><style scoped lang="less">
.signa { position: relative; overflow: hidden; background-color: #f1efef; height: 100vh; width: 100vw; .canvas { background-color: #FFFFFF; position: absolute; z-index: 9999; left: 50px; top: 6px; border: 1px solid #d6d6d6; } .btn { height: 100vh; position: fixed; background-color: #007AFF; font-size: 32rpx; .cancel-btn { width: 20vh; position: fixed; left: 50rpx; border: 1rpx solid #a9a1a1; transform: rotate(90deg); color: #666; margin-left: -10vh; margin-top: 15vh; height: 65rpx; line-height: 65rpx; border-radius: 3px; text-align: center; justify-content: center; } .save-btn { position: absolute; z-index: 999; display: inline-flex; margin-top: 47vh; margin-left: -10vh; transform: rotate(90deg); background: #007AFF; width: 20vh; left: 50rpx; border-radius: 3px; border: 1rpx solid #007AFF; color: #fff; height: 65rpx; line-height: 65rpx; text-align: center; justify-content: center; } .cancel-bth{ display: inline-flex; background: #de7f7f; color: #fff; width: 20vh; height: 65rpx; line-height: 65rpx; text-align: center; justify-content: center; transform: rotate(90deg); margin-top: 80vh; border-radius: 3px; border: 1rpx solid #de7f7f; position: absolute; left: 50px; z-index: 999; margin-left: -14vh; } } } </style>2.该到了引用的界面了，在需要引用的页面引入插件，并挂在插件
3.在template中使用引入QM标签
4.在return中添加控制插件显示/隐藏的开关
5.在methods中复制一下三个方法
6.添加css样式
// 签名
.textBox{ width: 80%; padding: 20px; margin: 0 auto; margin-top: 50px; .name{ float: left; height: 30px; line-height: 30px; } .show{ width: 40%; height: 40px; float: left; margin-top: -10px; border-bottom: 1px solid #333; position: relative; .img{ width: 40px; height: 123px; transform: rotate(-90deg); position: absolute; top: -48px; left: 38px; // image-rendering:-moz-crisp-edges; // image-rendering:-o-crisp-edges; // image-rendering:-webkit-optimize-contrast; // image-rendering: crisp-edges; // -ms-interpolation-mode:nearest-neighbor; } } .iconfont{ float: left; font-size: 24px; margin-top: 4px; color: #3967FF; margin-left: 10px; } } .QMstyle{ position: fixed; z-index: 99999; top: 0; left: 0; }就可以完美的使用签名组件了，手机端完美测试
转载地址：http://hxqjz.baihongyu.com/
你可能感兴趣的文章
MySQL I 有福啦，窗口函数大大提高了取数的效率！
查看>>
mysql id自动增长 初始值 Mysql重置auto_increment初始值
查看>>
MySQL in 太多过慢的 3 种解决方案
查看>>
Mysql Innodb 锁机制
查看>>
MySQL InnoDB中意向锁的作用及原理探
查看>>
MySQL InnoDB事务隔离级别与锁机制深入解析
查看>>
Mysql InnoDB存储引擎 —— 数据页
查看>>
Mysql InnoDB存储引擎中的checkpoint技术
查看>>
Mysql InnoDB存储引擎中缓冲池Buffer Pool、Redo Log、Bin Log、Undo Log、Channge Buffer
查看>>
MySQL InnoDB引擎的锁机制详解
查看>>
Mysql INNODB引擎行锁的3种算法 Record Lock Next-Key Lock Grap Lock
查看>>
mysql InnoDB数据存储引擎 的B+树索引原理
查看>>
mysql innodb通过使用mvcc来实现可重复读
查看>>
mysql interval显示条件值_MySQL INTERVAL关键字可以使用哪些不同的单位值？
查看>>
Mysql join原理
查看>>
mysql order by多个字段排序
查看>>
MySQL Order By实现原理分析和Filesort优化
查看>>
mysql problems
查看>>
mysql replace first,MySQL中处理各种重复的一些方法
查看>>
MySQL replace函数替换字符串语句的用法（mysql字符串替换）
查看>>