⼩程序实现⼿写签名的⽰例代码
⽬录
1.效果图
2.相关代码
canvas代码
js相关
在⼩程序上实现⼿写签名，获取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 = ateSelectorQuery().in(this);
query.select('.canvas').node(res => {
const {
_width,
_height
} = de;
/* 获取canvas wxml节点 */
this.canvas = de;
this.canvasWidth = _width;
this.canvasHeight = _height;
/* 获取canvas 2dcontext */
this.canvasContext= Context('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 = ateCanvasContext('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;
/* 画线 */
veTo(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 => {
写文章的小程序pFilePath)
},
fail: err => {
reject(err);
}
}, this)
})
},
新版本的canvas主要是canvas wxml节点和canvas context中做了区分，旧版则只有⼀个canvas context就可以做全部的操作，在⽣成图⽚时，新版本是传⼊wxml对象，旧版本则是传⼊唯⼀canvasId，新版本canvas取消了draw⽅法
以上就是⼩程序实现⼿写签名的⽰例代码的详细内容，更多关于⼩程序⼿写签名的资料请关注其
它相关⽂章！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。