小程序canvas手寫簽名適配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 的。
- 屬性值多加瞭 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版本就不可以，開發者論壇很多人反饋也不解決。
以上就是小程序canvas手寫簽名適配PC實現示例詳解的詳細內容，更多關於小程序canvas手寫簽名適配PC的資料請關註WalkonNet其它相關文章！