daliangzao/customized/pages/made/madeFont/madeFont.js

// pages/customized/made/madeFont/madeFont.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',
      /*底部 */
    },
    // radarImg:null,
    fontColorArray: ['#ffffff', '#000000', '#e70012', '#ff8500', '#fff100', '#22ad38', '#00b7f0', '#920784'],
    fontFamilyArray: ['Nomal', 'Monospace', 'Sans', 'Serif'], // 自带字体样式 
    addFontStatic: false, // 添加文字
    inputFont: null,
    touch: {
      isActive: '1', // 表示正面
      fontContent: '可定制区域',
      isColor: '#ffffff', // 默认是白色
      x: 10, // 字体的top值 x坐标
      y: 10, // 字体的 left值，y坐标
      angle: 0, // 旋转度数
      fontSize: null,
      clientX: 0, // 默认初始值
      clientY: 0, // 默认初始值
      width: 0,
      height: 0,
    },
    animationData: {}, //旋转动画

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let that = this;
    that.animation = wx.createAnimation({
      timingFunction: 'step-start', // "linear","ease","ease-in","ease-in-out","ease-out","step-start","step-end"
    })
    if ('id' in options) {
      let cupNum = util.changeCup(options.id);
      let madeTouchFont = wx.getStorageSync('madeCupFontData' + options.id);
      if (madeTouchFont) {
        that.animation.rotate(madeTouchFont.angle).step();
        that.setData({
          touch: madeTouchFont,
          animationData: that.animation.export(),
          isActive: options.id,
          dataPositionObj: cupNum.dataPositionObj,
          propSize: cupNum.propSize
        })
      } else {
        that.setData({
          'touch.isActive': options.id,
          isActive: options.id,
          dataPositionObj: cupNum.dataPositionObj,
          propSize: cupNum.propSize
        })
      }

    }
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    let that = this;
    that.changeCupImg('1');

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },
  changeCupImg(index) {

    let canvasBg = this.data.obverseImgObject[index],
      that = this;
    // 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();
    //     setTimeout(()=>{
    //       that.handleCanvarToImg(that)
    //     },1000)
    //   },
    // })
  },
  addFont() { // 添加文字
    let that = this;
    that.setData({
      addFontStatic: true
    })
  },
  fontCancel() {
    this.setData({
      addFontStatic: false
    })
  },
  bindinput(e) {
    this.setData({
      inputFont: e.detail.value,
    })
  },
  fontConfirm(e) {
    let that = this;
    if (that.data.inputFont) {
      this.animation.rotate(0).step()
      that.setData({
        'touch.fontContent': that.data.inputFont,
        'touch.fontSize': 100,
        'touch.angle': 0,
        addFontStatic: false,
        animationData: this.animation.export()
      })

      that.setData({
        inputFont: null,
      })
    }
  },
  handleCanvarToImg(that) {
    wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      width: 750,
      height: 588,
      canvasId: 'madeContent',
      success: function (res) {
        that.setData({
          radarImg: res.tempFilePath,
        })
      }
    });
  },
  selectColor(e) { // 选择颜色
    this.setData({
      'touch.isColor': e.currentTarget.dataset.color
    })
  },
  // touch 事件
  fontTouchstart(e) {
    //1.获取鼠标点击下去的
    this.setData({
      "touch.clientX": e.touches[0].clientX - this.data.touch.x,
      "touch.clientY": e.touches[0].clientY - this.data.touch.y
    });
    console.log(this.data.touch, "touch")
  },
  fontTouchmove(e) {
    // 鼠标移动的位置
    this.setData({
      "touch.x": e.changedTouches[0].clientX - this.data.touch.clientX,
      "touch.y": e.changedTouches[0].clientY - this.data.touch.clientY
    });

    // console.log(this.data.touch)
  },
  fontTouchend(e) {
    console.log('移动结束', e)
    console.log(this.data.touch)
  },
  fontDelete() {
    // 删除
    let touch = {
      fontContent: '可定制区域',
      isColor: '#ffffff', // 默认是白色
      x: 10, // 字体的top值 x坐标
      y: 10, // 字体的 left值，y坐标
      rotate: 180, // 旋转度数
      fontSize: null,
      clientX: 0, // 默认初始值
      clientY: 0, // 默认初始值
      width: 0,
      height: 0,
    }
    this.setData({
      touch: touch,
    })
  },
  fontEnlarge(e) { // 放大与缩小
    console.log(e.detail)
    this.setData({
      'touch.fontSize': e.detail.value
    })
  },
  fontRotate(e) { // 旋转
    this.animation.rotate(e.detail.value).step();
    this.setData({
      animationData: this.animation.export(),
      'touch.angle': e.detail.value
    });
  },
  madeConfirm() { // 设计完成进行确定
    let that = this;
    if (that.data.touch.fontSize) {
      that.getTouchFontInformation(that);

      // wx.redirectTo({
      //   url: '/customized/pages/made/made?id='+ this.data.isActive,
      // })
    } else {
      wx.showToast({
        title: '您还没有添加文字进行设计',
        icon: 'none'
      })
    }
  },
  getTouchFontInformation(that) {
    let query = wx.createSelectorQuery();
    query.select('#touchFont').boundingClientRect()
    query.exec(function (res) {
      console.log(res, "获取font的宽高");
      that.setData({
        'touch.width': res[0].width,
        'touch.height': res[0].height
      });
      wx.setStorageSync('madeCupFontData' + that.data.isActive, that.data.touch);
      wx.navigateBack()
    })
  },

})