定制合成

customized/pages/boxMade/boxComb/boxComb.js

@@ -40,7 +40,7 @@ Page({
       height: 132
     },
     rpx: 1,
-    obverseImgObject:['', '/customized/images/customized/cup_black_big.png', '/customized/images/customized/cup_black_side.png', '/customized/images/customized/cup_black_handle.png', '/customized/images/customized/cup_black_bottom.png'],
+    obverseImgObject: ['', '/customized/images/customized/cup_black_big.png', '/customized/images/customized/cup_black_side.png', '/customized/images/customized/cup_black_handle.png', '/customized/images/customized/cup_black_bottom.png', '/customized/images/customized/box_white_big_1.png', '/customized/images/customized/box_white_big_2.png'],
     // obverseImgObject: {
     //   '1': ,
     //   /*正面 */
@@ -54,9 +54,7 @@ Page({
     imgSrcArray: [],
     buildSrcArrayText:{
       '1':'正面',
-      '2':'侧面',
-      '3':'手柄',
-      '4':'底部',
+      '2':'背面',
     },
     buildSrcArray: [],
     customGoodsImg:"",
@@ -67,19 +65,6 @@ Page({
    * 生命周期函数--监听页面加载
    */
   onLoad: function (options) {
-    
-    // if (wx.getStorageSync('madeCupImgData1')) {
-    //   this.setData({
-    //     imgTouch: wx.getStorageSync('madeCupImgData1')
-    //   })
-    // }
-    // if (wx.getStorageSync('madeCupFontData1')) {
-    //   this.setData({
-    //     fontTouch: wx.getStorageSync('madeCupFontData1')
-    //   })
-    // }
-
-
   },
 
   /**
@@ -91,24 +76,12 @@ Page({
       title: '图片合成中...'
     })
     let that = this, result = true;
-    // for (let i = 1; i <= 4; i++) {
-    //   if (wx.getStorageSync('madeCupImgData' + i) || wx.getStorageSync('madeCupFontData' + i)) {
-    //     console.log(i, "iiiii")
-    //     that.getCombImg(that, i);
-    //   }
-    // }
 
-    if (wx.getStorageSync('madeCupImgData1') || wx.getStorageSync('madeCupFontData1')) {
-      that.getCombImg(that, 1);
-      result = false
-    } else if (wx.getStorageSync('madeCupImgData2') || wx.getStorageSync('madeCupFontData2')) {
-      that.getCombImg(that, 2);
-      result = false
-    } else if (wx.getStorageSync('madeCupImgData3') || wx.getStorageSync('madeCupFontData3')) {
-      that.getCombImg(that, 3);
+    if (wx.getStorageSync('madeCupImgData5') || wx.getStorageSync('madeCupFontData5')) {
+      that.getCombImg(that, 5);
       result = false
-    } else if (wx.getStorageSync('madeCupImgData4') || wx.getStorageSync('madeCupFontData4')) {
-      that.getCombImg(that, 4);
+    } else if (wx.getStorageSync('madeCupImgData6') || wx.getStorageSync('madeCupFontData6')) {
+      that.getCombImg(that, 6);
       result = false
     }
 
@@ -239,27 +212,12 @@ Page({
         ctx.fillText(fontTouch.fontContent, 0, simulationFont.height / 5 * 4 + 1)
       }
       ctx.restore()
-      // ctx.font = `'bold' ${fontTouch.fontSize} ${fontTouch.isColor} 'sans-serif'`;
-      // const metrics = ctx.measureText(fontTouch.fontContent)
-      // let movex = fontTouch.x + metrics.width / 2;
-      // let movey = fontTouch.y + simulationFont.height / 2;
-      // ctx.translate(movex, movey);
-      // ctx.rotate(fontTouch.angle * Math.PI / 180);
-      // ctx.fillText(fontTouch.fontContent, -metrics.width / 2, -simulationFont.height / 2 + simulationFont.height / 5 * 4);
-      // ctx.fillText(fontTouch.fontContent, 0, simulationFont.height / 5 * 4)
       ctx.draw(false,function () {
         wx.canvasToTempFilePath({
           canvasId: 'comb-font'+i,
           success: function (res) {
             console.log(res)
             that.getCombFontImg(that, res.tempFilePath, fontTouch,i)
-            // 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,i,true)
           }
         }, that)
       })
@@ -280,11 +238,11 @@ Page({
               // canvas截图区域与图片的宽度比例
               const ctx = wx.createCanvasContext('comb-font' + i + '-2');
               //画布中点坐标转移到图片中心
-              let movex = fontTouch.x + 218 * rpx / 2;
-              let movey = fontTouch.y + 218 * rpx / 2;
+              let movex = fontTouch.x + 536 * rpx / 2;
+              let movey = fontTouch.y + 712 * rpx / 2;
               ctx.translate(movex, movey);
               ctx.rotate(fontTouch.angle * Math.PI / 180);
-              ctx.drawImage(img, -218 * rpx / 2, -218 * rpx / 2, 218 * rpx, 218 * rpx)
+              ctx.drawImage(img, -536 * rpx / 2, -712 * rpx / 2, 536 * rpx, 712 * rpx)
               ctx.draw(false, function () {
                 wx.canvasToTempFilePath({
                   canvasId: 'comb-font' + i + '-2',
@@ -316,7 +274,7 @@ Page({
             rpx: rpx
           });
           const ctx = wx.createCanvasContext('comb-canvas' + i);
-          ctx.drawImage(canvasBg, 0, 0, 750 * rpx, 588 * rpx);
+          ctx.drawImage(canvasBg, 0, 0, 750 * rpx, 800 * rpx);
           // 设置背景
           ctx.draw(true)
           imgSrcArray.forEach((res) => {
@@ -339,7 +297,7 @@ Page({
                     buildSrcArray: buildSrcArray,
                   })
                   console.log(that.data.buildSrcArray, "buildSrcArray")
-                  if (i < 4) {
+                  if (i < 7) {
                     i = i + 1
                     that.getCombImg(that, i);
                   } else {

customized/pages/boxMade/boxComb/boxComb.wxml

@@ -1,32 +1,22 @@
 <view style="position:fixed;top:999999999999999999999rpx;">
   <!-- 正面 -->
-  <canvas canvas-id="comb-canvas1" class="comb-content"></canvas>
-  <canvas canvas-id='comb-img1' class='comb-img'></canvas>
-  <canvas canvas-id='comb-font1' class='comb-font'></canvas>
-   <canvas canvas-id='comb-font1-2' class='comb-img'></canvas>
+  <canvas canvas-id="comb-canvas5" class="comb-content"></canvas>
+  <canvas canvas-id='comb-img5' class='comb-img5'></canvas>
+  <canvas canvas-id='comb-font5' class='comb-font5'></canvas>
+   <canvas canvas-id='comb-font5-2' class='comb-img5'></canvas>
   <!-- 背面 -->
-  <canvas canvas-id="comb-canvas2" class="comb-content"></canvas>
-  <canvas canvas-id='comb-img2' class='comb-img'></canvas>
-  <canvas canvas-id='comb-font2' class='comb-font'></canvas>
-   <canvas canvas-id='comb-font2-2' class='comb-img'></canvas>
-  <!-- 手柄 -->
-  <canvas canvas-id="comb-canvas3" class="comb-content"></canvas>
-  <canvas canvas-id='comb-img3' class='comb-img3'></canvas>
-  <canvas canvas-id='comb-font3' class='comb-font3'></canvas>
-   <canvas canvas-id='comb-font3-2' class='comb-img3'></canvas>
-  <!-- 杯底 -->
-  <canvas canvas-id="comb-canvas4" class="comb-content"></canvas>
-  <canvas canvas-id='comb-img4' class='comb-img4'></canvas>
-  <canvas canvas-id='comb-font4' class='comb-font4'></canvas>
-   <canvas canvas-id='comb-font4-2' class='comb-img4'></canvas>
+  <canvas canvas-id="comb-canvas6" class="comb-content"></canvas>
+  <canvas canvas-id='comb-img6' class='comb-img6'></canvas>
+  <canvas canvas-id='comb-font6' class='comb-font6'></canvas>
+   <canvas canvas-id='comb-font6-2' class='comb-img6'></canvas>
 </view>
 <view class='comb-view-img'>
   <cover-view class="pause" wx:for="{{buildSrcArray}}" bindtap="pause">
       <cover-image class="img" src='{{item.src}}' />
-      <cover-view class="text">{{buildSrcArrayText[item.isActive]}}</cover-view>
+      <cover-view class="text">{{buildSrcArrayText[item.isActive - 4]}}</cover-view>
   </cover-view>
 </view>
-
+ <!--  -->
 <view class='footer' hover-class="none">
 <view class='footer-box f-box'>
   <view class='f-item f-box f-justify-content-center footer-btn f-s32 bg-green c-white' bindtap='addImgRouter' hover-class="none">加入购物车</view>

customized/pages/boxMade/boxComb/boxComb.wxss

@@ -4,30 +4,22 @@ page{
 }
 .comb-content{
  width:750rpx;
- height:588rpx;
+ height:800rpx;
 }
-.comb-img{
-  width:334rpx;
-  height:450rpx;
+.comb-img5,.comb-font5{
+  width:536rpx;
+  height:712rpx;
 }
-.comb-font,.comb-font4,.comb-font3{
-  width:218rpx;
-  height:218rpx;
+.comb-img6,.comb-font6{
+  width:534rpx;
+  height:654rpx;
 }
-.comb-img,.comb-img3{
+.comb-img{
   background:rgb(255, 176, 29);
 }
-.comb-font,.comb-font3{
+.comb-font{
   background:#2e8aec;
 }
-.comb-img3{
-  width:70rpx;
-  height:246rpx;
-}
-.comb-img4{
-  width:304rpx;
-  height:304rpx;
-}
 .comb-view-img .pause{
   width:39%;
   float:left;

customized/pages/boxMade/boxMade.js

@@ -192,14 +192,12 @@ Page({
   finishDesign() { // 完成设计
     let that = this;
     let designObj = {
-      '1': '正面',
-      '2': '背面',
-      '3': '手柄',
-      '4': '杯底',
+      '5': '正面',
+      '6': '背面',
     },
       designVal = '',
       madeStatic = false;
-    for (let i = 1; i < 5; i++) {
+    for (let i = 5; i < 7; i++) {
       if (!wx.getStorageSync('madeCupImgData' + i) && !wx.getStorageSync('madeCupFontData' + i)) {
         designVal += designObj[i] + ','
       } else {
@@ -210,8 +208,7 @@ Page({
       if (!designVal) {
         console.log('可以完成')
         wx.navigateTo({
-          // url: '/customized/pages/made/combination/combination',
-          url: '/customized/pages/made/comb/comb'
+          url: '/customized/pages/boxMade/boxComb/boxComb'
         })
       } else {
         wx.showModal({
@@ -226,8 +223,7 @@ Page({
               // })
               // that.getBuildImg(that)
               wx.navigateTo({
-                // url: '/customized/pages/made/combination/combination',
-                url: '/customized/pages/made/comb/comb'
+                url: '/customized/pages/boxMade/boxComb/boxComb'
               })
             } else {
               console.log('用户点击取消')

customized/pages/boxMade/boxMade.wxml

@@ -25,7 +25,7 @@
 <view class='btn-box'>
   <view class='f-box f-justify-content-between'>
     <button type="default" hover-class="none" bindtap="changeCup" data-id='5' class='{{isActive === "5" ? "active" : ""}}' size="mini">正面</button>
-    <button type="default" hover-class="none" bindtap="changeCup" data-id='6' class='{{isActive === "6" ? "active" : ""}}' size="mini">反面</button>
+    <button type="default" hover-class="none" bindtap="changeCup" data-id='6' class='{{isActive === "6" ? "active" : ""}}' size="mini">背面</button>
   </view>
 </view>
 

customized/pages/boxMade/boxMadeImg/boxMadeImg.wxml

@@ -13,7 +13,7 @@
             </view>
           </view>
           <!-- font -->
-          <view wx:if="{{fontTouch.fontSize}}"   bindtouchstart="touchstart" bindtouchmove="touchmove" bindtouchend="touchend" class='made-prompt made-font' style='color:{{fontTouch.isColor}};font-size:{{fontTouch.fontSize}}px;font-weight:{{fontTouch.bold}};'>
+          <view wx:if="{{fontTouch.fontSize}}"   bindtouchstart="touchstart" bindtouchmove="touchmove" bindtouchend="touchend" class='made-prompt made-font' style='color:{{fontTouch.isColor}};font-size:{{fontTouch.fontSize}}px;font-weight:{{fontTouch.bold}};width:{{dataPositionObj.width}}rpx;height:{{dataPositionObj.height}}rpx;'>
             <view class='font-content' style='top:{{fontTouch.y}}px;left:{{fontTouch.x}}px;' animation="{{fontAnimationData}}">
               <view  id='touchFont' style='font-weight:{{fontTouch.bold ? "bold":""}}'>{{fontTouch.fontContent}}</view>
             </view>