博客
关于我
uniAPP 小程序 签名组件
阅读量:520 次
发布时间:2019-03-07

本文共 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;">&#xe634;</span>
                重写
            </view>
            
            <view class="save-btn" @click="save">
                <span class="iconfont" style="margin-right: 10px;">&#xe6ef;</span>
                保存
            </view>
            
            <view class="cancel-bth" @click="colse">
                <span class="iconfont" style="margin-right: 10px;">&#xe6c8;</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/

你可能感兴趣的文章
Mac book pro打开docker出现The data couldn’t be read because it is missing
查看>>
MAC M1大数据0-1成神篇-25 hadoop高可用搭建
查看>>
mac mysql 进程_Mac平台下启动MySQL到完全终止MySQL----终端八步走
查看>>
Mac OS 12.0.1 如何安装柯美287打印机驱动,刷卡打印
查看>>
MangoDB4.0版本的安装与配置
查看>>
Manjaro 24.1 “Xahea” 发布!具有 KDE Plasma 6.1.5、GNOME 46 和最新的内核增强功能
查看>>
mapping文件目录生成修改
查看>>
MapReduce程序依赖的jar包
查看>>
mariadb multi-source replication(mariadb多主复制)
查看>>
MariaDB的简单使用
查看>>
MaterialForm对tab页进行隐藏
查看>>
Member var and Static var.
查看>>
memcached高速缓存学习笔记001---memcached介绍和安装以及基本使用
查看>>
memcached高速缓存学习笔记003---利用JAVA程序操作memcached crud操作
查看>>
Memcached:Node.js 高性能缓存解决方案
查看>>
memcache、redis原理对比
查看>>
memset初始化高维数组为-1/0
查看>>
Metasploit CGI网关接口渗透测试实战
查看>>
Metasploit Web服务器渗透测试实战
查看>>
MFC模态对话框和非模态对话框
查看>>