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

  },

  /**
   * 生命周期函数--监听页面加载
   */
  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 : {},
    })
  },
})