屏幕截图中的 Autodesk 标记定位错误答案

【问题标题】：Autodesk Markup positioning is wrong in the screenshot屏幕截图中的 Autodesk 标记定位错误
【发布时间】：2021-02-24 04:03:30
【问题描述】：

以下是我生成屏幕截图和标记的代码

function generateSnapshotWithMarkUp(ncrNo_, luName_, keyRef_, markupsStringData) {
  let screenshot = new Image();
  const mimeType = 'image/png';
  screenshot.onload = async function () {
      const markupCore = await createdViewer.loadExtension('Autodesk.Viewing.MarkupsCore');
      markupCore.show();
      markupCore.loadMarkups(markupsStringData, "layer1");
      let canvas = document.createElement('canvas');
      canvas.width = createdViewer.container.clientWidth;
      canvas.height = createdViewer.container.clientHeight;
      let ctx = canvas.getContext('2d');
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.drawImage(screenshot, 0, 0, canvas.width, canvas.height);
      markupCore.renderToCanvas(ctx, function () {
          // Convert canvas to Blob, then Blob to ArrayBuffer.
          canvas.toBlob((blob) => {
            CreateAndConnectMediaWithBlob(ncrNo_, luName_, keyRef_, blob);   
            markupCore.leaveEditMode();
            markupCore.hide();
          }, mimeType);
      }, false);
  };
  createdViewer.getScreenShot(createdViewer.container.clientWidth, createdViewer.container.clientHeight, function (blobURL) {
    screenshot.src = blobURL;
  });
}

原来的标记是

但是对于我得到的屏幕截图

这是随机的，但我确实注意到有时当您移动模型（或使用“平移”移动视图）时（特别是沿 X 轴）会发生这种情况。

是我画canvas还是别的什么东西有问题吗？？

【问题讨论】：

标签： autodesk-forge autodesk-viewer autodesk

【解决方案1】：

添加到udda的回答：

以下是标记与查看器相机保持同步的方式：

每当摄像头发生变化时，MarkupsCore 扩展程序都会调用自己的名为 onCameraChange 的方法来同步其标记的位置并相应地缩放
onCameraChange 方法调用扩展对象的另一个名为 getSvgViewBox 的方法来计算查看器画布所有四个角的“世界坐标”
然后使用世界坐标来指定 SVG 元素的 viewBox 属性

话虽如此，标记应始终保持同步，除非在您尝试生成屏幕截图之前由于某种原因未调用 onCameraChange 方法。尝试在方法中添加断点以查看它是否按预期调用。

【讨论】：

【解决方案2】：

好的，我想我可能已经发现我的代码缺少什么了，所以我在加载标记之前添加了以下代码

缺少的是“状态”

var viewerStatePersist = markUp_.viewer.getState()

然后在加载标记之前添加它

markup.viewer.restoreState(viewerStatePersist);

所以我的最终代码看起来像这样


function generateSnapshotWithMarkUp(ncrNo_, luName_, keyRef_, markupsStringData, viewerStatePersist) {
  let screenshot = new Image();
  const mimeType = 'image/png';
  screenshot.onload = async function () {
      const markupCore = await createdViewer.loadExtension('Autodesk.Viewing.MarkupsCore');
      markup.viewer.restoreState(viewerStatePersist);
      markupCore.show();
      markupCore.loadMarkups(markupsStringData, "layer1");
      let canvas = document.createElement('canvas');
      canvas.width = createdViewer.container.clientWidth;
      canvas.height = createdViewer.container.clientHeight;
      let ctx = canvas.getContext('2d');
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.drawImage(screenshot, 0, 0, canvas.width, canvas.height);
      markupCore.renderToCanvas(ctx, function () {
          // Convert canvas to Blob, then Blob to ArrayBuffer.
          canvas.toBlob((blob) => {
            CreateAndConnectMediaWithBlob(ncrNo_, luName_, keyRef_, blob);   
            markupCore.leaveEditMode();
            markupCore.hide();
          }, mimeType);
      }, false);
  };
  createdViewer.getScreenShot(createdViewer.container.clientWidth, createdViewer.container.clientHeight, function (blobURL) {
    screenshot.src = blobURL;
  });
}

不确定这是否是真正的解决方案，但对我有用......

【讨论】：