fix: scaling table and separator elements error #326

Hufe921 · Nov 23, 2023 · b3354ac · b3354ac
1 parent f0823d7
commit b3354ac
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 3 deletions.
diff --git a/src/editor/core/draw/Draw.ts b/src/editor/core/draw/Draw.ts
@@ -199,7 +199,7 @@ export class Draw {
     this.footer = new Footer(this, data.footer)
     this.hyperlinkParticle = new HyperlinkParticle(this)
     this.dateParticle = new DateParticle(this)
-    this.separatorParticle = new SeparatorParticle()
+    this.separatorParticle = new SeparatorParticle(this)
     this.pageBreakParticle = new PageBreakParticle(this)
     this.superscriptParticle = new SuperscriptParticle()
     this.subscriptParticle = new SubscriptParticle()
@@ -1128,7 +1128,7 @@ export class Draw {
             const rowHeight = rowList.reduce((pre, cur) => pre + cur.height, 0)
             td.rowList = rowList
             // 移除缩放导致的行高变化-渲染时会进行缩放调整
-            const curTdHeight = (rowHeight + tdPaddingHeight) / scale
+            const curTdHeight = rowHeight / scale + tdPaddingHeight
             // 内容高度大于当前单元格高度需增加
             if (td.height! < curTdHeight) {
               const extraHeight = curTdHeight - td.height!

diff --git a/src/editor/core/draw/particle/CheckboxParticle.ts b/src/editor/core/draw/particle/CheckboxParticle.ts
@@ -22,7 +22,7 @@ export class CheckboxParticle {
     } = this.options
     const { metrics, checkbox } = element
     // left top 四舍五入避免1像素问题
-    const left = Math.round(x + gap)
+    const left = Math.round(x + gap * scale)
     const top = Math.round(y - metrics.height + lineWidth)
     const width = metrics.width - gap * 2 * scale
     const height = metrics.height

diff --git a/src/editor/core/draw/particle/Separator.ts b/src/editor/core/draw/particle/Separator.ts
@@ -1,12 +1,22 @@
+import { DeepRequired } from '../../../interface/Common'
+import { IEditorOption } from '../../../interface/Editor'
 import { IRowElement } from '../../../interface/Row'
+import { Draw } from '../Draw'
 export class SeparatorParticle {
+  private options: DeepRequired<IEditorOption>
+
+  constructor(draw: Draw) {
+    this.options = draw.getOptions()
+  }
+
   public render(
     ctx: CanvasRenderingContext2D,
     element: IRowElement,
     x: number,
     y: number
   ) {
     ctx.save()
+    ctx.lineWidth = this.options.scale
     if (element.color) {
       ctx.strokeStyle = element.color
     }

diff --git a/src/editor/core/draw/particle/table/TableParticle.ts b/src/editor/core/draw/particle/table/TableParticle.ts
@@ -157,6 +157,7 @@ export class TableParticle {
     // 仅外边框
     const isExternalBorderType = borderType === TableBorder.EXTERNAL
     ctx.save()
+    ctx.lineWidth = scale
     // 渲染边框
     if (!isEmptyBorderType) {
       this._drawOuterBorder({