fix: fontHeight计算调整

Gitjinfeiyang · Mar 17, 2021 · ece3d75 · ece3d75
1 parent 515521b
commit ece3d75
Show file tree

Hide file tree

Showing 8 changed files with 29 additions and 13 deletions.
diff --git a/dist/easy-canvas.min.js b/dist/easy-canvas.min.js
diff --git a/dist/easy-canvas.min.js.map b/dist/easy-canvas.min.js.map
diff --git a/example/ui.js b/example/ui.js
@@ -89,11 +89,15 @@ function RadioGroup(c, { attrs, styles, on }, content) {
   const onItemClick = item => {
     selected && selected.setStyles({
       borderColor: '#ccc',
-      borderWidth: 0.5
+      borderWidth: 0.5,
+      width:14,
+      height:14
     })
     item.setStyles({
       borderColor: THEME.PRIMARY,
       borderWidth: 4,
+      width:6,
+      height:6
     })
     value = item.options.attrs.value
     selected = item

diff --git a/example/weapp/easy-canvas.min.js b/example/weapp/easy-canvas.min.js
diff --git a/lib/canvas-render.js b/lib/canvas-render.js
@@ -18,6 +18,10 @@ export default class CanvasRender {
     this.throttle = getThrottle(16)
   }
 
+  isDebug(){
+    return this.getLayer().options && this.getLayer().options.debug
+  }
+
   getCtx() {
     return this.layer.ctx
   }
@@ -212,8 +216,8 @@ export default class CanvasRender {
     }
 
     // for debug
-    if (this.getLayer().options && this.getLayer().options.debug) {
-      this.getCtx().strokeStyle = 'green'
+    if (this.isDebug()) {
+      this.getCtx().strokeStyle = element.debugColor || 'green'
       this.getCtx().strokeRect(element.contentX, element.contentY, element.renderStyles.contentWidth, element.renderStyles.contentHeight)
       // ctx.strokeStyle = '#fff'
       // ctx.strokeText(`${parseInt(this.contentX)} ${parseInt(this.contentY)} ${contentWidth} ${contentHeight}`, this.contentX + 100, this.contentY + 10)
@@ -288,7 +292,10 @@ export default class CanvasRender {
       } else {
         _x = x
       }
-      _y = (element.contentY + (lineHeight - element._layout.fontHeight) / 2 + lineHeight * index) - 1
+      _y = (element.contentY + ((lineHeight - element._layout.fontHeight) / 2) + lineHeight * index)
+      if(this.isDebug()){
+        this.getCtx().fillRect(_x,_y,2,2)
+      }
       this.getCtx().fillText(line.text, _x, _y)
       if (isWX() && element.renderStyles.fontWeight !== 400) {
         // 小程序 字体加粗不生效
@@ -323,13 +330,16 @@ export default class CanvasRender {
    */
   measureText(element, text) {
     let w = 0
+    let h = 0
     this._restore(() => {
       this.getCtx().font = element._getFont()
-      const { width } = this.getCtx().measureText(text)
+      const { width,fontBoundingBoxAscent } = this.getCtx().measureText(text)
       w = width
+      h = fontBoundingBoxAscent || element.renderStyles.fontSize * 0.8
     })
     return {
-      width: w
+      width: w,
+      fontHeight:h
     }
   }
 

diff --git a/lib/text.js b/lib/text.js
@@ -9,6 +9,7 @@ export default class Text extends Element {
     this._lines = []
     this.children += ''
     this.type = 'text'
+    this.debugColor = 'blue'
   }
 
   _paint() {
@@ -28,7 +29,6 @@ export default class Text extends Element {
 
   _measureLayout() {
     this._layout = this.getRender().measureText(this, this.children)
-    this._layout.fontHeight = this.renderStyles.fontSize * 0.8
     this._layout.height = this.renderStyles.lineHeight
     this._calcLine()
     return this._layout

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "easy-canvas-layout",
-  "version": "0.1.13",
+  "version": "0.1.14",
   "description": "A canvas lib help to easy layout in canvas.",
   "miniprogram": "lib",
   "main": "./lib/index.js",
@@ -25,4 +25,4 @@
     "rollup": "^2.28.2",
     "rollup-plugin-terser": "^7.0.0"
   }
-}
+}