屏幕截图中的Autodesk Markup定位错误

问题描述

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

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,canvas.width,canvas.height);
      ctx.drawImage(screenshot,canvas.height);
      markupCore.renderToCanvas(ctx,function () {
          // Convert canvas to Blob,then Blob to ArrayBuffer.
          canvas.toBlob((blob) => {
            CreateAndConnectMediawithBlob(ncrNo_,blob);   
            markupCore.leaveEditMode();
            markupCore.hide();
          },mimeType);
      },false);
  };
  createdViewer.getScreenShot(createdViewer.container.clientWidth,createdViewer.container.clientHeight,function (blobURL) {
    screenshot.src = blobURL;
  });
}

原始标记是

但是对于屏幕截图，我得到了

这是随机的，但是我确实注意到有时在（特别是与X轴一起）移动模型（或使用“ Pan”移动视图）时发生这种情况。

当我画画布或其他东西时有问题吗？

解决方法

添加到udda的答案中：

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

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

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

好吧，我想我可能已经发现我的代码丢失了，所以我在加载标记之前添加了以下代码

缺失点是“状态”

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,canvas.width,canvas.height);
      ctx.drawImage(screenshot,canvas.height);
      markupCore.renderToCanvas(ctx,function () {
          // Convert canvas to Blob,then Blob to ArrayBuffer.
          canvas.toBlob((blob) => {
            CreateAndConnectMediaWithBlob(ncrNo_,blob);   
            markupCore.leaveEditMode();
            markupCore.hide();
          },mimeType);
      },false);
  };
  createdViewer.getScreenShot(createdViewer.container.clientWidth,createdViewer.container.clientHeight,function (blobURL) {
    screenshot.src = blobURL;
  });
}

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

autodesk autodesk-forge autodesk-viewer