daliangzao/customized/pages/made/madeImg/madeImg.js

// pages/customized/made/madeImg/madeImg.js
let app = getApp();
let host = app.globalData.servsers; // 请求的url
let userid = app.globalData.user_id; //用户的userid
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',/*底部 */
    },
    fontContent: '可定制区域',
    madeImg: null, // 定制图 
    madeStatic: false, // 定制状态，表示是否已经定制了,false 表示没有定制
    animationData: {},//旋转动画
    imageArray:[
      {
        id:1,
        src:'/customized/images/customized/cover-img.png'
      }
    ],//请求数据后的图片列表
    imageId: null, // 用户选中图片的id
    imageSrc:null, // 选中图片后的路径
    touch:{
      src: null,
      x:30,
      y:30,
      clientX:0,
      clientY:0,
      width:null, // 图片的宽度
      height:null,
      scale:1, // 图片宽高比例
      angle: 0, // 旋转度数
    }
  },

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

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

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },
  // 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)
  },
  imgDelete(){ // 图片删除
    let that = this;
    that.setData({
      'touch.src': null,
      madeStatic: false, // 表示已经有图片
    })
  },
  imgEnlarge(e){
    let that = this;
    console.log(e.detail.value,'eee')
    that.setData({
      'touch.width': e.detail.value,
      'touch.height': e.detail.value/that.data.touch.scale
    })
  },
  imgRotate(e) { // 旋转
    this.animation.rotate(e.detail.value).step();
    this.setData({
      animationData: this.animation.export(),
      'touch.angle': e.detail.value
    })
  },
  uploadImg(){
    console.log('点击上传图片');
    wx.chooseImage({
      success(res) {
        const tempFilePaths = res.tempFilePaths
        wx.uploadFile({
          url: host + '/fileUpload', // 仅为示例，非真实的接口地址
          filePath: tempFilePaths[0],
          name: 'file',
          formData: {
            file: tempFilePaths[0],
            userid:userid,
          },
          success(res) {
            console.log(res)
          }
        })
      }
    })
  },
  selectImgBtn(e){
    console.log('选中图片', e.currentTarget.dataset.id);
    this.setData({
      imageId: e.currentTarget.dataset.id,
      imageSrc: e.currentTarget.dataset.src
    })
    // 'touch.src': e.currentTarget.dataset.src,
      // madeStatic: true, // 表示已经有图片
    // this.getScale(this, e.currentTarget.dataset.src);
  },
  getScale(that,src){ // 获取图片的比例
    wx.getImageInfo({
      src: src,
      success: function (res) {
        console.log(res, "fff")
        that.setData({
          'touch.width': res.width,
          'touch.height': res.height,
          'touch.scale': res.width / res.height, // 宽高比例
        })
        console.log(that.data.touch)
      }
    })
  },
  addImg(){ // 添加图片
    let that = this;
    if (that.data.imageSrc){
      that.setData({
        'touch.src': that.data.imageSrc,
        madeStatic: true, // 表示已经有图片
      })
      that.getScale(that, that.data.imageSrc)
    } else {
      wx.showToast({
        title: '您还没有选中图片',
        icon: 'none'
      })
    }
    
  }
})