目录引言先看看效果图看看代码判别是否是PC版本注意事项结语引言 继上一篇的《丝滑流畅的手写签名功能》博文才过去没多久,我才发现 canvas 2d 无法在 PC 的小程序中使用,真实
继上一篇的《丝滑流畅的手写签名功能》博文才过去没多久,我才发现 canvas 2d 无法在 PC 的小程序中使用,真实白费了我的优化了,还好之前的代码没删掉,原本以为直接简单改改就能用,发现还不是,下面看看吧。
鼠标用起来效果不怎么样,但是还是挺流畅的。
主要就看看 Page.js 的代码吧,也就这个不一样,当然 html 内的 canvas 标签记得加上 canvas-id,把 type = '2d' 给去掉。
// pages/mine/signature/drawCanvas/drawCanvas.js
var app = getApp()
Page({
data: {
context: null,
index: 0,
height: 0,
width: 0,
// 前 一点
preX: 0,
preY: 0,
preCenterX: 0,
preCenterY: 0
},
onShow: function () {
let query = wx.createSelectorQuery();
const that = this;
query.select('#firstCanvas').boundinGClientRect();
query.exec(function (rect) {
let width = rect[0].width;
let height = rect[0].height;
that.setData({
width,
height
});
const context = wx.createCanvasContext('firstCanvas')
that.setData({
context: context
})
context.setStrokeStyle('#000000')
context.setLineWidth(2)
context.setFontSize(20)
});
},
bindtouchstart: function (e) {
let context = this.data.context
let curX = e.changedTouches[0].x
let curY = e.changedTouches[0].y
context.beginPath()
context.moveTo(curX, curY)
this.data.preX = curX
this.data.preY = curY
this.data.preCenterX = curX
this.data.preCenterY = curY
},
bindtouchmove: function (e) {
let context = this.data.context
let preX = this.data.preX
let preY = this.data.preY
let preCenterX = this.data.preCenterX
let preCenterY = this.data.preCenterY
let curX = e.changedTouches[0].x
let curY = e.changedTouches[0].y
let deltaX = Math.abs(preX - curX)
let deltaY = Math.abs(preY - curY)
// 相差大于3像素的时候作二阶贝塞尔曲线
if (deltaX >= 3 || deltaY >= 3) {
// 前后两点中心点
let centerX = (preX + curX) / 2
let centerY = (preY + curY) / 2
//这里以前一点作为控制点,中心点作为终点,起始点为上一次的中点,很流畅啊!
context.moveTo(preCenterX, preCenterY)
context.quadraticCurveTo(preX, preY, centerX, centerY);
context.stroke();
context.draw(true);
this.data.preX = curX
this.data.preY = curY
this.data.preCenterX = centerX
this.data.preCenterY = centerY
}
},
clear: function () {
let context = this.data.context
context.clearRect(0, 0, this.data.width, this.data.height);
context.draw();
context.setStrokeStyle('#000000')
context.setLineWidth(2)
context.setFontSize(20)
},
export: function () {
const that = this;
this.data.context.draw(false, wx.canvasToTempFilePath({
x: 0,
y: 0,
width: that.data.width,
height: that.data.height,
destWidth: that.data.width,
destHeight: that.data.height,
fileType: 'png',
canvasId: 'firstCanvas',
success(res) {
app.log("tempFilePath:" + res.tempFilePath);
// 你的代码
},
fail() {
wx.showToast({
title: '提交失败',
icon: 'none',
duration: 2000
})
}
}))
},
})
下面仔细讲讲不同点
这里因为使用的是旧版本的 canvas,所以用的还是原来的方式获取 canvas 的。
这个就很奇怪哦,可能是因为 canvas 的用法不一样,导致使用贝塞尔曲线的时候无法正确的定位到前一点位置,也可能是里面的前一点位置就是 canvas 内移动时一系列点中前一个点的位置,放在就不对,如果按前一篇博客的方式做,出来的就是下面的效果:
这里记得在手指初次落下的时候,初始化这两个值,并在移动后重新赋值。
这里就是网上一大堆的办法,没什么好说的。
这里涉及一个判别是否是 pc 版本的小程序的问题,看下面代码
wx.getSystemInfo({
success:function(res){
that.setData({
systemInfo:res,
})
if(res.platfORM == "devtools"){
//开发者工具
}else if(res.platform == "iOS"){
//IOS
}else if(res.platform == "Android"){
//android
}else {
//电脑了吧
}
}
})
在使用的地方合理选择正确的手写签名页面就可以,这里建议分别做两个页面,别把功能耦合在一起。
试了下没问题!而且调试器也是电脑版本,很奇怪为什么它可以使用 canvas 2d,而微信PC版本就不可以,开发者论坛很多人反馈也不解决。
以上就是小程序canvas手写签名适配PC实现示例详解的详细内容,更多关于小程序canvas手写签名适配PC的资料请关注编程网其它相关文章!
--结束END--
本文标题: 小程序canvas手写签名适配PC实现示例详解
本文链接: https://www.lsjlt.com/news/210136.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