丝滑流畅的手写签名 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.contextlet curX = e.changedTouches[0].xlet curY = e.changedTouches[0].ycontext.beginPath()context.moveTo(curX, curY)this.data.preX = curXthis.data.preY = curYthis.data.preCenterX = curXthis.data.preCenterY = curY},/**记录移动点，刷新绘制 */bindtouchmove: function (e) {let context = this.data.contextlet preX = this.data.preXlet preY = this.data.preYlet preCenterX = this.data.preCenterXlet preCenterY = this.data.preCenterYlet curX = e.changedTouches[0].xlet curY = e.changedTouches[0].ylet deltaX = Math.abs(preX - curX)let deltaY = Math.abs(preY - curY)// 相差大于3像素的时候作二阶贝塞尔曲线if (deltaX >= 3 || deltaY >= 3) {// 前后两点中心点let centerX = (preX + curX) / 2let centerY = (preY + curY) / 2//这里以前一点作为控制点，中心点作为终点，起始点为上一次的中点，很流畅啊！context.moveTo(preCenterX, preCenterY)context.quadraticCurveTo(preX, preY, centerX, centerY);context.stroke();context.draw(true);this.data.preX = curXthis.data.preY = curYthis.data.preCenterX = centerXthis.data.preCenterY = centerY}},/**清空画布 */clear: function () {let context = this.data.contextcontext.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 的。

属性值多加了 preCenterX 和 preCenterY

这个就很奇怪哦，可能是因为 canvas 的用法不一样，导致使用贝塞尔曲线的时候无法正确的定位到前一点位置，也可能是里面的前一点位置就是 canvas 内移动时一系列点中前一个点的位置，放在就不对，如果按前一篇博客的方式做，出来的就是下面的效果：

这里记得在手指初次落下的时候，初始化这两个值，并在移动后重新赋值。

导出图片方式不一样

这里就是网上一大堆的办法，没什么好说的。

判别是否是PC版本

这里涉及一个判别是否是 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 {//电脑了吧}}})

在使用的地方合理选择正确的手写签名页面就可以，这里建议分别做两个页面，别把功能耦合在一起。

注意事项

真机调试有问题，真机调试 SelectorQuery.exec 方法不执行回调，太坑了。要查看的话使用预览吧，预览是没问题的。
还有就是横竖屏问题，我这设置的横屏实际显示的竖屏，可以在全局设置窗口改变吧，我就不动了。
最后就是样式问题，为什么我的图标不行了？这里注意下 rpx 值的变化，这里是竖屏，在横屏情况下值更大，看起来效果好。

结语

试了下没问题！而且调试器也是电脑版本，很奇怪为什么它可以使用 canvas 2d，而微信PC版本就不可以，开发者论坛很多人反馈也不解决。

end
完美撒花