使用多层伪造 MarkupUtils renderToCanvas？

Posted 2023-03-16

【中文标题】使用多层伪造 MarkupUtils renderToCanvas？

【英文标题】：Forge MarkupUtils renderToCanvas with multiple layers?

【发布时间】：2021-02-22 12:58:46

【问题描述】：

我们目前将一个 PDF 加载到 Forge 查看器中，其中包含多个标记层（使用自定义 DrawMode 创建），每个层的可见性都是可切换的。

我们希望让用户能够打印他们当前看到的内容（带有分层标记的 PDF）。我能够找到提供潜在打印解决方案的帖子（使用画布、getScreenshot 和 MarkupUtils renderToCanvas）。 示例帖子：Autodesk Forge get screenshot with markups

这个解决方案起初看起来效果很好，但我注意到只有一个标记层被渲染到画布上（似乎是最后一个添加的），其他层被忽略了。

所有标记都已加载并在屏幕上可见。此外，如果我隐藏该层，它仍然会被打印出来。

有没有办法使用 renderToCanvas 从所有加载的标记层添加标记？ 或者任何潜在的已知解决方法？

任何帮助表示赞赏。提前致谢。

我编写的函数的代码 sn-p 有效（但仅加载最近添加的层）。

export const printViewerToPDF = (markupsCore: MarkupsCore, jsPDF: any) => 
    // Create new image
    var screenshot = new Image();

    // Get the canvas element
    var canvas = document.getElementById('snapshot') as htmlCanvasElement;

    // Fit canvas to match viewer
    if (canvas) 
        canvas.width = markupsCore.bounds.width;
        canvas.height = markupsCore.bounds.height;

        // Create a context
        var ctx = canvas.getContext('2d');

        // Clear
        if (ctx) 
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.drawImage(screenshot, 0, 0, canvas.width, canvas.height);
        

        // Screenshot viewer and render to canvas
        markupsCore.viewer.getScreenShot(canvas.width, canvas.height, function(
            blobUrl: any,
        ) 
            screenshot.onload = function() 
                if (ctx) 
                    ctx.drawImage(screenshot, 0, 0);
                
            ;

            screenshot.src = blobUrl;
        );

        // Render markup to canvas
        setTimeout(function() 
            markupsCore.renderToCanvas(ctx, function() 
                var pdf = new jsPDF('l', 'px', [canvas.height, canvas.width]);
                pdf.addImage(ctx!.canvas, 0, 0, canvas.width, canvas.height);
                pdf.save(Date.now().toString() + '.pdf');
            );
        , 300);
    
;

【参考方案1】：

renderToCanvas 方法如下所示（您可以在 https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/extensions/Markup/Markup.js 中找到它）：

MarkupsCore.prototype.renderToCanvas = function(context, callback, renderAllMarkups) 

        var width = this.bounds.width;
        var height = this.bounds.height;
        var viewBox = this.getSvgViewBox(width, height);
        var numberOfScreenshotsTaken = 0;
        var markups = [];
        var layer;

        var onMarkupScreenshotTaken = function () 
            if (callback && (++numberOfScreenshotsTaken === markups.length)) 
                callback();
            
        .bind(this);

        if (renderAllMarkups) 
            var svgKeys = Object.keys(this.svg.childNodes);
            var layersKeys = Object.keys(this.svgLayersMap);

            // Append only markups that their parent layer is contained inside the svg main container.
            for (var i = 0; i < svgKeys.length; i++)                 
                for (var j = 0; j < layersKeys.length; j++) 
                    layer = this.svgLayersMap[layersKeys[j]];
                    if (this.svg.childNodes[svgKeys[i]] === layer.svg) 
                        markups = markups.concat(layer.markups);
                    
                
            
         else 
            layer = this.svgLayersMap[this.activeLayer] || this.editModeSvgLayerNode;
            markups = layer.markups;
        

        if (markups.length === 0) 
            callback();
         else 
            markups.forEach(function(markup) 
                markup.renderToCanvas(context, viewBox, width, height, onMarkupScreenshotTaken);
            );
        
    ;

如您所见，如果您未定义第三个参数或设置为false，则只会呈现来自 活动 层的标记。如果将第三个参数设置为true，则应呈现所有层的标记。

在为列表中的每个项目调用markup.renderToCanvas 之前，尝试自己进入该方法并仔细检查标记列表。

【讨论】：

不敢相信我错过了，这些链接非常有用。我添加了 true 作为第三个参数，所有的都显示了！真的很感谢你的时间，只是在这个领域找到我的方式。再次感谢。