学习学习

后卡后
152 阅读4分钟

✅作者简介：大家好我是瓜子三百克，励志成为全栈工程师的一枚程序猿，也是喜欢在学习和开发中记录笔记的小白博主！ 📃个人主页：瓜子三百克的主页 🔥系列专栏：uniapp前端 💖如果觉得博主的文章还不错的话，请点赞👍+收藏⭐️+留言📝支持一下博主哦🤞

让我们一起卷起来吧！！！

画布可以做很多事情，比如可以绘图，也可以做海报。在这里只是想拿它来的实现亲笔签名，开启不一样的亲笔签名姿势。

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

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

1、标签和样式 /* * 横屏后的适配方案 * @param $rpx为需要转换的字号 * @参考 https://blog.csdn.net/sdfsfsdscd/article/details/91375066 **/ @function tovmin($rpx) { @return #{$rpx * 100 / 750}vmin; } .page-content { width: 100vw; height: 100vh; .form { display: flex; flex-direction: column; width: 100%; height: 100%; .form-content { width: 100%; height: 100%; &__canvas { height: calc(100vh - tovmin(20) - tovmin(120) - constant(safe-area-inset-bottom)); height: calc(100vh - tovmin(20) - tovmin(120) - env(safe-area-inset-bottom)); width: 100vw; } } .form-footer { padding-top: tovmin(20); height: calc(tovmin(120) + constant(safe-area-inset-bottom)); height: calc(tovmin(120) + env(safe-area-inset-bottom)); width: 100%; display: flex; flex-direction: row; background: #FFFFFF; box-shadow: 0 tovmin(4) tovmin(20) tovmin(2) rgba(183, 183, 183, 0.20); button { width: 20vw; height: tovmin(88); line-height: tovmin(88); border-radius: tovmin(48); text-align: center; font-size: tovmin(36); font-weight: bold; } button::after { border: none; } &__reset { color: #008AFE; border: tovmin(1) solid #008AFE; } &__save { background-image: linear-gradient(135deg, #1BC5FF 0%, #008AFE 100%); } &__preview { color: #008AFE; border: tovmin(1) solid #008AFE; } } } }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 2、横屏切换 到【pages.json】文件中添加横屏切换配置 注意：不同的平台横屏切换将有所不一样。这里是针对微信小程序的横屏适配

{ "pages": [ //pages数组中第一项表示应用启动页，参考：uniapp.dcloud.io/collocation… { "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" } } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 然后是绘制逻辑处理，注意点在代码中备注：

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' }, 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 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() }, 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 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() //绘制路径 }

		},

1 2 3 4 5 6 7 8 9 10 11 12 13 14 3.4、触摸结束，将未绘制的点清空防止对后续路径产生干扰，简单吧？ touchend: function() { this.points = [] this.canvasCtx.draw(true) }, 1 2 3 4 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
		},

1 2 3 4 5 6 7 8 9 10 4、扫尾处理 上面的实现了，说明就可以签下你大名了。这里扫尾工作（按钮点击功能实现）只是景上添花。根据实际情况不一定要做。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 demo地址： 1、CSDN资源库地址：download.csdn.net/download/we… 2、gitee地址：gitee.com/chenzm_186/…

**🏆结束语🏆 **

🌹🌹：以上功能已全部实现，那么你想已怎么样的姿势开启你的亲笔签名模式呢？欢迎留言评论！ 🌹🌹：最后如果觉得我写的文章对您有帮助的话，欢迎点赞✌，收藏✌，加关注✌哦，谢谢谢谢！！

———————————————— 版权声明：本文为CSDN博主「瓜子三百克」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：blog.csdn.net/weixin_3863…

avatar
文章
阅读
粉丝