push

customized/pages/made/combination/combination.js

@@ -11,64 +11,69 @@ Page({
       width: 270,
       height: 270
     },
-    imgTouch: { 
+    imgTouch: {
       isActive: "1",
-      src: "https://dlz.info666.com//temp/d945bfb0-5cc6-406d-a814-cf63b099041f.jpg", 
+      src: "https://dlz.info666.com//temp/d945bfb0-5cc6-406d-a814-cf63b099041f.jpg",
       x: -82,
-      y: 17, 
-      clientX: 195, 
-      clientY: 121, 
-      width: 517, 
-      height: 208.17866666666666, 
-      scale: 2.4834437086092715, 
-      angle: 27 
+      y: 17,
+      clientX: 195,
+      clientY: 121,
+      width: 517,
+      height: 208.17866666666666,
+      scale: 2.4834437086092715,
+      angle: 27
     },
-    fontTouch:{ 
-      isActive: "1", 
-      fontContent: "Gg", 
+    fontTouch: {
+      isActive: "1",
+      fontContent: "Gg",
       isColor: "#ffffff",
-      x: 10, 
-      y: 10, 
-      angle: 0, 
-      fontSize: 56, 
-      clientX: 0, 
+      x: 10,
+      y: 10,
+      angle: 0,
+      fontSize: 100,
+      clientX: 0,
       clientY: 0,
-      width:10,
-      height:10
+      width: 138.34375,
+      height: 132
     },
-    rpx:1,
+    rpx: 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',/*底部 */
+      '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',
+      /*底部 */
     },
+    imgSrcArray: [],
   },
 
   /**
    * 生命周期函数--监听页面加载
    */
   onLoad: function (options) {
-    if (wx.getStorageSync('madeCupImgData1')){
+    if (wx.getStorageSync('madeCupImgData1')) {
       this.setData({
         imgTouch: wx.getStorageSync('madeCupImgData1')
       })
     }
-    if (wx.getStorageSync('madeCupFontData1')){
+    if (wx.getStorageSync('madeCupFontData1')) {
       this.setData({
         fontTouch: wx.getStorageSync('madeCupFontData1')
       })
     }
-    
-    
+
+
   },
 
   /**
    * 生命周期函数--监听页面初次渲染完成
    */
   onReady: function () {
-    
-    
+
+
   },
 
   /**
@@ -76,7 +81,8 @@ Page({
    */
   onShow: function () {
     this.getCombImg(this);
-    this.getCombFont(this)
+
+
   },
 
   /**
@@ -113,7 +119,7 @@ Page({
   onShareAppMessage: function () {
 
   },
-  getCombImg(that){
+  getCombImg(that) {
     let imgTouch = that.data.imgTouch;
     let dataPositionObj = that.data.dataPositionObj;
     wx.getSystemInfo({
@@ -134,17 +140,22 @@ Page({
               let dHeight = dataPositionObj.height / imgTouch.height;
               const ctx = wx.createCanvasContext('comb-img');
               //画布中点坐标转移到图片中心
-              let movex = imgTouch.x + imgTouch.width * rpx/2;
-              let movey = imgTouch.y + imgTouch.height * rpx/2;
+              let movex = imgTouch.x + imgTouch.width * rpx / 2;
+              let movey = imgTouch.y + imgTouch.height * rpx / 2;
               ctx.translate(movex, movey);
               ctx.rotate(imgTouch.angle * Math.PI / 180);
-              ctx.drawImage(res.tempFilePath, -imgTouch.width * rpx / 2, -imgTouch.height * rpx/2,imgTouch.width * rpx,imgTouch.height * rpx)
-              ctx.draw(true,function(){
+              ctx.drawImage(res.tempFilePath, -imgTouch.width * rpx / 2, -imgTouch.height * rpx / 2, imgTouch.width * rpx, imgTouch.height * rpx)
+              ctx.draw(true, function () {
                 wx.canvasToTempFilePath({
                   canvasId: 'comb-img',
-                  success:function(res){
+                  success: function (res) {
                     console.log(res)
-                    that.getComb(that,res.tempFilePath)
+                    let imgArray = that.data.imgSrcArray;
+                    imgArray.push(res.tempFilePath)
+                    that.setData({
+                      imgSrcArray: imgArray
+                    })
+                    that.getCombFont(that);
                   }
                 }, that)
               })
@@ -161,17 +172,31 @@ Page({
     const ctx = wx.createCanvasContext('comb-font');
 
     let movex = fontTouch.x + fontTouch.width / 2;
-    let movey = fontTouch.y + fontTouch.height/ 2;
+    let movey = fontTouch.y + fontTouch.height / 2;
     // ctx.translate(movex, movey);
     // ctx.rotate(fontTouch.angle * Math.PI / 180);
 
     ctx.setFontSize(fontTouch.fontSize);
     ctx.setFillStyle(fontTouch.isColor);
-    ctx.fillText(fontTouch.fontContent, fontTouch.x, fontTouch.y + fontTouch.height / 5 *4);
+    ctx.fillText(fontTouch.fontContent, fontTouch.x, fontTouch.y + fontTouch.height / 5 * 4);
     // ctx.fillText(fontTouch.fontContent, -fontTouch.width / 2, fontTouch.height / 10 * 3);
-    ctx.draw()
+    ctx.draw(true, function () {
+      wx.canvasToTempFilePath({
+        canvasId: 'comb-font',
+        success: function (res) {
+          console.log(res)
+          let imgArray = that.data.imgSrcArray;
+          imgArray.push(res.tempFilePath)
+          that.setData({
+            imgSrcArray: imgArray
+          })
+          console.log(that.data.imgSrcArray, "that.data.imgSrcArray")
+          that.getComb(that, that.data.imgSrcArray)
+        }
+      }, that)
+    })
   },
-  getComb(that,imgSrc){
+  getComb(that, imgSrcArray) {
     let imgTouch = that.data.imgTouch;
     let dataPositionObj = that.data.dataPositionObj;
     wx.getSystemInfo({
@@ -183,9 +208,11 @@ Page({
         let canvasBg = that.data.obverseImgObject[1];
         const ctx = wx.createCanvasContext('comb-canvas');
         ctx.drawImage(canvasBg, 0, 0, 750 * rpx, 588 * rpx);
-        ctx.draw();
+        ctx.draw(true);
         // 设置背景
-        ctx.drawImage(imgSrc, dataPositionObj.left * rpx, dataPositionObj.top * rpx, dataPositionObj.width * rpx, dataPositionObj.height * rpx);
+        imgSrcArray.forEach((res) => {
+          ctx.drawImage(res, dataPositionObj.left * rpx, dataPositionObj.top * rpx, dataPositionObj.width * rpx, dataPositionObj.height * rpx);
+        })
         ctx.draw(true)
       },
     })

customized/pages/made/madeFont/madeFont.js

@@ -18,33 +18,37 @@ Page({
       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',/*底部 */
+      '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'],// 自带字体样式 
+    fontColorArray: ['#ffffff', '#000000', '#e70012', '#ff8500', '#fff100', '#22ad38', '#00b7f0', '#920784'],
+    fontFamilyArray: ['Nomal', 'Monospace', 'Sans', 'Serif'], // 自带字体样式 
     addFontStatic: false, // 添加文字
-    inputFont:null,
-    touch:{
-      isActive:'1', // 表示正面
+    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,
+      x: 10, // 字体的top值 x坐标
+      y: 10, // 字体的 left值，y坐标
+      angle: 0, // 旋转度数
+      fontSize: null,
+      clientX: 0, // 默认初始值
+      clientY: 0, // 默认初始值
+      width: 0,
+      height: 0,
     },
-    animationData:{},//旋转动画
+    animationData: {}, //旋转动画
 
   },
 
@@ -56,10 +60,10 @@ Page({
     that.animation = wx.createAnimation({
       timingFunction: 'step-start', // "linear","ease","ease-in","ease-in-out","ease-out","step-start","step-end"
     })
-    if('id' in options){
+    if ('id' in options) {
       let cupNum = util.changeCup(options.id);
       let madeTouchFont = wx.getStorageSync('madeCupFontData' + options.id);
-      if (madeTouchFont){
+      if (madeTouchFont) {
         that.animation.rotate(madeTouchFont.angle).step();
         that.setData({
           touch: madeTouchFont,
@@ -68,7 +72,7 @@ Page({
           dataPositionObj: cupNum.dataPositionObj,
           propSize: cupNum.propSize
         })
-      }else {
+      } else {
         that.setData({
           'touch.isActive': options.id,
           isActive: options.id,
@@ -76,7 +80,7 @@ Page({
           propSize: cupNum.propSize
         })
       }
-     
+
     }
   },
 
@@ -86,14 +90,14 @@ Page({
   onReady: function () {
     let that = this;
     that.changeCupImg('1');
-   
+
   },
 
   /**
    * 生命周期函数--监听页面显示
    */
   onShow: function () {
-    
+
   },
 
   /**
@@ -130,9 +134,10 @@ Page({
   onShareAppMessage: function () {
 
   },
-   changeCupImg(index) {
-    
-    let canvasBg = this.data.obverseImgObject[index],that = this;
+  changeCupImg(index) {
+
+    let canvasBg = this.data.obverseImgObject[index],
+      that = this;
     // wx.getSystemInfo({
     //   success: function (res) {
     //     let rpx = res.windowWidth / 750;
@@ -145,40 +150,40 @@ Page({
     //   },
     // })
   },
-  addFont(){ // 添加文字
-  let that = this;
+  addFont() { // 添加文字
+    let that = this;
     that.setData({
       addFontStatic: true
     })
   },
-  fontCancel(){
+  fontCancel() {
     this.setData({
       addFontStatic: false
     })
   },
-  bindinput(e){
+  bindinput(e) {
     this.setData({
       inputFont: e.detail.value,
     })
   },
-  fontConfirm(e){
+  fontConfirm(e) {
     let that = this;
-    if (that.data.inputFont){
+    if (that.data.inputFont) {
       this.animation.rotate(0).step()
       that.setData({
         'touch.fontContent': that.data.inputFont,
-        'touch.fontSize':100,
+        'touch.fontSize': 100,
         'touch.angle': 0,
         addFontStatic: false,
         animationData: this.animation.export()
       })
-      
+
       that.setData({
         inputFont: null,
       })
     }
   },
-  handleCanvarToImg(that){
+  handleCanvarToImg(that) {
     wx.canvasToTempFilePath({
       x: 0,
       y: 0,
@@ -192,36 +197,36 @@ Page({
       }
     });
   },
-  selectColor(e){ // 选择颜色
+  selectColor(e) { // 选择颜色
     this.setData({
       'touch.isColor': e.currentTarget.dataset.color
     })
   },
   // touch 事件
-  fontTouchstart(e){
+  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")
+    console.log(this.data.touch, "touch")
   },
-  fontTouchmove(e){
+  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)
+  fontTouchend(e) {
+    console.log('移动结束', e)
     console.log(this.data.touch)
   },
-  fontDelete(){
+  fontDelete() {
     // 删除
-    let touch= {
+    let touch = {
       fontContent: '可定制区域',
       isColor: '#ffffff', // 默认是白色
       x: 10, // 字体的top值 x坐标
@@ -230,31 +235,31 @@ Page({
       fontSize: null,
       clientX: 0, // 默认初始值
       clientY: 0, // 默认初始值
-      width:0,
-      height:0,
+      width: 0,
+      height: 0,
     }
     this.setData({
       touch: touch,
     })
   },
-  fontEnlarge(e){ // 放大与缩小
+  fontEnlarge(e) { // 放大与缩小
     console.log(e.detail)
     this.setData({
-      'touch.fontSize':e.detail.value
+      'touch.fontSize': e.detail.value
     })
   },
-  fontRotate(e){ // 旋转
+  fontRotate(e) { // 旋转
     this.animation.rotate(e.detail.value).step();
     this.setData({
-      animationData:this.animation.export(),
+      animationData: this.animation.export(),
       'touch.angle': e.detail.value
     });
   },
-  madeConfirm(){ // 设计完成进行确定
-  let that = this;
-    if(that.data.touch.fontSize){
+  madeConfirm() { // 设计完成进行确定
+    let that = this;
+    if (that.data.touch.fontSize) {
       that.getTouchFontInformation(that);
-      
+
       // wx.redirectTo({
       //   url: '/customized/pages/made/made?id='+ this.data.isActive,
       // })
@@ -265,18 +270,18 @@ Page({
       })
     }
   },
-  getTouchFontInformation(that){
+  getTouchFontInformation(that) {
     let query = wx.createSelectorQuery();
     query.select('#touchFont').boundingClientRect()
     query.exec(function (res) {
-      console.log(res,"获取font的宽高");
+      console.log(res, "获取font的宽高");
       that.setData({
-        'touch.width':res[0].width,
-        'touch.height':res[0].height
+        'touch.width': res[0].width,
+        'touch.height': res[0].height
       });
       wx.setStorageSync('madeCupFontData' + that.data.isActive, that.data.touch);
       wx.navigateBack()
     })
   },
- 
+
 })