CODEWITHSUNDEEP
autodesk-forgeautodesk-viewerautodesk
udda
udda

Reputation: 93

Autodesk Markup positioning is wrong in the screenshot

following is my code to generate the screenshot along with the markups

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;
  });
}

And the original markup is

Original Mark Up

But for the screenshot I get

screenshot

This is random but i did notice sometimes when you move the model (or move the view using "Pan") around (specially along with the X axis) this happens.

Is it something wrong when I draw the canvas or something else ??

Upvotes: 0

Views: 104

Answers (2)

Petr Broz
Petr Broz

Reputation: 9942

Adding to udda's answer:

Here's how the markups are kept in sync with the viewer camera:

  • Whenever the camera changes, the MarkupsCore extension calls its own method called onCameraChange to sync its markups' position and scale accordingly
  • The onCameraChange method calls another method of the extension object called getSvgViewBox to compute the "world coordinates" for all four corners of the viewer canvas
  • The world coordinates are then used to specify the SVG element's viewBox attribute

With that said, the markups should always stay in sync unless the onCameraChange method is not called for some reason before you attempt to generate the screenshot. Try adding a break point into the method to see if it gets called as expected.

Upvotes: 1

udda
udda

Reputation: 93

Ok I think I might have found out what my code is missing , so I add the following code before loading markups

missing point was the "state"

var viewerStatePersist = markUp_.viewer.getState()

and then added it before loading the markups

markup.viewer.restoreState(viewerStatePersist);

so my final code would look like this


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;
  });
}

Not sure if it is the real solution but worked for me ...

Upvotes: 0

Related Questions