feat:处理渲染元素位置计算浏览器兼容性

src/editor/core/cursor/Cursor.ts

@@ -33,21 +33,25 @@ export class Cursor {
     if (!cursorPosition) return
     // 设置光标代理
     const { metrics, coordinate: { leftTop, rightTop }, ascent } = cursorPosition
-    const height = metrics.boundingBoxAscent + metrics.boundingBoxDescent
+    // 增加1/4字体大小
+    const offsetHeight = metrics.height / 4
+    const cursorHeight = metrics.height + offsetHeight * 2
     const agentCursorDom = this.cursorAgent.getAgentCursorDom()
     setTimeout(() => {
       agentCursorDom.focus()
       agentCursorDom.setSelectionRange(0, 0)
     })
-    const cursorTop = leftTop[1] + ascent - metrics.boundingBoxAscent
+    // fillText位置 + 文字基线到底部距离  - 模拟光标偏移量
+    const descent = metrics.boundingBoxDescent < 0 ? 0 : metrics.boundingBoxDescent
+    const cursorTop = (leftTop[1] + ascent) + descent - (cursorHeight - offsetHeight)
     const curosrleft = rightTop[0]
     agentCursorDom.style.left = `${curosrleft}px`
-    agentCursorDom.style.top = `${cursorTop + height - CURSOR_AGENT_HEIGHT}px`
+    agentCursorDom.style.top = `${cursorTop + cursorHeight - CURSOR_AGENT_HEIGHT}px`
     // 模拟光标显示
     this.cursorDom.style.left = `${curosrleft}px`
     this.cursorDom.style.top = `${cursorTop}px`
     this.cursorDom.style.display = 'block'
-    this.cursorDom.style.height = `${height}px`
+    this.cursorDom.style.height = `${cursorHeight}px`
     setTimeout(() => {
       this.cursorDom.classList.add('cursor--animation')
     }, 200)

src/editor/core/draw/Draw.ts

@@ -190,11 +190,13 @@ export class Draw {
       const rowMargin = defaultBasicRowMarginHeight * (element.rowMargin || defaultRowMargin)
       let metrics: IElementMetrics = {
         width: 0,
+        height: 0,
         boundingBoxAscent: 0,
         boundingBoxDescent: 0
       }
       const innerWidth = rightTopPoint[0] - leftTopPoint[0]
       if (element.type === ElementType.IMAGE) {
+        metrics.height = element.height!
         // 图片超出尺寸后自适应
         if (curRow.width + element.width! > innerWidth) {
           // 计算剩余大小
@@ -206,11 +208,12 @@ export class Draw {
         metrics.boundingBoxAscent = 0
         metrics.boundingBoxDescent = element.height!
       } else {
+        metrics.height = element.size || this.options.defaultSize
         this.ctx.font = this.getFont(element)
         const fontMetrics = this.ctx.measureText(element.value)
         metrics.width = fontMetrics.width
-        metrics.boundingBoxAscent = fontMetrics.fontBoundingBoxAscent
-        metrics.boundingBoxDescent = fontMetrics.fontBoundingBoxDescent
+        metrics.boundingBoxAscent = fontMetrics.actualBoundingBoxAscent
+        metrics.boundingBoxDescent = fontMetrics.actualBoundingBoxDescent
       }
       const ascent = metrics.boundingBoxAscent + rowMargin
       const descent = metrics.boundingBoxDescent + rowMargin
@@ -244,7 +247,7 @@ export class Draw {
     let y = leftTopPoint[1]
     let index = 0
     for (let i = 0; i < rowList.length; i++) {
-      const curRow = rowList[i];
+      const curRow = rowList[i]
       // 计算行偏移量（行居左、居中、居右）
       if (curRow.rowFlex && curRow.rowFlex !== RowFlex.LEFT) {
         const canvasInnerWidth = this.canvas.width - margins[1] - margins[3]

src/editor/index.ts

@@ -21,7 +21,7 @@ export default class Editor {
       defaultFont: 'Yahei',
       defaultSize: 16,
       defaultRowMargin: 1,
-      defaultBasicRowMarginHeight: 5,
+      defaultBasicRowMarginHeight: 8,
       underlineColor: '#000000',
       strikeoutColor: '#FF0000',
       rangeAlpha: 0.6,

src/editor/interface/Element.ts

@@ -3,6 +3,7 @@ import { RowFlex } from "../dataset/enum/Row"
 
 export interface IElementMetrics {
   width: number;
+  height: number;
   boundingBoxAscent: number;
   boundingBoxDescent: number;
 }