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

// pages/customized/made/madeFont/madeFont.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,
    fontColor: ['#ffffff','#000000', '#e70012', '#ff8500', '#fff100', '#22ad38', '#00b7f0', '#920784'],
    isColor: '#ffffff', // 默认是白色
    addFontStatic: false, // 添加文字
  },

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

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  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();
      },
    })
  },
  addFont(){ // 添加文字
  let that = this;
    wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      width: 750,
      height: 588,
      canvasId: 'madeContent',
      success: function (res) {
        that.setData({
          radarImg: res.tempFilePath,
        })
        setTimeout(()=>{
          that.setData({
            addFontStatic: true
          })
        },200)
        
      }
    });
    
    
  },
  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({
      isColor: e.currentTarget.dataset.color
    })
  }
})