cesh

customized/pages/canvas/canvas.js

@@ -1,20 +1,5 @@
 // customized/pages/canvas/canvas.js
 Page({
-  onReady: function (e) {
-    var cxt_rotate = wx.createContext();//创建并返回绘图上下文context对象。
-    var rotate = 0;//默认旋转角度为为0
-    setInterval(function () { //无限循环定时函数    
-      cxt_rotate.translate(150, 100);//设置坐标系坐标
-      rotate++;//旋转角度自增1
-      cxt_rotate.rotate(rotate * Math.PI / 180)//设置旋转的角度
-      cxt_rotate.rect(0, 0, 50, 50)//设置坐标(0,0)，相对于坐标系坐标，边长为为50px的正方形
-      cxt_rotate.stroke();//对当前路径进行描边
-      wx.drawCanvas({
-        canvasId: 'canvasAutoRotate',//画布标识，对应的cavas-id
-        actions: cxt_rotate.getActions()//导出context绘制的直线并显示到页面
-      });
-    }, 1)
-  },
 
   /**
    * 页面的初始数据
@@ -43,19 +28,17 @@ Page({
   onShow: function () {
     
     let ctx = wx.createCanvasContext('fontBox');
+    ctx.textBaseline = 'top';
+    // ctx.textAlign = "center";
     ctx.setFontSize(20);
-    let rotate = 0
-    
-    // setInterval(()=>{
-    //   rotate++;
-    // ctx.translate(0, 0)
-      ctx.rotate(rotate * Math.PI / 180);
-      
-      console.log(rotate)
-      ctx.fillText('abcdefg', 0, 0);
-    // },2000)
+    let rotate = 50
+    // ctx.translate(50,50)
+    ctx.rotate(rotate * Math.PI / 180);
+    // ctx.translate(50, 0)
+    ctx.fillText('王',20, 20);
     
     ctx.draw();
+    ctx.restore()
   },
 
 })

customized/pages/canvas/canvas.wxml

@@ -2,4 +2,3 @@
 <canvas canvas-id="fontBox" class="fontBox"></canvas>
 
 
-<canvas canvas-id="canvasAutoRotate" class="fontBox"></canvas>

customized/pages/made/comb/comb.js

@@ -202,25 +202,23 @@ Page({
     
   },
   getCombFont(that,i,_static) {
-    let fontTouch = null,dataPositionObj = null;
+    let fontTouch = null, dataPositionObj = null, simulationFont=null;
     if (wx.getStorageSync('madeCupFontData' + i)) {
       fontTouch = wx.getStorageSync('madeCupFontData' + i);
+      simulationFont = wx.getStorageSync('simulationFont' + i);
       dataPositionObj = util.changeCup(i.toString()).dataPositionObj;
       const ctx = wx.createCanvasContext('comb-font'+i);
+      ctx.textBaseline = 'top';
       ctx.setFontSize(fontTouch.fontSize);
       ctx.setFillStyle(fontTouch.isColor);
-      // ctx.translate(0, fontTouch.height / 5 * 4);
-      // ctx.save();
-      let movex = fontTouch.x + fontTouch.width / 2;
-      let movey = fontTouch.y +fontTouch.height / 2;
+      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.translate(-movex, -movey);
-      // ctx.rotate(fontTouch.angle * Math.PI / 180);
-      // ctx.fillText(fontTouch.fontContent, 0, 0);
-      // ctx.translate(fontTouch.x, fontTouch.y + fontTouch.height / 5 * 4);
-      ctx.fillText(fontTouch.fontContent, fontTouch.x, fontTouch.y +fontTouch.height / 5 * 4);
-
+      ctx.fillText(fontTouch.fontContent, -metrics.width / 2, -simulationFont.height / 2);
+      
+      console.log(metrics,"文本的宽度")
       ctx.draw(false,function () {
         wx.canvasToTempFilePath({
           canvasId: 'comb-font'+i,

customized/pages/made/made.js

@@ -40,6 +40,11 @@ Page({
     rpx: 1, // 获取页面的rpx
     imgSrcArray: [],
     imgBuildArray: [], // 生成后图片的数组
+    simulation:{ // 模拟字体，获取字体的宽高
+      fontContent:'',
+      fontSize:'',
+      height:'',
+    }
   },
 
   /**
@@ -179,6 +184,11 @@ Page({
         that.setData({
           fontAnimationData: that.fontAnimation.export(),
         })
+        that.setData({
+          'simulation.fontContent': madeTouchFont.fontContent,
+          'simulation.fontSize': madeTouchFont.fontSize
+        })
+        that.getTouchFontInformation(that)
       }
 
 
@@ -246,6 +256,17 @@ Page({
       })
     }
   },
+  getTouchFontInformation(that) {
+    let query = wx.createSelectorQuery();
+    query.select('#simulation').boundingClientRect()
+    query.exec(function (res) {
+      console.log(res, "获取font的宽高");
+      that.setData({
+        'simulation.height': res[0].height
+      });
+      wx.setStorageSync('simulationFont' + that.data.isActive, that.data.simulation);
+    })
+  },
   // getBuildImg(that) {
   //   for (let i = 1; i <= 1; i++) {
   //     if (wx.getStorageSync('madeCupImgData' + i) || wx.getStorageSync('madeCupFontData' + i)) {

customized/pages/made/made.wxml

@@ -24,7 +24,7 @@
         </view>
       </view>
       <!-- font -->
-     <view wx:if="{{!touchStatic}}" class='made-prompt made-font' style='color:{{fontTouch.isColor}};font-size:{{fontTouch.fontSize}}px;width:{{dataPositionObj.width}}rpx;height:{{dataPositionObj.height}}rpx'>
+     <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>
@@ -54,6 +54,8 @@
 
 </view>
 
+<view class='font-height' style='font-size:{{simulation.fontSize}}px;position:fixed;top:999999999999999999999rpx;' id='simulation'>{{simulation.fontContent}}</view>
+
 
 <!-- <view style="position:fixed;top:999999999999999999999rpx;"> -->
 

customized/pages/made/made.wxss

@@ -120,4 +120,7 @@ page{
 }
 .comb-font{
   background:#2e8aec;
+}
+.font-height{
+  color:red;
 }

readme.md

@@ -22,3 +22,7 @@
 https://blog.csdn.net/wangjiang_qianmo/article/details/73180042  
 ### 文字是根据基线规律
 ### https://blog.csdn.net/u012551350/article/details/51361778    
+
+
+## canvas 绘制文字中点
+https://blog.csdn.net/sleepwalker_1992/article/details/80571333