微信小程序签名怎么操作(微信小程序实现简单手写签名组件的方法实例)
类别:编程学习 浏览量: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(); } } })
这个手写签名仅仅是为了业务应急使用。如果要优化的话,可以从笔锋模拟和笔迹模拟中入手。只不过要解决在实时模拟过程中卡顿的问题。
到此这篇关于微信小程序实现简单手写签名组件的文章就介绍到这了,更多相关微信小程序手写签名组件内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- css浮动小例子教程(使用css transition属性实现一个带动画显隐的微信小程序部件)
- 微信小程序可以用百度的echarts吗(uniapp在微信小程序中使用ECharts的方法)
- 微信小程序接口返回数据怎么弄(微信小程序页面返回传值的4种解决方案汇总)
- 微信小程序如何请求服务器数据(微信小程序学习笔记之页面配置与路由方式)
- 宝塔小程序制作(宝塔面板微信小程序使用图文教程)
- 微信小程序企业微信打卡(使用Python实现企业微信的自动打卡功能)
- 微信小程序语音录入(微信小程序使用同声传译实现语音识别功能)
- 微信小程序贪吃蛇大作战(微信小程序实现贪吃蛇游戏)
- 微信小程序即时聊天功能怎么实现(微信小程序实现聊天室功能)
- 微信小程序引用模板的函数(微信小程序页面与组件之间信息传递与函数调用)
- pythondjango后台管理(基于腾讯云服务器部署微信小程序后台服务Python+Django)
- 微信小程序中的代码怎么编辑(微信小程序新手入门之自定义组件的使用)
- 微信小程序canvas 动画(微信小程序使用canvas绘制钟表)
- 微信小程序获取手机信息(微信小程序获取手机号的踩坑记录)
- 微信小程序计数器代码(微信小程序实现计算器案例)
- 苹果微信小程序页面空白(iPhoneX安全区域Safe Area底部小黑条在微信小程序和H5的屏幕适配)
- 阴阳师 孟婆山兔CP不倒 新皮肤草稿 孟婆兔 让痒痒鼠点赞(阴阳师孟婆山兔CP不倒)
- 阴阳师孟婆御魂推荐 孟婆御魂搭配毕业套(阴阳师孟婆御魂推荐)
- 袁冰妍终于接到新剧,饰演反追男主,看到合作演员 眼光果然毒辣(袁冰妍终于接到新剧)
- 记忆中的台词(记忆中的台词)
- 袁冰妍轧戏 拍《琉璃》的同时还在拍《将夜》,难怪被骂演技差(拍琉璃的同时还在拍将夜)
- 刚红就耍大牌,《琉璃》角色滤镜碎一地,心疼工作人员(琉璃角色滤镜碎一地)
热门推荐
- nginx把https转为http请求(使用nginx方式实现http转换为https的示例代码)
- sqlserver分表后如何查询(SQL Server中row_number分页查询的用法详解)
- python字符串分析总结(Python 存储字符串时节省空间的方法)
- css的字体大全(CSS 常用中文字体 Unicode 编码表)
- 如何找到某个HTML元素所绑定的事件
- 宝塔面板怎么修改默认端口(如何修改宝塔Linux面板默认的端口号8888?)
- 织梦怎么添加图片(织梦怎么去掉上传图片的水印改为自己设计的水印)
- html5div例子(html5 外链式实现加减乘除的代码)
- CSS中z-index层叠顺序
- sql server 2014配置文件路径(SQL Server 2012 FileTable 新特性详解)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9