小程序canvas手寫(xiě)簽名適配PC實(shí)現(xiàn)示例詳解

更新時(shí)間：2023年04月18日 16:18:16 作者：方大可

這篇文章主要為大家介紹了小程序canvas手寫(xiě)簽名適配PC實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

引言

繼上一篇的《絲滑流暢的手寫(xiě)簽名功能》博文才過(guò)去沒(méi)多久，我才發(fā)現(xiàn) canvas 2d 無(wú)法在 PC 的小程序中使用，真實(shí)白費(fèi)了我的優(yōu)化了，還好之前的代碼沒(méi)刪掉，原本以為直接簡(jiǎn)單改改就能用，發(fā)現(xiàn)還不是，下面看看吧。

先看看效果圖

鼠標(biāo)用起來(lái)效果不怎么樣，但是還是挺流暢的。

看看代碼

主要就看看 Page.js 的代碼吧，也就這個(gè)不一樣，當(dāng)然 HTML 內(nèi)的 canvas 標(biāo)簽記得加上 canvas-id，把 type = '2d' 給去掉。

// pages/mine/signature/drawCanvas/drawCanvas.js
var app = getApp()
Page({
  data: {
    context: null,
    index: 0,
    height: 0,
    width: 0,
    // 前 一點(diǎn)
    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)
    });
  },
  /**記錄開(kāi)始點(diǎn) */
  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
  },
  /**記錄移動(dòng)點(diǎn)，刷新繪制 */
  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像素的時(shí)候作二階貝塞爾曲線(xiàn)
    if (deltaX >= 3 || deltaY >= 3) {
      // 前后兩點(diǎn)中心點(diǎn)
      let centerX = (preX + curX) / 2
      let centerY = (preY + curY) / 2
      //這里以前一點(diǎn)作為控制點(diǎn)，中心點(diǎn)作為終點(diǎn)，起始點(diǎn)為上一次的中點(diǎn)，很流暢??！
      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
    }
  },
  /**清空畫(huà)布 */
  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)
  },
  /**導(dǎo)出圖片 */
  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
        })
      }
    }))
  },
})

下面仔細(xì)講講不同點(diǎn)

獲取canvas方式不一樣

這里因?yàn)槭褂玫氖桥f版本的 canvas，所以用的還是原來(lái)的方式獲取 canvas 的。

屬性值多加了 preCenterX 和 preCenterY

這個(gè)就很奇怪哦，可能是因?yàn)?canvas 的用法不一樣，導(dǎo)致使用貝塞爾曲線(xiàn)的時(shí)候無(wú)法正確的定位到前一點(diǎn)位置，也可能是里面的前一點(diǎn)位置就是 canvas 內(nèi)移動(dòng)時(shí)一系列點(diǎn)中前一個(gè)點(diǎn)的位置，放在就不對(duì)，如果按前一篇博客的方式做，出來(lái)的就是下面的效果：

這里記得在手指初次落下的時(shí)候，初始化這兩個(gè)值，并在移動(dòng)后重新賦值。

導(dǎo)出圖片方式不一樣

這里就是網(wǎng)上一大堆的辦法，沒(méi)什么好說(shuō)的。

判別是否是PC版本

這里涉及一個(gè)判別是否是 pc 版本的小程序的問(wèn)題，看下面代碼

wx.getSystemInfo({
      success:function(res){
        that.setData({
          systemInfo:res,
        })
        if(res.platform == "devtools"){
            //開(kāi)發(fā)者工具
        }else if(res.platform == "ios"){
            //IOS
        }else if(res.platform == "android"){
            //android
        }else {
        	//電腦了吧
        }
      }
    })

在使用的地方合理選擇正確的手寫(xiě)簽名頁(yè)面就可以，這里建議分別做兩個(gè)頁(yè)面，別把功能耦合在一起。

注意事項(xiàng)

真機(jī)調(diào)試有問(wèn)題，真機(jī)調(diào)試 SelectorQuery.exec 方法不執(zhí)行回調(diào)，太坑了。要查看的話(huà)使用預(yù)覽吧，預(yù)覽是沒(méi)問(wèn)題的。
還有就是橫豎屏問(wèn)題，我這設(shè)置的橫屏實(shí)際顯示的豎屏，可以在全局設(shè)置窗口改變吧，我就不動(dòng)了。
最后就是樣式問(wèn)題，為什么我的圖標(biāo)不行了？這里注意下 rpx 值的變化，這里是豎屏，在橫屏情況下值更大，看起來(lái)效果好。