小程序Canvas画布在线签名

效果图如下:
在这里插入图片描述

画布视频演示点我

部分代码如下

// 笔迹开始
  uploadScaleStart(e) {
    if (e.type != 'touchstart') return false;
    let ctx = this.data.ctx;
    ctx.setFillStyle(this.data.lineColor); // 初始线条设置颜色
    ctx.setGlobalAlpha(this.data.transparent); // 设置半透明
    let currentPoint = {
      x: e.touches[0].x,
      y: e.touches[0].y
    }
    let currentLine = this.data.currentLine;
    currentLine.unshift({
      time: new Date().getTime(),
      dis: 0,
      x: currentPoint.x,
      y: currentPoint.y
    })
    this.setData({
      currentPoint,
      // currentLine
    })
    if (this.data.firstTouch) {
      this.setData({
        cutArea: {
          top: currentPoint.y,
          right: currentPoint.x,
          bottom: currentPoint.y,
          left: currentPoint.x
        },
        firstTouch: false
      })
    }
    this.pointToLine(currentLine);
  },
  // 笔迹移动
  uploadScaleMove(e) {
    if (e.type != 'touchmove') return false;
    if (e.cancelable) {
      // 判断默认行为是否已经被禁用
      if (!e.defaultPrevented) {
        e.preventDefault();
      }
    }
    let point = {
      x: e.touches[0].x,
      y: e.touches[0].y
    }

    //测试裁剪
    if (point.y < this.data.cutArea.top) {
      this.data.cutArea.top = point.y;
    }
    if (point.y < 0) this.data.cutArea.top = 0;

    if (point.x > this.data.cutArea.right) {
      this.data.cutArea.right = point.x;
    }
    if (this.data.canvasWidth - point.x <= 0) {
      this.data.cutArea.right = this.data.canvasWidth;
    }
    if (point.y > this.data.cutArea.bottom) {
      this.data.cutArea.bottom = point.y;
    }
    if (this.data.canvasHeight - point.y <= 0) {
      this.data.cutArea.bottom = this.data.canvasHeight;
    }
    if (point.x < this.data.cutArea.left) {
      this.data.cutArea.left = point.x;
    }
    if (point.x < 0) this.data.cutArea.left = 0;

    this.setData({
      lastPoint: this.data.currentPoint,
      currentPoint: point
    })
    let currentLine = this.data.currentLine
    currentLine.unshift({
      time: new Date().getTime(),
      dis: this.distance(this.data.currentPoint, this.data.lastPoint),
      x: point.x,
      y: point.y
    })
    // this.setData({
    //   currentLine
    // })
    this.pointToLine(currentLine);
  },
  // 笔迹结束
  uploadScaleEnd(e) {
    if (e.type != 'touchend') return 0;
    let point = {
      x: e.changedTouches[0].x,
      y: e.changedTouches[0].y
    }
    this.setData({
      lastPoint: this.data.currentPoint,
      currentPoint: point
    })
    let currentLine = this.data.currentLine
    currentLine.unshift({
      time: new Date().getTime(),
      dis: this.distance(this.data.currentPoint, this.data.lastPoint),
      x: point.x,
      y: point.y
    })
    if (currentLine.length > 2) {
      var info = (currentLine[0].time - currentLine[currentLine.length - 1].time) / currentLine.length;
      //$("#info").text(info.toFixed(2));
    }
    //一笔结束,保存笔迹的坐标点,清空,当前笔迹
    //增加判断是否在手写区域;
    this.pointToLine(currentLine);
    var currentChirography = {
      lineSize: this.data.lineSize,
      lineColor: this.data.lineColor
    };
    var chirography = this.data.chirography
    chirography.unshift(currentChirography);
    this.setData({
      chirography
    })
    var linePrack = this.data.linePrack
    linePrack.unshift(this.data.currentLine);
    this.setData({
      linePrack,
      currentLine: []
    })
  },

欢迎共同研究探讨(wx)
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在小程序中实现电子签名,可以使用小程序的 `canvas` 组件。 首先,在页面的 `wxml` 文件中添加 `canvas` 组件: ```html <canvas id="canvas" class="canvas"></canvas> ``` 然后,在页面的 `js` 文件中,获取 `canvas` 组件的上下文: ```javascript Page({ onLoad: function () { const ctx = wx.createCanvasContext('canvas'); } }) ``` 接下来,监听用户手指在 `canvas` 上的滑动事件,并将滑动轨迹绘制到 `canvas` 上: ```javascript Page({ data: { startX: 0, startY: 0, endX: 0, endY: 0 }, onLoad: function () { const ctx = wx.createCanvasContext('canvas'); ctx.setStrokeStyle('#000000'); ctx.setLineWidth(5); ctx.setLineCap('round'); ctx.setLineJoin('round'); ctx.beginPath(); ctx.draw(); }, onTouchStart: function (e) { this.setData({ startX: e.changedTouches[0].x, startY: e.changedTouches[0].y }); }, onTouchMove: function (e) { const ctx = wx.createCanvasContext('canvas'); this.setData({ endX: e.changedTouches[0].x, endY: e.changedTouches[0].y }); ctx.moveTo(this.data.startX, this.data.startY); ctx.lineTo(this.data.endX, this.data.endY); ctx.stroke(); ctx.draw(true); this.setData({ startX: this.data.endX, startY: this.data.endY }); } }) ``` 最后,将 `canvas` 组件保存为图片,并将图片保存到本地: ```javascript Page({ data: { imageSrc: '' }, onSave: function () { const ctx = wx.createCanvasContext('canvas'); wx.canvasToTempFilePath({ canvasId: 'canvas', success: (res) => { this.setData({ imageSrc: res.tempFilePath }); wx.saveImageToPhotosAlbum({ filePath: this.data.imageSrc, success: (res) => { wx.showToast({ title: '保存成功', icon: 'success', duration: 2000 }); }, fail: (err) => { wx.showToast({ title: '保存失败', icon: 'none', duration: 2000 }); } }); }, fail: (err) => { wx.showToast({ title: '保存失败', icon: 'none', duration: 2000 }); } }); } }) ``` 完整代码示例: ```html <view class="container"> <canvas id="canvas" class="canvas" bindtouchstart="onTouchStart" bindtouchmove="onTouchMove"></canvas> <view class="btn-group"> <button class="btn" bindtap="onSave">保存签名</button> </view> </view> ``` ```javascript Page({ data: { startX: 0, startY: 0, endX: 0, endY: 0, imageSrc: '' }, onLoad: function () { const ctx = wx.createCanvasContext('canvas'); ctx.setStrokeStyle('#000000'); ctx.setLineWidth(5); ctx.setLineCap('round'); ctx.setLineJoin('round'); ctx.beginPath(); ctx.draw(); }, onTouchStart: function (e) { this.setData({ startX: e.changedTouches[0].x, startY: e.changedTouches[0].y }); }, onTouchMove: function (e) { const ctx = wx.createCanvasContext('canvas'); this.setData({ endX: e.changedTouches[0].x, endY: e.changedTouches[0].y }); ctx.moveTo(this.data.startX, this.data.startY); ctx.lineTo(this.data.endX, this.data.endY); ctx.stroke(); ctx.draw(true); this.setData({ startX: this.data.endX, startY: this.data.endY }); }, onSave: function () { const ctx = wx.createCanvasContext('canvas'); wx.canvasToTempFilePath({ canvasId: 'canvas', success: (res) => { this.setData({ imageSrc: res.tempFilePath }); wx.saveImageToPhotosAlbum({ filePath: this.data.imageSrc, success: (res) => { wx.showToast({ title: '保存成功', icon: 'success', duration: 2000 }); }, fail: (err) => { wx.showToast({ title: '保存失败', icon: 'none', duration: 2000 }); } }); }, fail: (err) => { wx.showToast({ title: '保存失败', icon: 'none', duration: 2000 }); } }); } }) ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值