目录1.效果图2.相关代码canvas代码js相关在微信小程序上实现手写签名,获取canvascontext新版本和旧版本有点坑,新版本在获取canvas后如果页面有滑动,则签名坐标
在微信小程序上实现手写签名,获取canvascontext新版本和旧版本有点坑,新版本在获取canvas后如果页面有滑动,则签名坐标出现异常(在微信开发者工具上会出现2022-2-17),但是在真机上即使滑动也不会出现异常,为了防止出现问题,暂时使用旧版本获取canvascontext
新版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>
获取新版2d canvas对象
const query = uni.createSelectorQuery().in(this);
query.select('.canvas').node(res => {
const {
_width,
_height
} = res.node;
this.canvas = res.node;
this.canvasWidth = _width;
this.canvasHeight = _height;
this.canvasContext= this.canvas.getContext('2d');
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();
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方法
--结束END--
本文标题: 微信小程序实现手写签名的示例代码
本文链接: https://www.lsjlt.com/news/139676.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0