在 PDFTron 中一次绘制多个注释

Question

我正在尝试在 PDFTron 上添加指导网格，以便用户可以轻松添加注释。稍后，如果用户正在移动注释并且它靠近网格线，那么它应该被提取到该网格线。作为第一部分，我尝试绘制一个指导网格。

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

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, 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;
                }
            }
    });
});

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

Answer 1

可以将注解收集到一个数组中，然后调用

const allAnnotations = [];

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

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

在 PDFTron 中一次绘制多个注释

Draw multiple annotation at once in PDFTron

javascript

pdftron

vue.js