Autodesk Viewer API，不将标记渲染到新版本的屏幕截图画布
Posted
技术标签:
【中文标题】Autodesk Viewer API，不将标记渲染到新版本的屏幕截图画布【英文标题】：Autodesk Viewer API, not rendering markup to screenshot canvas for new version 【发布时间】：2018-05-24 00:12:01 【问题描述】：代码运行到 Viewer 的 2.15.* 版本，但不能在更高版本上运行。标记不会随图像一起显示。
/**
* Get's the markup data as a base 64 image.
*
* @param viewer
* @returns Promise
*/
service.getDataFromMarkup = function (viewer)
if (!viewer)
throw new Error('Viewer instance not provided');
let base64Img = viewer.getScreenShotBuffer();
return loadImageWithData(base64Img).then(img =>
let canvas = document.createElement('canvas');
let context = canvas.getContext('2d');
let markupCore = viewer.loadedExtensions['Autodesk.Viewing.MarkupsCore'];
let viewerBounds = viewer.container.getBoundingClientRect();
markupCore.generateData();
canvas.width = viewerBounds.width;
canvas.height = viewerBounds.height;
context.drawImage(img, 0, 0, viewerBounds.width, viewerBounds.height);
markupCore.renderToCanvas(context);
return canvas.toDataURL();
);
;
/**
* Returns an <img> DOM element with the provided image as a source.
*
* @param src
* @returns *
*/
function loadImageWithData(src)
return $q((resolve) =>
let img = new Image();
// Resolve with img element when the
// source image has been completely loaded.
img.onload = function ()
resolve(img);
;
img.src = src;
);
【问题讨论】：
标记扩展在 2.16 上发生了变化，见forge.autodesk.com/blog/… 我检查了博客，问题是标记渲染到画布中。我从 generateData() 函数获取标记的 svg-xml，也是图像的 base64，我创建了 2d 画布并将图像绘制到画布上下文中，然后使用 rendertoCanvas(context)。现在，画布不应该带有图像和标记吗？ 【参考方案1】：准备了在Viewer 3.3 上运行良好的测试示例代码。
请注意，我使用的是字符串 var markupSVG，其中包含 SVG 中标记的定义，代码会恢复此标记、捕获屏幕截图并恢复查看器（通过隐藏标记）。左边是查看器，右边是画布。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Snapshot with Markup</title>
<link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/style.min.css?v=v3.3" type="text/css">
</head>
<body>
<body onload="initializeViewer();" style="margin:0px; overflow:hidden">
<div style="width:49vw; height:100vh; position:relative; display:inline-block;">
<div id="viewer3d" style="margin:0;">
</div>
</div>
<div style="width:49vw; height:100vh;display:inline-block;">
<canvas id="snapshot" style="position:absolute;"></canvas>
<button onclick="snaphot();" style="position:absolute;">Snapshot!</button>
</div>
</body>
<!-- The Viewer JS -->
<script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/three.min.js"></script>
<script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/viewer3D.js?v=v3.3"></script>
<!-- Developer JS -->
<script>
var viewer;
function initializeViewer()
// initialize the viewer in "offline" mode (no security from Forge)
var myViewerDiv = document.getElementById('viewer3d');
viewer = new Autodesk.Viewing.Private.GuiViewer3D(myViewerDiv);
var options =
'env': 'Local',
'document': 'http://autodesk-forge.github.io/viewer-javascript-offline.sample/shaver/0.svf'
;
Autodesk.Viewing.Initializer(options, function ()
viewer.start(options.document, options);
viewer.addEventListener(Autodesk.Viewing.GEOMETRY_LOADED_EVENT, function ()
viewer.utilities.fitToView();
);
);
function snaphot()
var screenshot = new Image();
screenshot.onload = function ()
viewer.loadExtension('Autodesk.Viewing.MarkupsCore').then(function (markupCore)
// load the markups
markupCore.show();
markupCore.loadMarkups(markupSVG, "layerName");
// ideally should also restore state of Viewer for this markup
// prepare to render the markups
var canvas = document.getElementById('snapshot');
canvas.width = viewer.container.clientWidth;
canvas.height = viewer.container.clientHeight;
var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(screenshot, 0, 0, canvas.width, canvas.height);
markupCore.renderToCanvas(ctx);
// hide the markups
markupCore.hide();
);
;
// Get the full image
viewer.getScreenShot(viewer.container.clientWidth, viewer.container.clientHeight, function (blobURL)
screenshot.src = blobURL;
);
var markupSVG = '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="full" style="position:absolute; left:0; top:0; transform:scale(1,-1); -ms-transform:scale(1,-1); -webkit-transform:scale(1,-1); -moz-transform:scale(1,-1); -o-transform:scale(1,-1); transformOrigin:0, 0; -ms-transformOrigin:0, 0; -webkit-transformOrigin:0, 0; -moz-transformOrigin:0, 0; -o-transformOrigin:0, 0; " viewBox="-531.25 -1000 1062.5 2000" cursor="crosshair" pointer-events="painted"><metadata><markup_document xmlns="http://www.w3.org/1999/xhtml" data-model-version="4"></markup_document></metadata><g cursor="inherit" pointer-events="stroke"><metadata><markup_element xmlns="http://www.w3.org/1999/xhtml" stroke- stroke-linejoin="miter" stroke-color="#ff0000" stroke-opacity="1" fill-color="#ff0000" fill-opacity="0" type="cloud" position="-48.958333333333336 307.2916666666667" size="418.75 377.08333333333337" rotation="0"></markup_element></metadata><path id="markup" d="M -183.75000000000003 -142.59259259259264 a 20.416666666666668 20.37037037037037 0 1 1 20.416666666666668 -20.37037037037037 c 2.0416666666666674 -23.819444444444446 38.79166666666668 -23.819444444444446 40.83333333333334 0 c 2.0416666666666674 -23.819444444444446 38.79166666666668 -23.819444444444446 40.83333333333334 0 c 2.0416666666666674 -23.819444444444446 38.79166666666668 -23.819444444444446 40.83333333333334 0 c 2.0416666666666674 -23.819444444444446 38.79166666666668 -23.819444444444446 40.83333333333334 0 c 2.0416666666666674 -23.819444444444446 38.79166666666668 -23.819444444444446 40.83333333333334 0 c 2.0416666666666674 -23.819444444444446 38.79166666666668 -23.819444444444446 40.83333333333334 0 c 2.0416666666666674 -23.819444444444446 38.79166666666668 -23.819444444444446 40.83333333333334 0 c 2.0416666666666674 -23.819444444444446 38.79166666666668 -23.819444444444446 40.83333333333334 0 a 20.416666666666668 20.37037037037037 0 1 1 20.416666666666668 20.37037037037037 c 23.76543209876543 2.037037037037037 23.76543209876543 38.7037037037037 0 40.74074074074074 c 23.76543209876543 2.037037037037037 23.76543209876543 38.7037037037037 0 40.74074074074074 c 23.76543209876543 2.037037037037037 23.76543209876543 38.7037037037037 0 40.74074074074074 c 23.76543209876543 2.037037037037037 23.76543209876543 38.7037037037037 0 40.74074074074074 c 23.76543209876543 2.037037037037037 23.76543209876543 38.7037037037037 0 40.74074074074074 c 23.76543209876543 2.037037037037037 23.76543209876543 38.7037037037037 0 40.74074074074074 c 23.76543209876543 2.037037037037037 23.76543209876543 38.7037037037037 0 40.74074074074074 a 20.416666666666668 20.37037037037037 0 1 1 -20.416666666666668 20.37037037037037 c -2.0416666666666674 23.819444444444446 -38.79166666666668 23.819444444444446 -40.83333333333334 0 c -2.0416666666666674 23.819444444444446 -38.79166666666668 23.819444444444446 -40.83333333333334 0 c -2.0416666666666674 23.819444444444446 -38.79166666666668 23.819444444444446 -40.83333333333334 0 c -2.0416666666666674 23.819444444444446 -38.79166666666668 23.819444444444446 -40.83333333333334 0 c -2.0416666666666674 23.819444444444446 -38.79166666666668 23.819444444444446 -40.83333333333334 0 c -2.0416666666666674 23.819444444444446 -38.79166666666668 23.819444444444446 -40.83333333333334 0 c -2.0416666666666674 23.819444444444446 -38.79166666666668 23.819444444444446 -40.83333333333334 0 c -2.0416666666666674 23.819444444444446 -38.79166666666668 23.819444444444446 -40.83333333333334 0 a 20.416666666666668 20.37037037037037 0 1 1 -20.416666666666668 -20.37037037037037 c -23.76543209876543 -2.037037037037037 -23.76543209876543 -38.7037037037037 0 -40.74074074074074 c -23.76543209876543 -2.037037037037037 -23.76543209876543 -38.7037037037037 0 -40.74074074074074 c -23.76543209876543 -2.037037037037037 -23.76543209876543 -38.7037037037037 0 -40.74074074074074 c -23.76543209876543 -2.037037037037037 -23.76543209876543 -38.7037037037037 0 -40.74074074074074 c -23.76543209876543 -2.037037037037037 -23.76543209876543 -38.7037037037037 0 -40.74074074074074 c -23.76543209876543 -2.037037037037037 -23.76543209876543 -38.7037037037037 0 -40.74074074074074 c -23.76543209876543 -2.037037037037037 -23.76543209876543 -38.7037037037037 0 -40.74074074074074 z" stroke- stroke="rgba(255,0,0,1)" fill="none" transform="translate( -48.958333333333336 , 307.2916666666667 ) rotate( 0 )"/></g></svg>';
</script>
</body>
</html>
【讨论】：
我仍然没有看到来自 blobURL 的标记，我使用的是 chrome 63。 这可能是时间问题，您是否尝试在图像完全呈现在屏幕上几分钟后手动保存？ 我也面临同样的问题。我可以看到模型，但看不到标记！但是，如果我复制 svg 字符串并将其粘贴到 html 文档中，则会显示标记。以上是关于Autodesk Viewer API，不将标记渲染到新版本的屏幕截图画布的主要内容，如果未能解决你的问题，请参考以下文章
如何将 Autodesk 模型衍生 API 元数据中的 objectids 与 Forge Viewer 模型 dbids 匹配？
从 Autodesk Foge Viewer 获取数据（视图和数据 Api）
Autodesk forge viewer api v7.* 对齐多个 2d dwg 模型
Autodesk Forge Viewer 7.24.0 未加载模型