文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

小程序canvas手写签名适配PC实现示例详解

2023-05-16 15:16

关注

引言

继上一篇的《丝滑流畅的手写签名功能》博文才过去没多久,我才发现 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版本

这里涉及一个判别是否是 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的资料请关注编程网其它相关文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯