From 99f85890331508d5f642fde6c85e2ca5665412ec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=84=E4=BA=91=E9=A3=9E?= <huangyunfeihufe@hotmail.com>
Date: Mon, 22 Nov 2021 16:42:39 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E5=A4=84=E7=90=86=E6=B8=B2=E6=9F=93?=
 =?UTF-8?q?=E5=85=83=E7=B4=A0=E4=BD=8D=E7=BD=AE=E8=AE=A1=E7=AE=97=E6=B5=8F?=
 =?UTF-8?q?=E8=A7=88=E5=99=A8=E5=85=BC=E5=AE=B9=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/editor/core/cursor/Cursor.ts | 12 ++++++++----
 src/editor/core/draw/Draw.ts     |  9 ++++++---
 src/editor/index.ts              |  2 +-
 src/editor/interface/Element.ts  |  1 +
 4 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/editor/core/cursor/Cursor.ts b/src/editor/core/cursor/Cursor.ts
index 6d40a65..edfbd9c 100644
--- a/src/editor/core/cursor/Cursor.ts
+++ b/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)
diff --git a/src/editor/core/draw/Draw.ts b/src/editor/core/draw/Draw.ts
index bb6eaac..c534314 100644
--- a/src/editor/core/draw/Draw.ts
+++ b/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]
diff --git a/src/editor/index.ts b/src/editor/index.ts
index 82b30f0..c3f04aa 100644
--- a/src/editor/index.ts
+++ b/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,
diff --git a/src/editor/interface/Element.ts b/src/editor/interface/Element.ts
index eabf798..614c026 100644
--- a/src/editor/interface/Element.ts
+++ b/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;
 }