Page({
  data:{
    pen : 3, //畫筆粗細默認值
    color : '#cc0033' //畫筆顏色默認值
  },
  startX: 0, //保存X坐標軸變量
  startY: 0, //保存Y坐標軸變量
  isClear : false, //是否啟用橡皮擦標記
  //手指觸摸動作開始
  touchStart: function (e) {
      //得到觸摸點的坐標
      this.startX = e.changedTouches[0].x
      this.startY = e.changedTouches[0].y
      this.context = wx.createContext()
 
      if(this.isClear){ //判斷是否啟用的橡皮擦功能  ture表示清除  false表示畫畫
         this.context.setStrokeStyle('#FFFFFF') //設置線條樣式 此處設置為畫布的背景顏色  橡皮擦原理就是：利用擦過的地方被填充為畫布的背景顏色一致 從而達到橡皮擦的效果 
         this.context.setLineCap('round') //設置線條端點的樣式
         this.context.setLineJoin('round') //設置兩線相交處的樣式
         this.context.setLineWidth(20) //設置線條寬度
         this.context.save();  //保存當前坐標軸的縮放、旋轉、平移信息
         this.context.beginPath() //開始一個路徑 
         this.context.arc(this.startX,this.startY,5,0,2*Math.PI,true);  //添加一個弧形路徑到當前路徑，順時針繪制  這里總共畫了360度  也就是一個圓形 
         this.context.fill();  //對當前路徑進行填充
         this.context.restore();  //恢復之前保存過的坐標軸的縮放、旋轉、平移信息
      }else{
         this.context.setStrokeStyle(this.data.color)
         this.context.setLineWidth(this.data.pen)
         this.context.setLineCap('round') // 讓線條圓潤 
         this.context.beginPath()
         
      }
  },
  //手指觸摸后移動
  touchMove: function (e) {
       
      var startX1 = e.changedTouches[0].x
      var startY1 = e.changedTouches[0].y
 
      if(this.isClear){ //判斷是否啟用的橡皮擦功能  ture表示清除  false表示畫畫
 
        this.context.save();  //保存當前坐標軸的縮放、旋轉、平移信息
        this.context.moveTo(this.startX,this.startY);  //把路徑移動到畫布中的指定點，但不創建線條
        this.context.lineTo(startX1,startY1);  //添加一個新點，然后在畫布中創建從該點到最后指定點的線條
        this.context.stroke();  //對當前路徑進行描邊
        this.context.restore()  //恢復之前保存過的坐標軸的縮放、旋轉、平移信息
           
        this.startX = startX1;
        this.startY = startY1;
        
      }else{
        this.context.moveTo(this.startX, this.startY)
        this.context.lineTo(startX1, startY1)
        this.context.stroke()
 
        this.startX = startX1;
        this.startY = startY1;
         
      }
      //只是一個記錄方法調用的容器，用于生成記錄繪制行為的actions數組。context跟不存在對應關系，一個context生成畫布的繪制動作數組可以應用于多個
      wx.drawCanvas({
         canvasId: 'myCanvas',
         reserve: true,
         actions: this.context.getActions() // 獲取繪圖動作數組
      })
  },
  //手指觸摸動作結束
  touchEnd: function () {
       
  },
  //啟動橡皮擦方法
  clearCanvas: function(){
      if(this.isClear){
        this.isClear = false;
      }else{
        this.isClear = true;
      }
  },
  penSelect: function(e){ //更改畫筆大小的方法
    console.log(e.currentTarget);
    this.setData({pen:parseInt(e.currentTarget.dataset.param)});
    this.isClear = false;
  },
  colorSelect: function(e){ //更改畫筆顏色的方法
    console.log(e.currentTarget);
    this.setData({color:e.currentTarget.dataset.param});
    this.isClear = false;
  },
  // 下拉刷新
  onPullDownRefresh: function(){
    wx.stopPullDownRefresh()
  },
  // 頁面分享
  onShareAppMessage: function () {
    return {
      title: '微信小程序',
      desc: '這是微信小程序的分享功能',
      path: '/page/canvas'
    }
  }
})