496_dongfengqichen_wxsmall/496_dongfengqichen/pages/poster/poster.js

// pages/poster/poster.js
const app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    imgUrl: app.globalData.urlStatic,//图片路径
    canvasContron:null,//canvas
    posterBg:[],//海报背景
    qrCodeUrl:"https://www.jiyou-tech.com/2020/496_qichen/static/images/testQrCode.png",//二维码图片
    userHead: app.globalData.urlStatic + '/images/defaultHead.png',//用户头像
    rankNum: '8908',//缓存数字
    windowScale:0,//屏幕缩放比
    windowW: 0,//屏幕宽度
    windowH: 0,//屏幕高度
    posterUrl:[],//海报图片
    canvasShow: true,//是否渲染canvas
    swiperCurrent: 0,//swiper选中的元素下标
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.data.posterBg.push();
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    this.data.canvasContron = wx.createCanvasContext('myCanvas');
    wx.getSystemInfo({
      success: option => {
        this.data.windowScale = option.windowWidth / 750;
        this.data.windowW = option.windowWidth;
        this.data.windowH = option.windowHeight;
        var countNum = 0;
        wx.getImageInfo({//缓存海报背景
          src: this.data.imgUrl + '/images/tempImg1.jpg',
          success: res => {
            this.data.posterBg.push(res.path);
            countNum+=1;
          }
        })
        wx.getImageInfo({//缓存二维码
          src: this.data.qrCodeUrl,
          success: res => {
            this.data.qrCodeUrl = res.path;
            countNum += 1;
          }
        })
        wx.getImageInfo({//缓存头像
          src: this.data.userHead,
          success: res => {
            this.data.userHead = res.path;
            countNum += 1;
          }
        })
        wx.getImageInfo({//缓存数字背景
          src: this.data.imgUrl + '/images/posterNum.png',
          success: res => {
            this.data.numBg = res.path;
            countNum += 1;
          }
        })
        this.data.rankNum = this.data.rankNum.toString().split("");
        for (let i = 0; i < this.data.rankNum.length; i++) {
          wx.getImageInfo({//缓存数字
            src: this.data.imgUrl + '/images/nums/' + this.data.rankNum[i]+'.png',
            success: res => {
              this.data.rankNum[i] = res.path;
              countNum += 1;
            }
          })
        }
        let setInt = setInterval(() => {
          if (countNum >= 8) {
            this.posterDrawing(1);
            clearInterval(setInt);
          }
        },50);
      }
    })
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

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

  },

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

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    return {
      title: '500元购车券',
      imageUrl: "",
      path: "/pages/coupon/coupon?friendOpenid=" + app.globalData.openid
    }
  },
  saveImg:function(){//保存到手机
    wx.saveImageToPhotosAlbum({
      filePath: this.data.posterUrl[this.data.swiperCurrent],
      success(res) {
        wx.showToast({
          title: '保存成功'
        })
       }
    })
  },
  posterDrawing: function (e) {//海报绘制
    var ctx = this.data.canvasContron;//canvas对象
    var scale = this.data.windowScale;//屏幕缩放比
    //背景
    ctx.drawImage(this.data.posterBg[e-1], 0, 0, scale * 444, scale * 817);//
    ctx.setFillStyle("#FFFFFF");
    ctx.save();
    ctx.beginPath(); //开始绘制
    //先画个圆   前两个参数确定了圆心 （x,y） 坐标  第三个参数是圆的半径  四参数是绘图方向  默认是false，即顺时针
    ctx.arc(scale * 48 / 2 + scale * 49, scale * 48 / 2 + scale * 538, scale * 48 / 2, 0, Math.PI * 2, false);
    ctx.clip(); //剪切
    ctx.drawImage(this.data.userHead, scale * 49, scale * 538, scale * 48, scale * 48); //头像
    ctx.restore(); //恢复之前保存的绘图上下文
    //名称
    ctx.setFontSize(scale * 28);
    ctx.setFillStyle('#FFFFFF');
    ctx.setTextAlign('left');
    ctx.fillText("啦啦啦", scale * 102, scale *572);
    //我是第XXX星探
    ctx.drawImage(this.data.numBg, scale * 50, scale * 598, scale * 333, scale * 74);
    //排名数字
    ctx.drawImage(this.data.rankNum[0], scale * 168, scale * 602, scale * 32, scale * 40);
    ctx.drawImage(this.data.rankNum[1], scale * 202, scale * 602, scale * 32, scale * 40);
    ctx.drawImage(this.data.rankNum[2], scale * 236, scale * 602, scale * 32, scale * 40);
    ctx.drawImage(this.data.rankNum[3], scale * 270, scale * 602, scale * 32, scale * 40);
    //二维码
    ctx.drawImage(this.data.qrCodeUrl, scale * 282, scale * 672, scale * 105, scale* 106);
    //绘制
    ctx.draw(false, setTimeout(() => {
      wx.canvasToTempFilePath({
        width:scale*444,
        height: scale * 817,
        canvasId: 'myCanvas',
        success: res => {
          this.data.posterUrl.push(res.tempFilePath);
          this.setData({
            posterUrl: this.data.posterUrl
          })
          if (e < 3) {
            wx.getImageInfo({
              src: this.data.imgUrl + '/images/tempImg'+(e+1)+'.jpg',
              success: res => {
                this.data.posterBg.push(res.path);
                this.posterDrawing(e + 1);
              }
            })
          }else{
            this.setData({
              canvasShow:false
            })
          }
        }
      })
    }, 300));
  },
  savePoster:function(){//预览海报
    wx.previewImage({
      current: this.data.posterUrl[this.data.swiperCurrent],
      urls: this.data.posterUrl // 需要预览的图片http链接列表
    })
  },
  prevImg() {//上一张图片
    if (this.data.swiperCurrent > 0) {
      this.setData({
        swiperCurrent: this.data.swiperCurrent -= 1,
      })
    }
  },
  nextImg() {//下一张图片
    if (this.data.swiperCurrent < this.data.posterUrl.length - 1) {
      this.setData({
        swiperCurrent: this.data.swiperCurrent += 1,
      })
    }
  },
  swiperChange(e) {//通过鼠标滑动改变swiper时
    if (e.detail.source == "touch") {
      this.setData({
        swiperCurrent: e.detail.current,
      })
    }
  }
})