Autodesk Forge Viewer如何截取指定模型部分、指定尺寸的截图并还原原视图

前置注意点 #

• 不需要修改当前Viewer的实际DOM尺寸，getScreenshot(width, height) 接口本身就支持输出指定分辨率的截图，和Viewer当前显示尺寸无关
• fitToView 执行后需要等待视图渲染完成再截图，否则会出现元素不在视野、截图模糊的问题
• 存储初始视图要存完整的相机状态+视图配置，避免还原不到位

完整实现步骤 #

步骤1：存储初始视图状态 #

调用getState接口存储完整视图状态，比单独存储相机参数覆盖范围更全，会保留剖面、元素显隐等所有配置：

const initialState = viewer.getState({
  viewport: true,
  seedurn: false,
  objectSet: true
});

步骤2：隔离目标元素（可选但推荐） #

临时隐藏无关元素，避免无关内容进入截图画面：

const targetElementIds = [/* 你的20个元素ID */];
viewer.isolate(targetElementIds);

步骤3：定位到目标元素，等待视图稳定 #

监听渲染完成事件解决异步适配问题，彻底避免元素不在视野的问题：

// 第三个参数设为false开启短过渡动画，适配精度比立即适配更高
viewer.fitToView(targetElementIds, viewer.model, false);

// 等待视图完全渲染稳定
await new Promise(resolve => {
  const renderListener = () => {
    viewer.removeEventListener(Autodesk.Viewing.RENDER_OPTION_CHANGED_EVENT, renderListener);
    // 额外加100ms延迟保证画面完全加载
    setTimeout(resolve, 100);
  };
  viewer.addEventListener(Autodesk.Viewing.RENDER_OPTION_CHANGED_EVENT, renderListener);
  // 500ms兜底超时，防止事件异常不触发
  setTimeout(resolve, 500);
});

步骤4：获取指定尺寸截图 #

直接传入需要的400x400参数即可，无需修改Viewer实际显示尺寸：

viewer.getScreenshot(400, 400, (blobUrl) => {
  // 此处处理截图逻辑，例如下载、上传到服务器等
  console.log('截图生成完成：', blobUrl);
});

步骤5：还原初始视图 #

截图处理完成后恢复到初始状态：

// 恢复所有元素显示
viewer.showAll();
// 还原完整初始视图
viewer.restoreState(initialState);

常见问题修复 #

• fitToView后元素仍不在视野：检查传入的elementId是否为当前加载模型的有效dbId，部分复合构件需要传入父级ID才能完整适配
• 截图有黑边/比例拉伸：如果要求严格400x400无变形，可以在适配视图前修改相机比例，截图后还原即可：

// 截图前设置相机宽高比为1
const originalAspect = viewer.camera.aspect;
viewer.camera.aspect = 1;
viewer.camera.updateProjectionMatrix();
// 截图完成后还原比例
viewer.camera.aspect = originalAspect;
viewer.camera.updateProjectionMatrix();

内容的提问来源于stack exchange，提问作者Dawe