微信小程序实现手写签名的示例代码
更新时间:2022年2月18日 15:43 点击:671 作者:小小蚊子
在微信小程序上实现手写签名,获取canvascontext新版本和旧版本有点坑,新版本在获取canvas后如果页面有滑动,则签名坐标出现异常(在微信开发者工具上会出现2022-2-17),但是在真机上即使滑动也不会出现异常,为了防止出现问题,暂时使用旧版本获取canvascontext
1.效果图
2.相关代码
canvas代码
新版2d canvas
<canvas id="canvas" class="canvas" canvas-id="canvas" type="2d" :disable-scroll="true" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd" @touchcancel="handleTouchCancel" ></canvas>
旧版canvas
<canvas class="canvas" canvas-id="canvas" :disable-scroll="true" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd" @touchcancel="handleTouchCancel" ></canvas>
js相关
获取新版2d canvas对象
const query = uni.createSelectorQuery().in(this); query.select('.canvas').node(res => { const { _width, _height } = res.node; /* 获取canvas wxml节点 */ this.canvas = res.node; this.canvasWidth = _width; this.canvasHeight = _height; /* 获取canvas 2dcontext */ this.canvasContext= this.canvas.getContext('2d'); /* 缩放设置canvas画布大小,防止笔迹错位 */ const ratio = wx.getSystemInfoSync().pixelRatio; this.canvas.width = this.canvasWidth * ratio; this.canvas.height = this.canvasHeight * ratio; this.canvasContext.scale(ratio, ratio); /* 设置线条颜色 */ this.canvasContext.strokeStyle = '#2A2A2A'; /* 设置线条粗细 */ this.canvasContext.lineWidth = 4; /* 设置线条的结束端点样式 */ this.canvasContext.lineCap = 'round'; }).exec()
缩放设置canvas画布大小,防止笔迹错位,这点和页面滑动没有关系,不设置也会导致坐标错位
const ratio = wx.getSystemInfoSync().pixelRatio; this.canvas.width = this.canvasWidth * ratio; this.canvas.height = this.canvasHeight * ratio; this.canvasContext.scale(ratio, ratio);
旧版本获取canvas
this.canvasContext = uni.createCanvasContext('canvas', this); /* 设置线条颜色 */ this.canvasContext.setStrokeStyle('#2A2A2A'); /* 设置线条粗细 */ this.canvasContext.setLineWidth(4); /* 设置线条的结束端点样式 */ this.canvasContext.setLineCap('round');
签名js方法,新版本和旧版本只有一个draw的区别,新版本不需要使用draw方法
/* 触摸开始 */ handleTouchStart(e) { this.drawStartX = e.changedTouches[0].x; this.drawStartY = e.changedTouches[0].y; this.canvasContext.beginPath(); }, /* 触摸移动 */ handleTouchMove(e) { /* 记录当前位置 */ const tempX = e.changedTouches[0].x; const tempY = e.changedTouches[0].y; /* 画线 */ this.canvasContext.moveTo(this.drawStartX, this.drawStartY); this.canvasContext.lineTo(tempX, tempY); this.canvasContext.stroke(); /* 旧版draw方法,新版本不需要draw */ this.canvasContext.draw(true); /* 重新记录起始位置 */ this.drawStartX = tempX; this.drawStartY = tempY; }, /* 触摸结束 */ handleTouchEnd(e) { this.canvasContext.save(); }, /* 触摸取消 */ handleTouchCancel(e) { this.canvasContext.save(); }, /* 清空画布 */ clearCanvas() { this.canvasContext.clearRect(0, 0, this.canvasWidth, this.canvasHeight); },
canvas生成本地图片(我这里封装了组件,需要传入this防止this指向异常)
/* 生成签名图片 */ generateSignImage() { return new Promise((resolve, reject) => { uni.canvasToTempFilePath({ x: 0, y: 0, // canvas: this.canvas, // 新版 canvasId: 'canvas', // 旧版使用id width: this.canvasWidth, height: this.canvasHeight, destWidth: this.canvasWidth, destHeight: this.canvasHeight, fileType: 'png', quality: 1, success: res => { resolve(res.tempFilePath) }, fail: err => { reject(err); } }, this) }) },
新版本的canvas主要是canvas wxml节点和canvas context中做了区分,旧版则只有一个canvas context就可以做全部的操作,在生成图片时,新版本是传入wxml对象,旧版本则是传入唯一canvasId,新版本canvas取消了draw方法
以上就是微信小程序实现手写签名的示例代码的详细内容,更多关于小程序手写签名的资料请关注猪先飞其它相关文章!
原文出处:https://segmentfault.com/a/1190000041421576
上一篇: 十分钟带你快速上手Vue3过渡动画
下一篇: JavaScript数据结构Number
相关文章
- 这篇文章主要介绍了微信小程序 页面传值详解的相关资料,需要的朋友可以参考下...2017-03-13
- 这篇文章主要给大家分享的是TypeScript 索引签名的理解,索引签名由方括号中的索引名称及其类型组成,后面是冒号和值类型:{ [indexName: KeyType]: ValueType }, KeyType 可以是一个 string、number 或 symbol,而ValueType 可以是任何类型,下面就俩简单了解一下吧...2021-10-15
- 这篇文章主要介绍了uniapp微信小程序:key失效的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-01-20
- 本文实例讲述了PHP常用的小程序代码段。分享给大家供大家参考,具体如下:1.计算两个时间的相差几天$startdate=strtotime("2009-12-09");$enddate=strtotime("2009-12-05");上面的php时间日期函数strtotime已经把字符串...2015-11-24
- 这篇文章主要为大家详细介绍了微信小程序自定义tabbar组件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-03-14
- 这篇文章主要介绍了微信小程序 网络请求(GET请求)详解的相关资料,需要的朋友可以参考下...2016-11-22
- 这篇文章主要给大家介绍了关于微信小程序如何获取图片宽度与高度的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-10
- 这篇文章主要介绍了微信小程序 二维码生成工具 weapp-qrcode详解,教大家如何在项目中引入weapp-qrcode.js文件,通过实例代码给大家介绍的非常详细,需要的朋友可以参考下...2021-10-23
- 这篇文章主要介绍了Python爬取微信小程序通用方法代码实例详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-09-29
- 这篇文章主要介绍了微信小程序手势操作之单触摸点与多触摸点的相关资料,需要的朋友可以参考下...2017-03-13
- 这篇文章主要介绍了微信小程序(应用号)开发新闻客户端实例的相关资料,需要的朋友可以参考下...2016-10-25
- 本文主要介绍了手把手教你uniapp和小程序分包,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-02
- 这篇文章主要介绍了微信小程序 页面跳转传递值几种方法详解的相关资料,需要的朋友可以参考下...2017-01-16
- 这篇文章主要为大家详细介绍了微信小程序实现canvas分享朋友圈海报,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-21
- 这篇文章主要为大家详细介绍了微信小程序实现选择地址省市区三级联动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-21
- 这篇文章主要为大家详细介绍了微信小程序实现点击导航条切换页面,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-11-19
- 这篇文章主要介绍了uniapp,微信小程序中使用 MQTT的问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-07-11
- 这篇文章主要介绍了微信小程序自定义底部弹出框动画,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-11-16
- 微信小程序目前的火热程度相信不用多言,最近利用空余时间用小程序实现了个动态的登录页效果,所以下面这篇文章主要给大家介绍了利用微信小程序实现登录页云层漂浮动画效果的相关资料,需要的朋友可以参考借鉴,下面来一起看看吧。...2017-05-09
- 本文章来为各位介绍一篇利用PS制作“签名”GIF小动画的例子,希望这个制作过程能够帮助到各位朋友,各位进入看看吧。 先给大家看下效果,有兴趣的童鞋→_→可以...2016-09-14