在PDFTron中一次绘制多个注释

问题描述

我正在尝试在PDFTron上添加Guidance Grid，以便用户可以轻松添加注释。稍后，如果用户正在移动注解，并且注解靠近网格线，则应将其获取到该网格线。作为第一部分，我试图绘制一个指导网格。

以下是我到目前为止添加的代码：

WebViewer({
        licenseKey: '',path: './public/webviewer',css: './css/pdftron-custom.css'
},document.getElementById('pdfEditor') as HTMLElement).then(async(instance: WebViewerInstance) => {
    webViewerInstance = instance;
    webViewerInstance.docViewer.on('documentLoaded',async() => {
            await this.loadAnnotations();
            const pagesCount = docViewer.getPageCount();
            let pageLoop;
            let pageWidthCount;
            const pageNumber = docViewer.getCurrentPage();
            const pageWidth = docViewer.getPageWidth(pageNumber);
            const pageHeight = docViewer.getPageHeight(pageNumber);
            const instanceAnnotations = webViewerInstance.Annotations;

            for (pageLoop = 1; pageLoop <= pagesCount; pageLoop++) {
                for (pageWidthCount = 20; pageWidthCount < pageWidth;) {
                    const lineAnnot = new instanceAnnotations.LineAnnotation();
                    lineAnnot.PageNumber = pageLoop;
                    lineAnnot.setStartPoint(pageWidthCount,0);
                    lineAnnot.setEndPoint(pageWidthCount,pageHeight);
                    lineAnnot.strokeColor = new instanceAnnotations.Color(144,144,1);
                    lineAnnot.strokeThickness = 1;
                    lineAnnot.ReadOnly = true;
                    lineAnnot.Printable = false;
                    lineAnnot.Listable = false;
                    lineAnnot.Author = annotManager.getCurrentUser();
                    annotManager.addAnnotation(lineAnnot,false);
                    annotManager.redrawAnnotation(lineAnnot);
                    pageWidthCount = pageWidthCount + 20;
                }
            }
    });
});

如您所见，我正在添加注解，还尝试在循环内绘制该注解，从而导致性能问题。所以我的问题是：
有没有一种方法可以在循环内添加注释，然后刷新文档，从而提高页面速度（或者如果您有其他方法可以这样做）？
侧面问题：如何添加虚线？
旁注-用户将无法在上述行注释上执行任何操作。它是只读的。

解决方法

您可以将注释收集到数组中，然后调用

const allAnnotations = [];

///... for loop here to collect all the annotations

annotManager.addAnnotations(allAnnotations);
annotManager.drawAnnotationsFromList(allAnnotations);

javascript pdftron vue.js