PatrolPipelineNetwork_zdsz/pages/qianming/qianming.js

var content = null;
var touchs = [];
var canvasw = 0;
var canvash = 0;
var that = null;

Page({
  /**
   * 页面的初始数据
   */
  data: {
    logId : null
  },
  // 画布的触摸移动开始手势响应
  start: function (event) {
    // console.log("触摸开始" + event.changedTouches[0].y)
    // console.log("触摸开始" + event.changedTouches[0].x)
    //获取触摸开始的 x,y
    let point = {
      x: event.changedTouches[0].y,
      y: event.changedTouches[0].x
    }
    touchs.push(point)
  },

  // 画布的触摸移动手势响应
  move: function (e) {
    let point = {
      x: e.touches[0].y,
      y: e.touches[0].x
    }
    touchs.push(point)
    if (touchs.length >= 2) {
      this.draw(touchs)
    }
  },

  // 画布的触摸移动结束手势响应
  end: function (e) {
    // console.log("触摸结束" + e)
    //清空轨迹数组
    for (let i = 0; i < touchs.length; i++) {
      touchs.pop()
    }

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.data.logId = options.logId
    that = this
    //获得Canvas的上下文
    content = wx.createCanvasContext('firstCanvas')
    //设置线的颜色
    content.setStrokeStyle("#000")
    //设置线的宽度
    content.setLineWidth(5)
    //设置线两端端点样式更加圆润
    content.setLineCap('round')
    //设置两条线连接处更加圆润
    content.setLineJoin('round')
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

    // 获取画布尺寸
    var query = wx.createSelectorQuery()
    query.select('#canvas').boundingClientRect()
    query.exec(function (res) {
      canvasw = res[0].width;
      canvash = res[0].height
    })
  },

  //绘制
  draw: function (touchs) {
    let point1 = touchs[0]
    let point2 = touchs[1]
    touchs.shift()
    content.moveTo(point1.y, point1.x)
    content.lineTo(point2.y, point2.x)
    content.stroke()
    content.draw(true)
  },
  //清除操作
  clearClick: function () {
    //清除画布
    content.clearRect(0, 0, canvasw, canvash)
    content.draw(true)
  },
  //保存图片
  saveClick: function () {
    var that = this
    wx.canvasToTempFilePath({
      canvasId: 'firstCanvas',
      success: function (res) {
        //打印图片路径
        var path = res.tempFilePath
        //上传图片
        that.uploadSignPic(path)
        console.log(path)
      }
    })
  },


  /**
   * 上传签名图片
   */
  uploadSignPic: function (path) {
    //具体实现的业务逻辑
  }

})