fix: insert image render error when scaling the page #433

src/editor/core/draw/Draw.ts

@@ -1116,11 +1116,12 @@ export class Draw {
             surplusWidth > 0
               ? surplusWidth
               : Math.min(elementWidth, availableWidth)
-          element.width = adaptiveWidth
+          const adaptiveHeight = (elementHeight * adaptiveWidth) / elementWidth
-          element.height = (elementHeight * adaptiveWidth) / elementWidth
+          element.width = adaptiveWidth / scale
-          metrics.width = element.width
+          element.height = adaptiveHeight / scale
-          metrics.height = element.height
+          metrics.width = adaptiveWidth
-          metrics.boundingBoxDescent = element.height
+          metrics.height = adaptiveHeight
+          metrics.boundingBoxDescent = adaptiveHeight
         } else {
           metrics.width = elementWidth
           metrics.height = elementHeight
@@ -1280,13 +1281,13 @@ export class Draw {
           }
         }
       } else if (element.type === ElementType.SEPARATOR) {
-        element.width = availableWidth
+        element.width = availableWidth / scale
         metrics.width = availableWidth
         metrics.height = defaultSize
         metrics.boundingBoxAscent = -rowMargin
         metrics.boundingBoxDescent = -rowMargin
       } else if (element.type === ElementType.PAGE_BREAK) {
-        element.width = availableWidth
+        element.width = availableWidth / scale
         metrics.width = availableWidth
         metrics.height = defaultSize
       } else if (
@@ -1294,9 +1295,9 @@ export class Draw {
         element.controlComponent === ControlComponent.CHECKBOX
       ) {
         const { width, height, gap } = this.options.checkbox
-        const elementWidth = (width + gap * 2) * scale
+        const elementWidth = width + gap * 2
         element.width = elementWidth
-        metrics.width = elementWidth
+        metrics.width = elementWidth * scale
         metrics.height = height * scale
       } else if (element.type === ElementType.TAB) {
         metrics.width = defaultTabWidth * scale

src/editor/core/draw/particle/PageBreak.ts

@@ -27,7 +27,7 @@ export class PageBreakParticle {
     const displayName = this.i18n.t('pageBreak.displayName')
     const { scale, defaultRowMargin } = this.options
     const size = fontSize * scale
-    const elementWidth = element.width!
+    const elementWidth = element.width! * scale
     const offsetY =
       this.draw.getDefaultBasicRowMarginHeight() * defaultRowMargin
     ctx.save()

src/editor/core/draw/particle/Separator.ts

@@ -16,7 +16,8 @@ export class SeparatorParticle {
     y: number
   ) {
     ctx.save()
-    ctx.lineWidth = this.options.scale
+    const { scale } = this.options
+    ctx.lineWidth = scale
     if (element.color) {
       ctx.strokeStyle = element.color
     }
@@ -26,7 +27,7 @@ export class SeparatorParticle {
     ctx.translate(0, 0.5) // 从1处渲染，避免线宽度等于3
     ctx.beginPath()
     ctx.moveTo(x, y)
-    ctx.lineTo(x + element.width!, y)
+    ctx.lineTo(x + element.width! * scale, y)
     ctx.stroke()
     ctx.restore()
   }