我可以在 Autodesk forge 中为两个查看器使用停靠面板吗？答案

【问题标题】：Can i use docking panel in Autodesk forge for both viewers?我可以在 Autodesk forge 中为两个查看器使用停靠面板吗？
【发布时间】：2020-02-28 08:26:25
【问题描述】：

Example on Photo

我有两个查看器来比较模型。我为属性创建了一个停靠面板，我希望这个面板浮动在两个查看器中。有没有可能，谁会告诉你怎么做？

【问题讨论】：

好的，听起来你想要一个“全局”面板。您可以尝试创建两个 Forge Viewer。然后...添加一个 DIV 元素，CSS z-index:2 和元素的基本自定义可拖动代码。 DIV 可以在两个 Forge 查看器上拖动。这样能解决吗？
感谢您的评论。使用js面板解决了这个问题。 Forge 技术不允许对两个查看器使用停靠面板。

标签： autodesk-forge autodesk-viewer

【解决方案1】：

有两种选择：

选项1：

使用“Autodesk.SplitScreen”扩展，最多可渲染 4 个区域。你像这样加载它..

loadExtension('Autodesk.SplitScreen');

这个简单的扩展最多可以设置四个摄像头，并渲染四个区域。默认情况下，它只有两个（左和右）。这是它的核心工作原理的源代码，以防万一你想编写自己的......

https://autodeskviewer.com/viewers/latest/extensions/SplitScreen/SplitScreen.js

this.renderScenePart = function (scene) {


// Left
if (shouldRenderForViewport[0]) {
  this.renderer.setViewport(0, vpVertStart, vpWidth, vpHeight);
  this.context.renderScenePart.apply(this.context, arguments);
}

// Right
if (shouldRenderForViewport[1]) {
  this.renderer.setViewport(vpWidth, vpVertStart, vpWidth, vpHeight);
  this.context.renderScenePart.apply(this.context, arguments);
}

// Bottom left
if (shouldRenderForViewport[2]) {
  this.renderer.setViewport(0, 0, vpWidth, vpHeight);
  this.context.renderScenePart.apply(this.context, arguments);
}

// Bottom right
if (shouldRenderForViewport[3]) {
  this.renderer.setViewport(vpWidth, 0, vpWidth, vpHeight);
  this.context.renderScenePart.apply(this.context, arguments);
}

this.renderer.setViewport(0, 0, this.width, this.height);
this.renderer.enableViewportOnOffscreenTargets(false);

选项2：

对于更高级且仅针对 2D 的内容，您还可以尝试“Autodesk.Viewing.PixelCompare”扩展。这是一篇包含更多详细信息和演示的博文...

博客：https://forge.autodesk.com/blog/compare-two-2d-documents-using-forge-viewer

【讨论】：

Тhese 确实是不错的选择，但我需要别的东西。我会尝试在图片中解释。我有一个比较面板，但它只在第一个查看器中移动，但我需要将它移动到第二个查看器。是否可以使用伪造来实现技术。我们做了一次，但在 JS 面板的帮助下，但我们需要用 forge 来做。

【解决方案2】：

好的，还有两个选项：

选项 A： 如果第二张图片是“静态的”......为什么不直接拍摄“屏幕截图”并将其放在右侧面板中？您可以使用 viewer.getScreenShot() 命令检索 PNG 博客，并将其绘制到画布中。

// Get the full image
viewer.getScreenShot(viewer.container.clientWidth, viewer.container.clientHeight, function (blobURL) {
    screenshot.src = blobURL;
});

有关将图像绘制到画布的更多详细信息，请参阅此处：https://forge.autodesk.com/blog/screenshot-markups

选项 B： 如果两个面板可以独立控制，那么也许尝试通过某种按钮按下（或动作）来同步相机状态。

借助这些博客文章：

例如：

viewer.getState();

viewer.restoreState();

或使用导航对象恢复相机位置：

const nav = this.navigation;
nav.getTarget();
nav.getPosition();
nav.getCameraUpVector();

【讨论】：