// pages/shared/shared.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    shared_img: ''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      shared_img: decodeURIComponent(options.img_url)
    })
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  onReady() {
    const query = wx.createSelectorQuery()
    query.select('.canvas').boundingClientRect().exec(res => {
      this.canvas_width = res[0].width
      this.canvas_height = res[0].height
      this.drawImage()
    })
  },
  drawImage() {
    this.context = wx.createCanvasContext('content')
    this.context.lineJoin = 'miter'
    this.context.font = '15px bold'
    const dpr = wx.getSystemInfoSync().pixelRatio
    console.log(dpr)
    wx.downloadFile({
      url: this.data.shared_img + '?x-oss-process=image/resize,m_fill,h_510,w_510',
      success: res => {
        const img_width = this.canvas_width * 0.8644, img_height = this.canvas_width * 0.8644
        const left = (this.canvas_width - img_width) / 2
        // 画圆弧矩形
        this.strokeRoundRect((this.canvas_width - img_width) / 2, (this.canvas_width - img_width) / 2, img_width, img_height, 4)
        this.context.clip()
        this.context.drawImage(res.tempFilePath, 0, 0, img_width, img_height)
        this.context.restore()
        this.context.fillText('格力新天地 3室2厅', left, img_width + left + this.canvas_height * 15 / 460 + 21)
        this.context.restore()
        this.context.font = '13px bold'
        this.context.fillStyle = '#79868F'
        this.context.fillText('我的个性推荐语', left, img_width + left + this.canvas_height * 15 / 460 + 18 + 21)
        this.context.font = '12px bold'
        this.context.fillStyle = '#000'
        this.context.fillText('3D实景拍摄', left + 80, img_width + left + this.canvas_height * 92 / 460 + 20)
        this.context.fillText('语音与带看，专人在线答疑', left + 80, img_width + left + this.canvas_height * 92 / 460 + 40)
        this.context.fillText('长按识别二维码进入房源', left + 80, img_width + left + this.canvas_height * 140 / 460 + 17)
        
        this.context.draw()
        this.context.fill()
        this.context.restore()
      },
      fail: err => {
        console.log(err)
      }
    })
  },
  strokeRoundRect(x, y, width, height, radius, /*optional*/ lineWidth, /*optional*/ strokeColor) {
    //圆的直径必然要小于矩形的宽高          
    if (2 * radius > width || 2 * radius > height) {
      return false;
    }

    this.context.save();
    this.context.translate(x, y);
    //绘制圆角矩形的各个边  
    this.drawRoundRectPath(width, height, radius);
    this.context.lineWidth = 0; //若是给定了值就用给定的值否则给予默认值2  
    this.context.strokeStyle = strokeColor || "#fff";
    this.context.stroke();
    
  },
  drawRoundRectPath(width, height, radius) {
    this.context.beginPath(0);
    //从右下角顺时针绘制，弧度从0到1/2PI  
    this.context.arc(width - radius, height - radius, radius, 0, Math.PI / 2);

    //矩形下边线  
    this.context.lineTo(radius, height);

    //左下角圆弧，弧度从1/2PI到PI  
    this.context.arc(radius, height - radius, radius, Math.PI / 2, Math.PI);

    //矩形左边线  
    this.context.lineTo(0, radius);

    //左上角圆弧，弧度从PI到3/2PI  
    this.context.arc(radius, radius, radius, Math.PI, Math.PI * 3 / 2);

    //上边线  
    this.context.lineTo(width - radius, 0);

    //右上角圆弧  
    this.context.arc(width - radius, radius, radius, Math.PI * 3 / 2, Math.PI * 2);

    //右边线  
    this.context.lineTo(width, height - radius);
    this.context.closePath();
  }
})