fix:continuity page render error in lazy mode

Hufe921 · Mar 3, 2023 · ff06e50 · ff06e50
1 parent dc54622
commit ff06e50
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 11 deletions.
diff --git a/src/editor/core/draw/Draw.ts b/src/editor/core/draw/Draw.ts
@@ -198,13 +198,13 @@ export class Draw {
     return Math.floor(this.options.height * this.options.scale)
   }
 
-  public getCanvasWidth(): number {
-    const page = this.getPage()
+  public getCanvasWidth(pageNo = -1): number {
+    const page = this.getPage(pageNo)
     return page.width
   }
 
-  public getCanvasHeight(): number {
-    const page = this.getPage()
+  public getCanvasHeight(pageNo = -1): number {
+    const page = this.getPage(pageNo)
     return page.height
   }
 
@@ -289,8 +289,8 @@ export class Draw {
     this.pageNo = payload
   }
 
-  public getPage(): HTMLCanvasElement {
-    return this.pageList[this.pageNo]
+  public getPage(pageNo = -1): HTMLCanvasElement {
+    return this.pageList[~pageNo ? pageNo : this.pageNo]
   }
 
   public getPageList(): HTMLCanvasElement[] {
@@ -482,6 +482,8 @@ export class Draw {
       const canvas = this.pageList[0]
       canvas.style.height = `${height}px`
       canvas.height = height * dpr
+      // canvas尺寸发生变化，上下文被重置
+      this.ctxList[0].scale(dpr, dpr)
     }
     this.render({
       isSubmitHistory: false,
@@ -896,6 +898,7 @@ export class Draw {
         pageDom.style.height = `${reduceHeight}px`
         pageDom.height = reduceHeight * dpr
       }
+      this.ctxList[0].scale(dpr, dpr)
     } else {
       for (let i = 0; i < this.rowList.length; i++) {
         const row = this.rowList[i]
@@ -1095,7 +1098,7 @@ export class Draw {
     // 绘制背景
     this.background.render(ctx)
     // 绘制页边距
-    this.margin.render(ctx)
+    this.margin.render(ctx, pageNo)
     // 渲染元素
     const index = rowList[0].startIndex
     this._drawRow(ctx, {
@@ -1143,6 +1146,7 @@ export class Draw {
   }
 
   public render(payload?: IDrawOption) {
+    const { pageMode } = this.options
     const {
       isSubmitHistory = true,
       isSetCursor = true,
@@ -1185,7 +1189,8 @@ export class Draw {
         .forEach(page => page.remove())
     }
     // 绘制元素
-    if (isLazy) {
+    // 连续页因为有高度的变化会导致canvas渲染空白，需立即渲染，否则会出现闪动
+    if (isLazy && pageMode === PageMode.PAGING) {
       this._lazyRender()
     } else {
       this._immediateRender()

diff --git a/src/editor/core/draw/frame/Margin.ts b/src/editor/core/draw/frame/Margin.ts
@@ -12,11 +12,11 @@ export class Margin {
     this.options = draw.getOptions()
   }
 
-  public render(ctx: CanvasRenderingContext2D) {
+  public render(ctx: CanvasRenderingContext2D, pageNo: number) {
     const { marginIndicatorColor, pageMode } = this.options
     const width = this.draw.getWidth()
     const height = pageMode === PageMode.CONTINUITY
-      ? this.draw.getCanvasHeight()
+      ? this.draw.getCanvasHeight(pageNo)
       : this.draw.getHeight()
     const margins = this.draw.getMargins()
     const marginIndicatorSize = this.draw.getMarginIndicatorSize()

diff --git a/src/editor/core/draw/frame/PageNumber.ts b/src/editor/core/draw/frame/PageNumber.ts
@@ -16,7 +16,7 @@ export class PageNumber {
     const { pageNumberSize, pageNumberFont, scale, pageMode } = this.options
     const width = this.draw.getWidth()
     const height = pageMode === PageMode.CONTINUITY
-      ? this.draw.getCanvasHeight()
+      ? this.draw.getCanvasHeight(pageNo)
       : this.draw.getHeight()
     const pageNumberBottom = this.draw.getPageNumberBottom()
     ctx.save()