修改文字

customized/pages/made/comb/comb.js

@@ -229,26 +229,27 @@ Page({
       // ctx.textBaseline = 'top';
       ctx.setFontSize(fontTouch.fontSize);
       ctx.setFillStyle(fontTouch.isColor);
-      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);
-      
-      console.log(metrics,"文本的宽度")
+      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)
-            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.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)
       })
@@ -257,6 +258,40 @@ Page({
     }
     
   },
+  getCombFontImg(that, img, fontTouch,i){ // 生产字体图片后在进行处理一次
+    wx.getSystemInfo({
+      success: function (res) {
+        let rpx = res.windowWidth / 750;
+        that.setData({
+          rpx: rpx
+        });
+            // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
+            console.log(res)
+              // canvas截图区域与图片的宽度比例
+              const ctx = wx.createCanvasContext('comb-font' + i + '-2');
+              //画布中点坐标转移到图片中心
+              let movex = fontTouch.x + 218 * rpx / 2;
+              let movey = fontTouch.y + 218 * 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.draw(false, function () {
+                wx.canvasToTempFilePath({
+                  canvasId: 'comb-font' + i + '-2',
+                  success: function (res) {
+                    console.log(res)
+                     let imgArray = that.data.imgSrcArray;
+                    imgArray.push(res.tempFilePath)
+                    that.setData({
+                      imgSrcArray: imgArray
+                    })
+                    that.getComb(that, that.data.imgSrcArray,i,true)
+                  }
+                }, that)
+              })
+      },
+    })
+  },
   getComb(that, imgSrcArray,i,_static) {
     console.log(imgSrcArray,"imgSrcArray")
     if(_static){

customized/pages/made/comb/comb.wxml

@@ -3,18 +3,22 @@
   <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-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>
 </view>
 <view class='comb-view-img'>
   <cover-view class="pause" wx:for="{{buildSrcArray}}" bindtap="pause">

customized/pages/made/comb/comb.wxss

@@ -6,21 +6,25 @@ page{
  width:750rpx;
  height:588rpx;
 }
-.comb-img,.comb-font{
+.comb-img{
   width:334rpx;
   height:334rpx;
 }
+.comb-font,.comb-font4,.comb-font3{
+  width:218rpx;
+  height:218rpx;
+}
 .comb-img,.comb-img3{
   background:rgb(255, 176, 29);
 }
 .comb-font,.comb-font3{
   background:#2e8aec;
 }
-.comb-img3,.comb-font3{
+.comb-img3{
   width:70rpx;
   height:246rpx;
 }
-.comb-img4,.comb-font4{
+.comb-img4{
   width:304rpx;
   height:304rpx;
 }

customized/pages/made/made.wxml

@@ -24,9 +24,9 @@
         </view>
       </view>
       <!-- font -->
-     <view wx:if="{{!touchStatic}}" class='made-prompt made-font' style='color:{{fontTouch.isColor}};font-size:{{fontTouch.fontSize}}px;width:{{999999999999999999999999}}rpx;height:{{dataPositionObj.height}}rpx'>
-        <view class='font-content' style='top:{{fontTouch.y}}px;left:{{fontTouch.x}}px'>
-          <view animation="{{fontAnimationData}}">{{fontTouch.fontContent}}</view>
+     <view wx:if="{{!touchStatic}}" class='made-prompt made-font' style='color:{{fontTouch.isColor}};font-size:{{fontTouch.fontSize}}px;width:{{999999999999999999999999}}rpx;height:{{dataPositionObj.height}}rpx;font-weight:{{fontTouch.bold}};'>
+        <view class='font-content' style='top:{{fontTouch.y}}px;left:{{fontTouch.x}}px;' animation="{{fontAnimationData}}">
+          <view id='touchFont'>{{fontTouch.fontContent}}</view>
         </view>
       </view>
       </view>

customized/pages/made/made.wxss

@@ -46,6 +46,10 @@ page{
 .font-content{
   display: inline-block;
   position:relative;
+  width:218rpx;
+  height:218rpx;
+  /* border:2rpx dashed #e0e0e0; */
+  overflow: hidden;
 }
 .made-box{
   position:relative;
@@ -113,4 +117,8 @@ page{
 }
 .font-height{
   color:red;
+}
+#touchFont{
+  height:99999999999rpx;
+  width:9999999999rpx;
 }

customized/pages/made/madeFont/madeFont.js

@@ -47,6 +47,7 @@ Page({
       clientY: 0, // 默认初始值
       width: 0,
       height: 0,
+      bold:100,
     },
     imgFont:{}, // 图片对象
     animationData: {}, //旋转动画
@@ -260,6 +261,11 @@ Page({
       'fontTouch.angle': e.detail.value
     });
   },
+  fontWeight(e) {
+    this.setData({
+      'fontTouch.bold': e.detail.value
+    })
+  },
   madeConfirm() { // 设计完成进行确定
     let that = this;
     if (that.data.fontTouch.fontSize) {
@@ -301,5 +307,6 @@ Page({
 
     
   },
+  
 
 })

customized/pages/made/madeFont/madeFont.wxml

@@ -15,10 +15,10 @@
           </view>
         </view>
         <!-- font -->
-        <view wx:if="{{fontTouch.fontSize}}" class='made-prompt made-font' style='color:{{fontTouch.isColor}};font-size:{{fontTouch.fontSize}}px'>
-          <view class='font-content' style='top:{{fontTouch.y}}px;left:{{fontTouch.x}}px'>
+        <view wx:if="{{fontTouch.fontSize}}" class='made-prompt made-font' style='color:{{fontTouch.isColor}};font-size:{{fontTouch.fontSize}}px;font-weight:{{fontTouch.bold}};'>
+          <view class='font-content' style='top:{{fontTouch.y}}px;left:{{fontTouch.x}}px;' bindtouchstart="fontTouchstart" animation="{{animationData}}" bindtouchmove="fontTouchmove" bindtouchend="fontTouchend">
             <!-- <view class='iconfont icon-guanbi1 c-white icon-close' bindtap='fontDelete'></view> -->
-            <view bindtouchstart="fontTouchstart" animation="{{animationData}}" bindtouchmove="fontTouchmove" bindtouchend="fontTouchend" id='touchFont'>{{fontTouch.fontContent}}</view>
+            <view  id='touchFont'>{{fontTouch.fontContent}}</view>
           </view>
         </view>
       </view>
@@ -50,7 +50,7 @@
   <view class='f-box f-align-items-center mar-l20 mar-r20'>
     <view class='f-s30'>放大</view>
     <view class="body-view f-item">
-      <slider bindchanging="fontEnlarge" block-color="#00af66" block-size="16" min="20" max="200" value='{{fontTouch.fontSize}}' show-value/>
+      <slider bindchanging="fontEnlarge" block-color="#00af66" block-size="16" min="20" max="80" value='{{fontTouch.fontSize}}' show-value/>
     </view>
   </view>
   <view class='f-box f-align-items-center mar-l20 mar-r20'>
@@ -60,6 +60,13 @@
       <slider bindchanging="fontRotate" block-color="#00af66" block-size="16" min="0" max="360" value='{{fontTouch.angle}}' show-value/>
     </view>
   </view>
+  <!-- <view class='f-box f-align-items-center mar-l20 mar-r20'> -->
+    <!-- 加粗 -->
+    <!-- <view class='f-s30'>加粗</view>
+    <view class="body-view f-item">
+      <slider bindchanging="fontWeight" block-color="#00af66" block-size="16" min="100" max="900" value='{{fontTouch.bold}}' show-value/>
+    </view> -->
+  <!-- </view> -->
   
 </view>
 
@@ -71,7 +78,7 @@
   </view>
   <view class='c-white f-box f-justify-content-center f-s26'>仅支持手机自带字体样式</view>
   <view class="input-box">
-    <input placeholder-style="color:#fff" style='color:{{fontTouch.isColor}}' placeholder="可编辑文字" bindinput="bindinput" auto-focus />
+    <input placeholder-style="color:#fff" style='color:{{fontTouch.isColor}};font-weight:{{fontTouch.bold? 900:""}}' placeholder="可编辑文字" bindinput="bindinput" auto-focus />
   </view>
 
   <view class='font-color f-box f-justify-content-around'>
@@ -79,6 +86,8 @@
       <view style='background:{{item}}' class='font-item'></view>
     </view>
   </view>
-  <!-- 自带字体样式 -->
-  <view></view>
+  <!-- 加粗 -->
+  <view>
+    <!-- <view class='c-white f-weight' style='color:{{fontTouch.bold? "#22ad38":""}}' bindtap='weightBtn'>B</view> -->
+  </view>
 </view>

customized/pages/made/madeFont/madeFont.wxss

@@ -34,8 +34,16 @@ page{
 .font-content{
   display: inline-block;
   position:relative;
+  width:218rpx;
+  height:218rpx;
+  border:2rpx dashed #e0e0e0;
+  overflow: hidden;
 }
-.font-content .iconfont{
+#touchFont{
+  height:99999999999rpx;
+  width:9999999999rpx;
+}
+/* .font-content .iconfont{
   position:absolute;
   font-size:60rpx;
   z-index:10;
@@ -43,7 +51,7 @@ page{
 .icon-close{
   top:-50rpx;
   left:-50rpx;
-}
+} */
 .icon-rotate{
   bottom:'-20rpx';
   right:'-20rpx';
@@ -115,7 +123,8 @@ page{
   width:5555555555555rpx;
   z-index:40;
 }
-.font-content{
-  display: inline-block;
-  position:relative;
-}
+.f-weight{
+  font-size:40rpx;
+  width:600rpx;
+  margin:30rpx auto;
+}

customized/pages/made/madeImg/madeImg.wxml

@@ -13,9 +13,9 @@
             </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'>
-            <view class='font-content' style='top:{{fontTouch.y}}px;left:{{fontTouch.x}}px'>
-              <view animation="{{fontAnimationData}}"  id='touchFont'>{{fontTouch.fontContent}}</view>
+          <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 class='font-content' style='top:{{fontTouch.y}}px;left:{{fontTouch.x}}px;' animation="{{fontAnimationData}}">
+              <view  id='touchFont'>{{fontTouch.fontContent}}</view>
             </view>
           </view>
         </view>

customized/pages/made/madeImg/madeImg.wxss

@@ -108,6 +108,10 @@ page{
 .font-content{
   display: inline-block;
   position:relative;
+  width:218rpx;
+  height:218rpx;
+  border:2rpx dashed #e0e0e0;
+  overflow: hidden;
 }
 .del-box{
   padding:6rpx 16rpx;