daliangzao/customized/pages/made/made.js

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

  /**
   * 页面的初始数据
   */
  data: {
    dataPositionObj:{ //正面数据
      top:'156rpx',
      left:'286rpx',
      width:'',
      height:''
    },
    propSize:{
      top:'8cm',
      right:'8cm',
      bottom: '8cm',
      left:'8cm',
    },
    isActive: '1', // 默认是正面
    obverseImgObject:{
      '1': '/customized/images/customized/cup_black_big.png',/*正面 */
      '2': '/customized/images/customized/cup_black_side.png',/*侧面面 */
      '3': '/customized/images/customized/cup_black_handle.png',/*手柄 */
      '4': '/customized/images/customized/cup_black_bottom.png',/*底部 */
    },
    fontColor: ['#000', '#fff', '#e70012', '#ff8500', '#fff100', '#22ad38', '#00b7f0','#920784'],
    // obverseImg: '/images/customized/cup_black_big.png',/*正面 */
    imgTouch:{}, // 图片的对象,分为正面，侧面，手柄，底部
    fontTouch: {}, //文字的对象，分为正面，侧面，手柄，底部
    imgAnimationData:{}, // 图片的旋转
    fontAnimationData: {}, // 文字的旋转
    touchStatic:true,
    fontContent:'可定制区域',
    rpx:1, // 获取页面的rpx
    imgSrcArray: [],
    imgBuildArray:[], // 生成后图片的数组
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let that = this;
    wx.getSystemInfo({
      success: function (res) {
        let rpx = res.windowWidth / 750;
        that.setData({
          rpx: rpx
        });
        console.log(rpx, 'rpx')
      },
    })
    if('id' in options){
      this.setData({
        isActive: options.id
      })
    }
   
    
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    let that = this;
    // console.log('页面开始准备中'
    that.imgAnimation = wx.createAnimation({
      timingFunction: 'step-start', // "linear","ease","ease-in","ease-in-out","ease-out","step-start","step-end"
    })
    that.fontAnimation = wx.createAnimation({
      timingFunction: 'step-start', // "linear","ease","ease-in","ease-in-out","ease-out","step-start","step-end"
    })
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    console.log('onshow')
    let that = this;
    let cupNum = util.changeCup(that.data.isActive);
    that.setData({
      dataPositionObj: cupNum.dataPositionObj,
      propSize: cupNum.propSize
    })
    that.getDataTouch(that)
  },

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

  },

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

  },

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

  },

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

  },

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

  },
  // changeCupImg(index){
  //   console.log(this.data.imgTouch,"this.data.imgTouch")
  //   let rpx = this.data.rpx;
  //   let canvasBg = this.data.obverseImgObject[index];
  //   const ctx = wx.createCanvasContext('madeContent');
  //   ctx.drawImage(canvasBg, 0, 0, 750 * rpx, 588 * rpx)
  //   ctx.draw()
  // },
  changeCup(e){
    // data-id== 1正面，2背面，3手柄，4杯底
    // this.changeCupImg(e.currentTarget.dataset.id);
    let that = this;
    let cupNum = util.changeCup(e.currentTarget.dataset.id)
    that.setData({
      isActive: e.currentTarget.dataset.id,
      dataPositionObj: cupNum.dataPositionObj,
      propSize: cupNum.propSize
    })
    that.getDataTouch(that)
    
  },
  addImgRouter(){
    console.log('添加图片');
    wx.navigateTo({
      url: '/customized/pages/made/madeImg/madeImg?id=' + this.data.isActive,
    })
  },
  addFontRouter() {
    console.log('添加文字');
    wx.navigateTo({
      url: '/customized/pages/made/madeFont/madeFont?id=' + this.data.isActive,
    })
  },
  getDataTouch(that){
    let madeTouchImg = wx.getStorageSync('madeCupImgData' + that.data.isActive)
    let madeTouchFont = wx.getStorageSync('madeCupFontData' + that.data.isActive)
    console.log(madeTouchImg, madeTouchFont,"madeTouchFontmadeTouchFont")
    if (madeTouchImg || madeTouchFont){
      that.setData({
        touchStatic: false
      })
      if (madeTouchImg){
        that.imgAnimation.rotate(madeTouchImg.angle).step();
        that.setData({
          imgAnimationData: that.imgAnimation.export(),
        })
      }
      if (madeTouchFont){
        that.fontAnimation.rotate(madeTouchFont.angle).step();
        that.setData({
          fontAnimationData: that.fontAnimation.export(),
        })
      }

      
    }else {
      that.setData({
        touchStatic: true
      })
    }
  
    that.setData({
      imgTouch: madeTouchImg ? madeTouchImg : {}, //存储图片数据
      fontTouch: madeTouchFont ? madeTouchFont : {},
    })
  },
  finishDesign(){ // 完成设计
  let that = this;
    let designObj = {
      '1':'正面',
      '2': '背面',
      '3': '手柄',
      '4': '杯底',
    },designVal = '',madeStatic = false;
    for(let i=1;i<5;i++){
      if (!wx.getStorageSync('madeCupImgData'+ i) && !wx.getStorageSync('madeCupFontData'+ i)){
        designVal += designObj[i]+','
      } else {
        madeStatic = true; // 表示已经有设计过的页面
      }
    }
    if (madeStatic){
      if (!designVal) {
        console.log('可以完成')
        wx.navigateTo({
          url: '/customized/pages/made/combination/combination',
        })
      } else {
        wx.showModal({
          title: '温馨提示',
          content: '您的' + designVal.substring(0, designVal.length - 1) + '还没有设计，是否确定不设计了？',
          success: function (res) {
            if (res.confirm) {
              console.log('用户点击确定,不设计了，直接完成')
              wx.showToast({
                title: '图片合成中...',
                icon:'loading'
              })
              that.getBuildImg(that)
              // wx.navigateTo({
              //   url: '/customized/pages/made/combination/combination',
              // })
            } else {
              console.log('用户点击取消')
            }
          }
        })
      }
    } else {
      wx.showToast({
        title: '您还没有设计',
        icon: 'none'
      })
    }
  },
  getBuildImg(that){
    for(let i =1; i<=4;i++){
      if (wx.getStorageSync('madeCupImgData'+i)) {
        this.setData({
          imgTouch: wx.getStorageSync('madeCupImgData'+i)
        })
      }
      if (wx.getStorageSync('madeCupFontData'+i)) {
        this.setData({
          fontTouch: wx.getStorageSync('madeCupFontData'+i)
        })
      }
      that.getCombImg(that);
      console.log(i)
    }
    console.log(that.data.imgBuildArray,"that.data.imgBuildArray")
    
  },
  // 合成canvas的js
  getCombImg(that) {
    let imgTouch = that.data.imgTouch;
    let dataPositionObj = that.data.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');
              //画布中点坐标转移到图片中心
              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(true, function () {
                wx.canvasToTempFilePath({
                  canvasId: 'comb-img',
                  success: function (res) {
                    console.log(res)
                    let imgArray = that.data.imgSrcArray;
                    imgArray.push(res.tempFilePath)
                    that.setData({
                      imgSrcArray: imgArray
                    })
                    that.getCombFont(that);
                  }
                }, that)
              })
            }
          }
        })

      },
    })
  },
  getCombFont(that) {
    let fontTouch = that.data.fontTouch;
    let dataPositionObj = that.data.dataPositionObj;
    const ctx = wx.createCanvasContext('comb-font');

    let movex = fontTouch.x + fontTouch.width / 2;
    let movey = fontTouch.y + fontTouch.height / 2;
    // ctx.translate(movex, movey);
    // ctx.rotate(fontTouch.angle * Math.PI / 180);

    ctx.setFontSize(fontTouch.fontSize);
    ctx.setFillStyle(fontTouch.isColor);
    ctx.fillText(fontTouch.fontContent, fontTouch.x, fontTouch.y + fontTouch.height / 5 * 4);
    // ctx.fillText(fontTouch.fontContent, -fontTouch.width / 2, fontTouch.height / 10 * 3);
    ctx.draw(true, function () {
      wx.canvasToTempFilePath({
        canvasId: 'comb-font',
        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)
        }
      }, that)
    })
  },
  getComb(that, imgSrcArray) {
    let imgTouch = that.data.imgTouch;
    let dataPositionObj = that.data.dataPositionObj;
    wx.getSystemInfo({
      success: function (res) {
        let rpx = res.windowWidth / 750;
        that.setData({
          rpx: rpx
        });
        let canvasBg = that.data.obverseImgObject[1];
        const ctx = wx.createCanvasContext('comb-canvas');
        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',
            success: function (res) {
              console.log(res,"最后的合成")
              let imgBuildArray = that.data.imgBuildArray;
              imgBuildArray.push(res.tempFilePath)
              that.setData({
                imgSrcArray: [],// 重置
                imgBuildArray: imgBuildArray
              })
            }
          }, that)
        });
        
      },
    })
  }
})