uniapp怎么实现微信小程序的电子签名效果

今天小编给大家分享一下uniapp怎么实现微信小程序的电子签名效果的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

开发框架：uniapp
开发语言：vue2
展示平台：微信小程序（实际可以兼容多个平台）

标签和样式没什么好说的，这里绘制了简单的页面，见下图：

1、标签和样式

2、横屏切换

到【pages.json】文件中添加横屏切换配置
注意：不同的平台横屏切换将有所不一样。这里是针对微信小程序的横屏适配

{        "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages                {                        "path": "pages/index/index",                        "style": {                                "navigationBarTitleText": "亲笔签名",//导航栏标题                                "pageOrientation": "landscape",//切换横屏                                "enablePullDownRefresh": false,//关闭下拉刷新                                "disableScroll": true // 整体页面禁止上下滑动                        }                }        ],        "globalStyle": {                "navigationBarTextStyle": "black",                "navigationBarBackgroundColor": "#FFFFFF",                "backgroundColor": "#f5f5f5",                "navigationStyle": "default", // default/custom。custom即取消默认的原生导航栏                "mp-alipay": {                        "transparentTitle": "always",                        "titlePenetrate": "YES"                }        }}

然后是绘制逻辑处理，注意点在代码中备注：

3、绘图

3.1、初始化数据会吧？

             data() {                        return {                                canvasCtx: '', //绘图图像                                points: [], //路径点集合                                hasSign: false,                                isInit: false,                        }                },                onLoad(query) {                        this.canvasCtx = uni.createCanvasContext('canvas_sign', this) //创建绘图对象                        //设置画笔样式                        this.canvasCtx.lineWidth = 6                        // 设置线条的端点样式                        this.canvasCtx.lineCap = 'round'                        // 设置线条的交点样式                        this.canvasCtx.lineJoin = 'round'                },

3.2、触摸开始时获取起点，会吧？

                       touchstart: function(e) {                                if (!this.isInit) {                                        this.isInit = true                                        this.autographClick(1);                                }                                let startX = e.changedTouches[0].x                                let startY = e.changedTouches[0].y                                let startPoint = {                                        X: startX,                                        Y: startY                                }                                this.points.push(startPoint)                                //每次触摸开始，开启新的路径                                this.canvasCtx.beginPath()                        },

3.3、触摸移动获取路径点，会吧？

                       touchmove: function(e) {                                let moveX = e.changedTouches[0].x                                let moveY = e.changedTouches[0].y                                let movePoint = {                                        X: moveX,                                        Y: moveY                                }                                this.points.push(movePoint) //存点                                let len = this.points.length                                if (len >= 2) {                                        this.draw() //绘制路径                                }                        },

3.4、触摸结束，将未绘制的点清空防止对后续路径产生干扰，简单吧？

                       touchend: function() {                                this.points = []                                this.canvasCtx.draw(true)                        },

3.5、绘制笔迹，没得问题吧？

这里有几个注意点：

1.为保证笔迹实时显示，必须在移动的同时绘制笔迹
2.为保证笔迹连续，每次从路径集合中区两个点作为起点（moveTo）和终点(lineTo)
3.将上一次的终点作为下一次绘制的起点（即清除第一个点）

                      draw: function() {                                let point1 = this.points[0]                                let point2 = this.points[1]                                this.points.shift()                                this.canvasCtx.moveTo(point1.X, point1.Y)                                this.canvasCtx.lineTo(point2.X, point2.Y)                                this.canvasCtx.stroke()                                this.canvasCtx.draw(true)                                this.hasSign = true                        },

4、扫尾处理

上面的实现了，说明就可以签下你大名了。这里扫尾工作（按钮点击功能实现）只是景上添花。根据实际情况不一定要做。

以上就是"uniapp怎么实现微信小程序的电子签名效果"这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注行业资讯频道。