PatrolPipelineNetwork_zdsz/pages/qianming/qianming.js

var content = null;
var touchs = [];
var canvasw = 0;
var canvash = 0;
var that = null;
const app = getApp()
Page({
  /**
   * 页面的初始数据
   */
  data: {
    host: app.globalData.host,
    index: 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.index = options.index
    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)
        let page = getCurrentPages();
        let prevPage = page[page.length - 2];
        //获取全局唯一的文件管理器 
        wx.getFileSystemManager().readFile({ //读取本地文件内容
          filePath: path, // 文件路径
          encoding: 'base64', // 返回格式
          success: res => {
            prevPage.setData({
              index: that.data.index,
              qianming: path,
              qianmingBase64: res.data,
            });
            //返回页面
            wx.navigateBack()
          }
        });
      }
    })
  },


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

})