Autodesk Forge调整图像大小后带Markups的截图位置偏移如何解决

问题原因 #

标记数据中的坐标是基于生成标记时的Viewer视图容器尺寸计算的，截图调整输出宽高后，标记渲染时未适配新的尺寸基准，因此出现位置偏移。

修复方案 #

你可以在渲染标记前，先临时将标记核心实例的尺寸设置为截图的目标尺寸，让标记自动适配新的坐标基准，渲染完成后再恢复原有尺寸避免影响页面正常显示，具体修改如下：

修改后的代码 #

function snapshot(width, height) {
    var screenshot = new Image();
    screenshot.onload = function () {
        let markupCore = MarkupsGui.core;
        // 先保存标记核心原有的尺寸，避免影响页面显示
        const originMarkupSize = markupCore.getSize();
        // 临时设置标记核心尺寸为截图目标尺寸，适配坐标
        markupCore.setSize(width, height);

        let div = document.getElementById('containerComments');
        let checked = [];
        if (div) {
            checked = Array.from(div.getElementsByTagName('input')).filter(e => e.checked);
        }

        if (checked.length === 0) {
            renderToCanvas(screenshot, width, height);
            // 无标记时也要恢复原有尺寸
            markupCore.setSize(originMarkupSize.width, originMarkupSize.height);
        } else {
            for (let i = 0; i < checked.length; i++) {
                var selectedNode = checked[i].value;
                var markupSVG = Markups.find(m => m.ID_MARKUP === parseInt(selectedNode));
                markupCore.show();
                markupCore.loadMarkups(markupSVG.MARKUP_DATA, "layerName_" + i);
            }
            //Add markups in canvas
            markupCore.renderToCanvas(renderToCanvas(screenshot, width, height), null, true);
            // 渲染完成后恢复标记核心原有尺寸
            markupCore.setSize(originMarkupSize.width, originMarkupSize.height);
        }
    };
    // Get the full image
    _viewer.getScreenShot(width, height, function (blobURL) {
        screenshot.src = blobURL;
    });
}

function renderToCanvas(screenshot, width, height) {
    var canvas = document.getElementById('snapshot_stor');
    canvas.width = width;
    canvas.height = height;
    var ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(screenshot, 0, 0, canvas.width, canvas.height);
    return ctx;
}

注意事项 #

如果截图的宽高比和生成标记时的视图宽高比不一致，标记可能会出现拉伸变形，建议在用户调整截图尺寸时锁定宽高比，与Viewer视图的原始比例保持一致。

内容的提问来源于stack exchange，提问作者Édipo Fernandes