daliangzao/customized/pages/made/comb/comb.js

// customized/pages/made/combination/combination.js
import * as util from '../../../../utils/util.js'
Page({

  /**
   * 页面的初始数据
   */
  data: {
    dataPositionObj: { //正面数据
      top: 156,
      left: 286,
      width: 270,
      height: 270
    },
    imgTouch: {
      isActive: "1",
      src: "https://dlz.info666.com//temp/d945bfb0-5cc6-406d-a814-cf63b099041f.jpg",
      x: -82,
      y: 17,
      clientX: 195,
      clientY: 121,
      width: 517,
      height: 208.17866666666666,
      scale: 2.4834437086092715,
      angle: 27
    },
    fontTouch: {
      isActive: "1",
      fontContent: "Gg",
      isColor: "#ffffff",
      x: 10,
      y: 10,
      angle: 0,
      fontSize: 100,
      clientX: 0,
      clientY: 0,
      width: 138.34375,
      height: 132
    },
    rpx: 1,
    obverseImgObject:['', '/customized/images/customized/cup_black_big.png', '/customized/images/customized/cup_black_side.png', '/customized/images/customized/cup_black_handle.png', '/customized/images/customized/cup_black_bottom.png'],
    // obverseImgObject: {
    //   '1': ,
    //   /*正面 */
    //   '2': '/customized/images/customized/cup_black_side.png',
    //   /*侧面面 */
    //   '3': '/customized/images/customized/cup_black_handle.png',
    //   /*手柄 */
    //   '4': '/customized/images/customized/cup_black_bottom.png',
    //   /*底部 */
    // },
    imgSrcArray: [],
    buildSrcArrayText:{
      '1':'正面',
      '2':'侧面',
      '3':'手柄',
      '4':'底部',
    },
    buildSrcArray: [],

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
    // if (wx.getStorageSync('madeCupImgData1')) {
    //   this.setData({
    //     imgTouch: wx.getStorageSync('madeCupImgData1')
    //   })
    // }
    // if (wx.getStorageSync('madeCupFontData1')) {
    //   this.setData({
    //     fontTouch: wx.getStorageSync('madeCupFontData1')
    //   })
    // }


  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {


  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    // this.getCombImg(this);
    // if (this.buildSrcArray.length === 0){
      wx.showLoading({
        title: '图片合成中...'
      })
      let that = this;
      // for (let i = 1; i <= 4; i++) {
      //   if (wx.getStorageSync('madeCupImgData' + i) || wx.getStorageSync('madeCupFontData' + i)) {
      //     console.log(i, "iiiii")
      //     that.getCombImg(that, i);
      //   }
      // }
      if (wx.getStorageSync('madeCupImgData1') || wx.getStorageSync('madeCupFontData1')) {
        that.getCombImg(that, 1);
      } else if (wx.getStorageSync('madeCupImgData2') || wx.getStorageSync('madeCupFontData2')) {
        that.getCombImg(that, 2);
      } else if (wx.getStorageSync('madeCupImgData3') || wx.getStorageSync('madeCupFontData3')) {
        that.getCombImg(that, 3);
      } else if (wx.getStorageSync('madeCupImgData4') || wx.getStorageSync('madeCupFontData4')) {
        that.getCombImg(that, 4);
      } else {
        wx.hideLoading();
      }
    // }
    

  },

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

  },

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

  },

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

  },

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

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },
  getCombImg(that,i) {
    let imgTouch = null, dataPositionObj=null;
    that.setData({ // imgSrcArray 初始化
      imgSrcArray:[],
    })
    console.log(wx.getStorageSync('madeCupImgData' + i),"wx.getStorageSync('madeCupImgData' + i)")
    if(wx.getStorageSync('madeCupImgData' + i)){
      imgTouch = wx.getStorageSync('madeCupImgData'+i);
      dataPositionObj = util.changeCup(i.toString()).dataPositionObj;
      console.log(dataPositionObj,"dataPositionObj")
      wx.getSystemInfo({
        success: function (res) {
          let rpx = res.windowWidth / 750;
          that.setData({
            rpx: rpx
          });
          wx.downloadFile({
            url: imgTouch.src, // 仅为示例，并非真实的资源
            success(res) {
              // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
              console.log(res)
              if (res.statusCode === 200) {
                // canvas截图区域与图片的宽度比例
                let dWidth = dataPositionObj.width / imgTouch.width;
                // canvas截图区域与图片的高度比例
                let dHeight = dataPositionObj.height / imgTouch.height;
                const ctx = wx.createCanvasContext('comb-img'+i);
                //画布中点坐标转移到图片中心
                let movex = imgTouch.x + imgTouch.width * rpx / 2;
                let movey = imgTouch.y + imgTouch.height * rpx / 2;
                ctx.translate(movex, movey);
                ctx.rotate(imgTouch.angle * Math.PI / 180);
                ctx.drawImage(res.tempFilePath, -imgTouch.width * rpx / 2, -imgTouch.height * rpx / 2, imgTouch.width * rpx, imgTouch.height * rpx)
                ctx.draw(false,function () {
                  wx.canvasToTempFilePath({
                    canvasId: 'comb-img'+i,
                    success: function (res) {
                      console.log(res)
                      let imgArray = that.data.imgSrcArray;
                      imgArray.push(res.tempFilePath)
                      that.setData({
                        imgSrcArray: imgArray
                      })
                      that.getCombFont(that,i,true);
                    }
                  }, that)
                })
              }
            }
          })

        },
      })
    } else {
      that.getCombFont(that,i,false);
    }
    
    
    
  },
  getCombFont(that,i,_static) {
    let fontTouch = null, dataPositionObj = null, simulationFont=null;
    if (wx.getStorageSync('madeCupFontData' + i)) {
      fontTouch = wx.getStorageSync('madeCupFontData' + i);
      simulationFont = wx.getStorageSync('simulationFont' + i);
      dataPositionObj = util.changeCup(i.toString()).dataPositionObj;
      const ctx = wx.createCanvasContext('comb-font'+i);
      // ctx.textBaseline = 'top';
      ctx.setFontSize(fontTouch.fontSize);
      ctx.setFillStyle(fontTouch.isColor);
      const metrics = ctx.measureText(fontTouch.fontContent)
      let movex = fontTouch.x + metrics.width / 2;
      let movey = fontTouch.y + simulationFont.height / 2;
      ctx.translate(movex, movey);
      ctx.rotate(fontTouch.angle * Math.PI / 180);
      ctx.fillText(fontTouch.fontContent, -metrics.width / 2, -simulationFont.height / 2 + simulationFont.height / 5 * 4);
      
      console.log(metrics,"文本的宽度")
      ctx.draw(false,function () {
        wx.canvasToTempFilePath({
          canvasId: 'comb-font'+i,
          success: function (res) {
            console.log(res)
            let imgArray = that.data.imgSrcArray;
            imgArray.push(res.tempFilePath)
            that.setData({
              imgSrcArray: imgArray
            })
            console.log(that.data.imgSrcArray, "that.data.imgSrcArray")
            that.getComb(that, that.data.imgSrcArray,i,true)
          }
        }, that)
      })
    } else {
      that.getComb(that, that.data.imgSrcArray, i, _static)
    }
    
  },
  getComb(that, imgSrcArray,i,_static) {
    if(_static){
      let imgTouch = wx.getStorageSync('madeCupImgData' + i);
      let dataPositionObj = util.changeCup(i.toString()).dataPositionObj;
      let canvasBg = that.data.obverseImgObject[i];
      console.log(canvasBg)
      wx.getSystemInfo({
        success: function (res) {
          let rpx = res.windowWidth / 750;
          that.setData({
            rpx: rpx
          });
          const ctx = wx.createCanvasContext('comb-canvas' + i);
          ctx.drawImage(canvasBg, 0, 0, 750 * rpx, 588 * rpx);
          // 设置背景
          ctx.draw(true)
          imgSrcArray.forEach((res) => {
            ctx.drawImage(res, dataPositionObj.left * rpx, dataPositionObj.top * rpx, dataPositionObj.width * rpx, dataPositionObj.height * rpx);
          })
          ctx.draw(true, function () {
            wx.canvasToTempFilePath({
              canvasId: 'comb-canvas' + i,
              success: function (res) {
                console.log(res, "合成成功");
                let buildSrcArray = that.data.buildSrcArray;

                buildSrcArray.push({
                  src:res.tempFilePath,
                  isActive:i,
                  });
                console.log(buildSrcArray, "buildSrcArray")
                that.setData({
                  buildSrcArray: buildSrcArray
                })
                console.log(that.data.buildSrcArray, "buildSrcArray")
                if (i < 4) {
                  i = i + 1
                  that.getCombImg(that, i);
                } else {
                  wx.hideLoading()
                }
              },
              fail: function (err) {
                console.log(err, "合成失败")
                wx.hideLoading();
              }
            }, that)
          })
        },
      })
    } else {
      wx.hideLoading()
    }
    
  }
})