daliangzao/customized/pages/made/made.js

// pages/customized/made/made.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',/*正面 */
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.changeCupImg(this.data.isActive);
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    // console.log('页面开始准备中')
    
  
    const ctx = wx.createCanvasContext('madeBox');
    // Canvas.SetLeft(ctx, '10rpx'); 
  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },
  changeCupImg(index){
    let canvasBg = this.data.obverseImgObject[index];
    wx.getSystemInfo({
      success: function (res) {
        let rpx = res.windowWidth / 750;
        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 dataPositionObj = null, propSize=null;
    switch (e.currentTarget.dataset.id){
      case '1':
      // console.log('正面')
        dataPositionObj = { // 正面数据
          top: '156rpx',
          left: '286rpx',
          width: '',
          height: ''
        };
        propSize={
          top: '8cm',
          right: '8cm',
          bottom: '8cm',
          left: '8cm',
        };
      break;
      case '2':
        dataPositionObj = { // 正面数据
          top: '156rpx',
          left: '180rpx',
          width: '',
          height: ''
        };
        propSize = {
          top: '8cm',
          right: '8cm',
          bottom: '8cm',
          left: '8cm',
        };
      // console.log('背面');
      break;
      case '3':
        dataPositionObj = { // 正面数据
          top: '150rpx',
          left: '348rpx',
          width: '70rpx',
          height: '268rpx'
        };
        propSize = {
          top: '1cm',
          right: '6cm',
          bottom: '1cm',
          left: '6cm',
        };
      // console.log('手柄');
      break;
      case '4':
        dataPositionObj = { // 正面数据
          top: '160rpx',
          left: '190rpx',
          width: '265rpx',
          height: '265rpx'
        };
        propSize = {
          top: '6cm',
          right: '6cm',
          bottom: '6cm',
          left: '6cm',
        };
      // console.log('杯底');
      break;
      default:
      break;

    }
    this.setData({
      isActive: e.currentTarget.dataset.id,
      dataPositionObj: dataPositionObj,
      propSize: propSize
    })
    
  },
  addImg(){
    console.log('添加图片')
  },
  addFont() {
    console.log('添加文字')
  }
})