文字合成

customized/pages/made/combination/combination.js

@@ -23,6 +23,19 @@ Page({
       scale: 2.4834437086092715, 
       angle: 27 
     },
+    fontTouch:{ 
+      isActive: "1", 
+      fontContent: "Gg", 
+      isColor: "#ffffff",
+      x: 10, 
+      y: 10, 
+      angle: 0, 
+      fontSize: 56, 
+      clientX: 0, 
+      clientY: 0,
+      width:10,
+      height:10
+    },
     rpx:1,
     obverseImgObject: {
       '1': '/customized/images/customized/cup_black_big.png',/*正面 */
@@ -41,6 +54,11 @@ Page({
         imgTouch: wx.getStorageSync('madeCupImgData1')
       })
     }
+    if (wx.getStorageSync('madeCupFontData1')){
+      this.setData({
+        fontTouch: wx.getStorageSync('madeCupFontData1')
+      })
+    }
     
     
   },
@@ -57,7 +75,8 @@ Page({
    * 生命周期函数--监听页面显示
    */
   onShow: function () {
-    this.getCombImg(this)
+    this.getCombImg(this);
+    this.getCombFont(this)
   },
 
   /**
@@ -114,10 +133,12 @@ Page({
               // canvas截图区域与图片的高度比例
               let dHeight = dataPositionObj.height / imgTouch.height;
               const ctx = wx.createCanvasContext('comb-img');
-              // 设置背景
-              // ctx.setFillStyle('red')
-              // ctx.fillRect(0, 0, dataPositionObj.width * rpx, dataPositionObj.height * rpx);
-              ctx.drawImage(res.tempFilePath,imgTouch.x,imgTouch.y,imgTouch.width * rpx,imgTouch.height * rpx)
+              //画布中点坐标转移到图片中心
+              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(){
                 wx.canvasToTempFilePath({
                   canvasId: 'comb-img',
@@ -134,6 +155,22 @@ Page({
       },
     })
   },
+  getCombFont(that) {
+    let fontTouch = that.data.fontTouch;
+    let dataPositionObj = that.data.dataPositionObj;
+    const ctx = wx.createCanvasContext('comb-font');
+
+    let movex = fontTouch.x + fontTouch.width / 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.width / 2, fontTouch.height / 5 * 4 - fontTouch.height / 2);
+    ctx.draw()
+  },
   getComb(that,imgSrc){
     let imgTouch = that.data.imgTouch;
     let dataPositionObj = that.data.dataPositionObj;
@@ -150,7 +187,6 @@ Page({
         // 设置背景
         ctx.drawImage(imgSrc, dataPositionObj.left * rpx, dataPositionObj.top * rpx, dataPositionObj.width * rpx, dataPositionObj.height * rpx);
         ctx.draw(true)
-        
       },
     })
   }

customized/pages/made/combination/combination.wxml

@@ -1,2 +1,3 @@
 <canvas canvas-id="comb-canvas" class="comb-content"></canvas>
-<canvas canvas-id='comb-img' class='comb-img'></canvas>
+<canvas canvas-id='comb-img' class='comb-img'></canvas>
+<canvas canvas-id='comb-font' class='comb-font'></canvas>

customized/pages/made/combination/combination.wxss

@@ -6,8 +6,13 @@ page{
  width:750rpx;
  height:588rpx;
 }
-.comb-img{
+.comb-img,.comb-font{
   width:270rpx;
   height:270rpx;
-  background:red;
+}
+.comb-img{
+  background:rgb(255, 176, 29);
+}
+.comb-font{
+  background:#2e8aec;
 }

customized/pages/made/made.wxss

@@ -67,6 +67,7 @@ page{
   top:0;
   left:0;
   /* overflow: hidden; */
+  width:5555555555555rpx;
   z-index:40;
 }
 .btn-box{

customized/pages/made/madeFont/madeFont.js

@@ -41,6 +41,8 @@ Page({
       fontSize:null,
       clientX:0, // 默认初始值
       clientY:0, // 默认初始值
+      width:0,
+      height:0,
     },
     animationData:{},//旋转动画
 
@@ -228,6 +230,8 @@ Page({
       fontSize: null,
       clientX: 0, // 默认初始值
       clientY: 0, // 默认初始值
+      width:0,
+      height:0,
     }
     this.setData({
       touch: touch,
@@ -244,12 +248,13 @@ Page({
     this.setData({
       animationData:this.animation.export(),
       'touch.angle': e.detail.value
-    })
+    });
   },
   madeConfirm(){ // 设计完成进行确定
-    if(this.data.touch.fontSize){
-      wx.setStorageSync('madeCupFontData'+ this.data.isActive, this.data.touch);
-      wx.navigateBack()
+  let that = this;
+    if(that.data.touch.fontSize){
+      that.getTouchFontInformation(that);
+      
       // wx.redirectTo({
       //   url: '/customized/pages/made/made?id='+ this.data.isActive,
       // })
@@ -259,5 +264,19 @@ Page({
         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()
+    })
+  },
+ 
 })

customized/pages/made/madeFont/madeFont.wxml

@@ -9,7 +9,7 @@
       <view wx:else class='made-prompt made-font' style='color:{{touch.isColor}};font-size:{{touch.fontSize}}px'>
         <view class='font-content' style='top:{{touch.y}}px;left:{{touch.x}}px'>
           <view class='iconfont icon-guanbi1 c-white icon-close' bindtap='fontDelete'></view>
-          <view bindtouchstart="fontTouchstart" animation="{{animationData}}" bindtouchmove="fontTouchmove" bindtouchend="fontTouchend">{{touch.fontContent}}</view>
+          <view bindtouchstart="fontTouchstart" animation="{{animationData}}" bindtouchmove="fontTouchmove" bindtouchend="fontTouchend" id='touchFont'>{{touch.fontContent}}</view>
         </view>
       </view>
     </made-solid>

customized/pages/made/madeFont/madeFont.wxss

@@ -42,11 +42,9 @@ page{
   background:#00af66;
   color:#fff;
 }
-/* .made-font{
-  position: absolute;
-  top:0;
-  left:0;
-} */
+.made-font{
+  width:5555555555555rpx;
+}
 .font-content{
   display: inline-block;
   position:relative;

readme.md

@@ -1,11 +1,24 @@
-### https://blog.csdn.net/u011364720/article/details/82869207
 
 ### 项目需求原型 z3qowq.axshare.com
 ### 功能列表 https://mubu.com/doc/yc_fdq72c0
-
 ### https://blog.csdn.net/qq_37942845/article/details/80169907
 
-http://www.php.cn/xiaochengxu-389003.html
 ### canvas 需要实现截图
 生成图片后在合成
-##https://blog.csdn.net/mossbaoo/article/details/85073105
+### 把旋转起点转为图片中心为原点的公式
+
+> 注意：用roate实现旋转，重点在于改变坐标中心点 : ctx.translate(100,45)
+      坐标中心点计算公式：
+      x = 左上角x + 宽度/2
+      y = 左上角y + 高度/2
+      然后translate到(x,y)即可，之后调用rotate进行旋转。
+      旋转之后填充时注意：
+      ctx.fillRect(-50,-25,100,50);
+      x = - 宽度/2
+      y = -高度/2
+      fillRect(x,y,宽度，高度)
+
+### 获取文本的基线坐标
+https://blog.csdn.net/wangjiang_qianmo/article/details/73180042  
+### 文字是根据基线规律
+### https://blog.csdn.net/u012551350/article/details/51361778