update: 内容编辑时重新获取底图渲染markup

packages/core/src/annotation/layer.js

@@ -398,7 +398,8 @@ class ComPDFAnnotationLayer {
             eventBus: this.eventBus,
             layer: this,
             enableReply,
-            pageViewer: this.pageViewer
+            pageViewer: this.pageViewer,
+            messageHandler: this.messageHandler
           })
           this.annotationsArray.push(markup)
         } else if (annotation.type === 'line' && !annotation.isDelete) {
@@ -722,7 +723,8 @@ class ComPDFAnnotationLayer {
         eventBus: this.eventBus,
         layer: this,
         enableReply,
-        pageViewer: this.pageViewer
+        pageViewer: this.pageViewer,
+        messageHandler: this.messageHandler
       })
       this.annotationsArray.push(markup)
     } else if (annotation.type === 'line' || annotation.type === 'arrow') {
@@ -978,7 +980,7 @@ class ComPDFAnnotationLayer {
 
   // 在canvas上重绘markup
   redrawMarkups (data) {
-    const { pageIndex, afterContentEdit, rect } = data
+    const { pageIndex, afterContentEdit, pagePtr, rect } = data
     if (pageIndex !== this.page) return
 
     if (!afterContentEdit) {
@@ -992,8 +994,8 @@ class ComPDFAnnotationLayer {
       const annotObj = this.annotationsArray[i]
       const { annotation, positionArray } = annotObj
       if (!annotation.isDelete && this.markupType.includes(annotation.type)) {
-        const drawMethod = afterContentEdit ? annotObj.drawIntersectionalCanvas : annotObj.drawCanvas
-        drawMethod.call(annotObj, afterContentEdit ? rect : positionArray)
+        const drawMethod = afterContentEdit ? annotObj.reRenderAfterContentEdit : annotObj.drawCanvas
+        drawMethod.call(annotObj, afterContentEdit ? { pagePtr, rect } : positionArray)
       }
     }
   }

packages/core/src/editor/text_editor.js

@@ -1180,7 +1180,8 @@ export class TextEditor {
     this.eventBus.dispatch('redrawMarkups', {
       pageIndex: this.pageViewer.pageIndex,
       afterContentEdit: true,
-      rect: this.getEntireArea(this.oldRect, this.rect)
+      rect: this.getEntireArea(this.oldRect, this.rect),
+      pagePtr: this.pagePtr
     })
   }
 

packages/core/src/markup/text_annotation.js

@@ -14,7 +14,8 @@ class TextAnnotation extends BaseAnnotation {
     layer,
     show = false,
     enableReply = true,
-    pageViewer
+    pageViewer,
+    messageHandler
   }) {
     super({
       container,
@@ -28,6 +29,7 @@ class TextAnnotation extends BaseAnnotation {
     this.enableReply = enableReply
     this.layer = layer
     this.pageViewer = pageViewer
+    this.messageHandler = messageHandler
     this.hidden = true
     this.markupContainer = null
     this.outerLineContainer = null
@@ -339,12 +341,39 @@ class TextAnnotation extends BaseAnnotation {
     }
   }
 
-  // 重绘交集区域
-  drawIntersectionalCanvas(rect) {
-    const intersectionArray = this.positionArray
-      .map(posRect => this.getIntersection(posRect, rect))
-      .filter(intersection => intersection)
-    this.drawCanvas(intersectionArray)
+  // 重新获取底图并渲染
+  async reRenderAfterContentEdit({ pagePtr, rect }) {
+    const rect1 = this.rect
+    const rect2 = rect
+
+    if (rect1.left > rect2.left + rect2.width ||
+      rect1.left + rect1.width < rect2.left ||
+      rect1.top > rect2.top + rect2.height ||
+      rect1.top + rect1.height < rect2.top
+    ) return
+
+    const imgRect = {
+      left: parseInt(this.rect.left * this.ratio),
+      top: parseInt(this.rect.top * this.ratio),
+      right: parseInt(this.rect.left * this.ratio) + parseInt(this.rect.width * this.ratio),
+      bottom: parseInt(this.rect.top * this.ratio) + parseInt(this.rect.height * this.ratio),
+      width: parseInt(this.rect.width * this.ratio),
+      height: parseInt(this.rect.height * this.ratio)
+    }
+
+    const { imageArray } = await this.messageHandler.sendWithPromise('PushRenderTask', {
+      pagePtr,
+      scale: this.scale * this.ratio,
+      top: imgRect.top,
+      left: imgRect.left,
+      right: imgRect.right,
+      bottom: imgRect.bottom
+    })
+    const imageData = this.ctx.createImageData(parseInt(imgRect.width), parseInt(imgRect.height))
+    imageData.data.set(imageArray)
+    this.ctx.clearRect(imgRect.left, imgRect.top, imgRect.width, imgRect.height)
+    this.ctx.putImageData(imageData, imgRect.left, imgRect.top)
+    this.drawCanvas(this.positionArray)
   }
 
   // 获取两个rect交集区域