微信小程序签名怎么操作(微信小程序实现简单手写签名组件的方法实例)
类别:编程学习 浏览量:161
时间:2021-10-12 00:17:59 微信小程序签名怎么操作
微信小程序实现简单手写签名组件的方法实例目录
- 背景:
- 需求:
- 效果
- 一、思路
- 二、实现
- 1. 页面与样式
- 2. 初始化
- 3. 点击时
- 4. 签名时
- 三、总结
在做项目过程中,需要在微信小程序中实现手写签名组件。在网上找了微信小程序手写签名实现,但是都是不太理想。在实际运用中,会因为实时计算较多的贝塞尔曲线而产生卡顿。效果不理想。所以退一步,不需要笔锋以及笔迹模拟效果。只需要简单的手写签名实现。
需求:可以实现用户在微信小程序上手写签名。
需要组件化。
效果 一、思路在微信小程序中,我们使用canvas组件实现。将用户的输入想象成为一只笔。我们要画的签名是由很多点构成的。但是单纯的点是不能很好地构成线。点与点之间还要由线连接。下面是实现过程代码。
二、实现1. 页面与样式
wxml
这里的canvas组件是最新的用法。
<view class="dashbox"> <view class="btnList"> <van-button size="small" bind:click="clearCanvas">清空</van-button> </view> <view class="handCenter"> <canvas class="handWriting" disable-scroll="{{true}}" id="handWriting" bindtouchstart="scaleStart" bindtouchmove="scaleMove" bindtouchend="scaleEnd" bindtap="mouseDown" type="2d" > </canvas> </view> </view>
wxss
.btnList{ width: 95%; margin:0 auto; } .handWriting{ background: #fff; width: 95%; height: 80vh; margin:0 auto }
2. 初始化
由于是在自定义组件中使用,所以要注意获取canvas的时候的this指向问题。如果不调用SelectorQuery的In方法,那么就在自定义组件获取不到canvas,因为这个时候指向的父组件。
Component({ /** * 组件的初始数据 */ data: { canvasName:'#handWriting', ctx:'', canvasWidth:0, canvasHeight:0, startPoint:{ x:0, y:0, }, selectColor: 'black', lineColor: '#1A1A1A', // 颜色 lineSize: 1.5, // 笔记倍数 radius:5,//画圆的半径 }, ready(){ let canvasName = this.data.canvasName; let query = wx.createSelectorQuery().in(this);//获取自定义组件的SelectQuery对象 query.select(canvasName) .fields({ node: true, size: true }) .exec((res) => { const canvas = res[0].node; const ctx = canvas.getContext('2d'); //获取设备像素比 const dpr = wx.getSystemInfoSync().pixelRatio; //缩放设置canvas画布大小,防止笔迹错位 canvas.width = res[0].width * dpr; canvas.height = res[0].height * dpr; ctx.scale(dpr, dpr); ctx.lineJoin="round"; this.setData({ctx}); }); query.select('.handCenter').boundingClientRect(rect => { console.log('rect', rect); this.setData({ canvasWidth:rect.width, canvasHeight:rect.height }); }).exec(); }, //省略以下代码...... });
3. 点击时
Component({ //省略以上代码... methods: { scaleStart(event){ if (event.type != 'touchstart') return false; let currentPoint = { x: event.touches[0].x, y: event.touches[0].y } this.drawCircle(currentPoint); this.setData({startPoint:currentPoint}); }, drawCircle(point){//这里负责点 let ctx = this.data.ctx; ctx.beginPath(); ctx.fillStyle = this.data.lineColor; //笔迹粗细由圆的大小决定 ctx.arc(point.x, point.y, this.data.radius, 0 , 2 * Math.PI); ctx.fill(); ctx.closePath(); }, //省略以下代码... } })
4. 签名时
Component({ //省略以上代码 methods:{ drawLine(sourcePoint, targetPoint){ let ctx = this.data.ctx; this.drawCircle(targetPoint); ctx.beginPath(); ctx.strokeStyle = this.data.lineColor; ctx.lineWidth = this.data.radius * 2;//这里乘2是因为线条的粗细要和圆的直径相等 ctx.moveTo(sourcePoint.x, sourcePoint.y); ctx.lineTo(targetPoint.x, targetPoint.y); ctx.stroke(); ctx.closePath(); }, clearCanvas(){//清空画布 let ctx = this.data.ctx; ctx.rect(0, 0, this.data.canvasWidth, this.data.canvasHeight); ctx.fillStyle = '#FFFFFF'; ctx.fill(); } } })
这个手写签名仅仅是为了业务应急使用。如果要优化的话,可以从笔锋模拟和笔迹模拟中入手。只不过要解决在实时模拟过程中卡顿的问题。
到此这篇关于微信小程序实现简单手写签名组件的文章就介绍到这了,更多相关微信小程序手写签名组件内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- 微信小程序canvas缩放(微信小程序之html5 canvas绘图并保存到系统相册)
- 微信小程序存token(小程序开发实现access_token统一管理)
- 微信小程序签名怎么操作(微信小程序实现简单手写签名组件的方法实例)
- 微信小程序获取手机信息(微信小程序获取手机号的踩坑记录)
- 微信小程序计时器(微信小程序实现简单的计算器功能)
- 微信小程序canvas 动画(微信小程序使用canvas绘制钟表)
- 微信小程序开发如何实现自动保存(微信小程序开发实用技巧之数据传递和存储)
- 微信小程序映射设置(微信小程序虚拟列表的实现示例)
- 9小时搞定微信小程序开发(关于加快微信小程序开发的一些小建议)
- 微信小程序接入第三方支付的方法(小程序通过小程序云实现微信支付功能实例)
- flask项目微信小程序(Python Flask 搭建微信小程序后台详解)
- 宝塔小程序制作(宝塔面板微信小程序使用图文教程)
- 微信小程序语音录入(微信小程序使用同声传译实现语音识别功能)
- 微信小程序转盘动画效果(微信小程序实现摇筛子效果)
- 微信小程序js 抽奖概率(小程序实现筛子抽奖)
- 微信小程序开发简单计算器(小程序实现计算器功能)
- 美国数十万加仑牛奶倒进下水道,世界会重演1929年的大萧条吗(美国数十万加仑牛奶倒进下水道)
- 美国数十万加仑牛奶倒入下水道,贫民区食不果腹,历史再次重演(美国数十万加仑牛奶倒入下水道)
- 美国倒掉数十万加仑牛奶 上热搜第一,这一幕似曾相识(美国倒掉数十万加仑牛奶)
- 深度 倒牛奶 这一幕为何又在美国上演(深度倒牛奶)
- 美国数十万加仑牛奶倒下水道怎么回事 原因曝光令人心痛(美国数十万加仑牛奶倒下水道怎么回事)
- 探索中国神秘文字(探索中国神秘文字)
热门推荐
- Sql Server锁的粒度
- dede图片上传问题(DEDE图片集上传图片时出错显示FILEID的解决方法)
- php验证码实现过程(php伪静态验证码不显示的解决方案)
- python抖音视频收集(python制作抖音代码舞)
- C#如何读取Excel
- css3控制效果过渡的属性(css3之UI元素状态伪类选择器实例演示)
- python交互执行shell脚本(python 利用文件锁单例执行脚本的方法)
- css中好看的渐变颜色代码(CSS Tips:段落每行渐变色文本效果的实现方法)
- python3编程过程(Python3模拟登录操作实例分析)
- python自动化邮件管理(Python实现E-Mail收集插件实例教程)