uniAPP 小程序签名组件-白红宇

uniAPP 小程序签名组件

阅读量：520 次

发布时间：2019-03-07

本文共 5185 字，大约阅读时间需要 17 分钟。

该插件是横屏签名插件，修改后的插件已经的可以拿来就是用的状态，增加了显示功能，先上效果图

下面介绍代码：1.首先是插件本身，建议复制代码到common中使用。

<!--

签名组件

LYH

横屏组件

-->

重写

</view>

保存

</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>

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>

.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 中随机抽样：order by rand limit 的替代方案

查看>>

MySQL 为什么需要两阶段提交？

查看>>

mysql 为某个字段的值加前缀、去掉前缀

查看>>

mysql 主从 lock_mysql 主从同步权限mysql 行锁的实现

查看>>

mysql 主从互备份_mysql互为主从实战设置详解及自动化备份(Centos7.2)

查看>>

mysql 主键重复则覆盖_数据库主键不能重复

查看>>

Mysql 优化 or

查看>>

mysql 优化器 key_mysql – 选择*和查询优化器

查看>>

MySQL 优化：Explain 执行计划详解

mysql 内连接、自然连接、外连接的区别