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
    qrCodeUrl:"https://www.jiyou-tech.com/2020/496_qichen/static/images/testQrCode.png",
    windowScale:0,//屏幕缩放比
    windowW: 0,//屏幕宽度
    windowH: 0,//屏幕高度
    posterUrl:[],//海报图片
    canvasShow: true,//是否渲染canvas
    swiperCurrent: 0,//swiper选中的元素下标
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    this.data.canvasContron = wx.createCanvasContext('myCanvas');
    wx.getSystemInfo({
      success: res => {
        this.data.windowScale = res.windowWidth / 750;
        this.data.windowW = res.windowWidth;
        this.data.windowH = res.windowHeight;
        this.posterDrawing(1);
      }
    })
  },

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

  },

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

  },

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

  },

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

  },

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

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    return {
      title: '500元购车券',
      imageUrl: "",
      path: "/pages/coupon/coupon"
    }
  },
  saveImg:function(){//保存到手机
    wx.saveFile({
      tempFilePath: this.data.posterUrl[this.data.swiperCurrent],
      success(res) {
        if (res.errMsg== "saveFile:ok"){
          wx.showToast({
            title: '保存成功'
          })
        }
      }
    })
  },
  posterDrawing: function (e) {//海报绘制
    var ctx = this.data.canvasContron;//canvas对象
    var scale = this.data.windowScale;//屏幕缩放比
    //背景
    ctx.drawImage(this.data.imgUrl + '/images/tempImg'+e+'.jpg', 0, 0, scale * 444, scale * 817);//defaultHead
    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.imgUrl + '/images/coupon.png', 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.imgUrl + '/images/posterNum.png', scale * 50, scale * 598, scale * 333, scale * 74);
    //排名数字
    ctx.drawImage(this.data.imgUrl + '/images/nums/8.png', scale * 168, scale * 602, scale * 32, scale * 40);
    ctx.drawImage(this.data.imgUrl + '/images/nums/9.png', scale * 202, scale * 602, scale * 32, scale * 40);
    ctx.drawImage(this.data.imgUrl + '/images/nums/0.png', scale * 236, scale * 602, scale * 32, scale * 40);
    ctx.drawImage(this.data.imgUrl + '/images/nums/8.png', 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({
        canvasId: 'myCanvas',
        success: res => {
          this.data.posterUrl.push(res.tempFilePath);
          this.setData({
            posterUrl: this.data.posterUrl
          })
          if (e < 3) {
            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,
      })
    }
  }
})