daliangzao/customized/pages/made/made.js

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

  /**
   * 页面的初始数据
   */
  data: {
    dataPositionObj: { //正面数据
      top: 156,
      left: 286,
      width: 270,
      height: 270,
    },
    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: [], // 生成后图片的数组
    simulation:{ // 模拟字体，获取字体的宽高
      fontContent:'',
      fontSize:'',
      height:'',
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  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(),
        })
        that.setData({
          'simulation.fontContent': madeTouchFont.fontContent,
          'simulation.fontSize': madeTouchFont.fontSize
        })
        that.getTouchFontInformation(that)
      }


    } 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',
          url: '/customized/pages/made/comb/comb'
        })
      } 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',
                url:'/customized/pages/made/comb/comb'
              })
            } else {
              console.log('用户点击取消')
            }
          }
        })
      }
    } else {
      wx.showToast({
        title: '您还没有设计',
        icon: 'none'
      })
    }
  },
  getTouchFontInformation(that) {
    let query = wx.createSelectorQuery();
    query.select('#simulation').boundingClientRect()
    query.exec(function (res) {
      console.log(res, "获取font的宽高");
      that.setData({
        'simulation.height': res[0].height
      });
      wx.setStorageSync('simulationFont' + that.data.isActive, that.data.simulation);
    })
  },
  // getBuildImg(that) {
  //   for (let i = 1; i <= 1; i++) {
  //     if (wx.getStorageSync('madeCupImgData' + i) || wx.getStorageSync('madeCupFontData' + 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)
  //   }


  // },
  // 合成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) {
  //   console.log('开始最后的合成')
  //   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);
  //       })
  //       console.log('渲染完成');
  //       ctx.draw(true);
  //       // 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
  //       //       })
  //       //       console.log(that.data.imgBuildArray, "that.data.imgBuildArray")
  //       //     }
  //       //   }, that)
  //       // })

  //     },
  //   })
  // }
})