如何在 Autodesk Forge Viewer 版本 7 中删除工具栏按钮答案

【问题标题】：How to remove toolbar buttons in Autodesk Forge Viewer version 7如何在 Autodesk Forge Viewer 版本 7 中删除工具栏按钮
【发布时间】：2019-12-04 17:23:01
【问题描述】：

我正在尝试删除 Autodesk Forge Viewer 新版本 7 中的工具栏按钮。

请参考我下面的代码：

 viewer.addEventListener(Autodesk.Viewing.TOOLBAR_CREATED_EVENT, (e) => {
        console.log(e);
        let modelTools = e.target.toolbar.getControl('modelTools')
        console.log(modelTools);
        modelTools.removeControl('toolbar-explodeTool');
        modelTools.removeControl('toolbar-measurementSubmenuTool');
        modelTools.removeControl('toolbar-modelStructureTool');
    })

从几个快速的 StackOverflow 搜索中，我了解到我必须监听一个事件，然后控制扩展并将其删除，我想我正在尝试做同样的事情，但它没有产生任何结果，按钮不会被移除。

请帮忙！

【问题讨论】：

标签： autodesk-forge autodesk-viewer

【解决方案1】：

另一种方法如下：

// Viewer instance is `viewer`
const toolbarControls = [];
if (var i = 0; i < viewer.toolbar.getNumberOfControls(); i++) {
  toolbarControls.push(viewer.toolbar.getControlId(i));
}

// E.g., remove all controls
toolbarControls.forEach(control => viewer.toolbar.removeControl(control));

【讨论】：

【解决方案2】：

标准工具栏上的按钮与加载的扩展相关联。如果您删除/隐藏按钮，您将有效地禁用相关的扩展。我建议卸载扩展而不是删除按钮。您可以在使用NOP_VIEWER 对象以交互方式在浏览器的调试窗口中编写代码之前尝试对该行为进行建模。试试这个顺序：

NOP_VIEWER.getLoadedExtensions()
NOP_VIEWER.unloadExtension('Autodesk.ModelStructure')

您应该注意到，一旦您卸载扩展程序，相应的按钮也会从工具栏中消失。现在您需要选择一个时间来卸载扩展。我建议您在 viewer.start 调用的 onSuccessCallback 函数中执行此操作，因为这是在这样加载扩展时：

this.viewer.start(null, () => {
      console.log('Forge viewer started');
      this.viewer.unloadExtension('Autodesk.ModelStructure');
    }, (errorCode, errorMessage) => {
      console.error(`Forge viewer start error ${errorCode}`, errorMessage);
    });

卸载扩展方法更好的原因是因为每个扩展都在卸载时实现了一个清理逻辑，该逻辑应该删除它在加载时创建的 UI 元素。在这里查看更多 https://forge.autodesk.com/en/docs/viewer/v7/developers_guide/viewer_basics/toolbar-button/#step-3-cleanup https://forge.autodesk.com/en/docs/viewer/v7/reference/Viewing/Viewer3D/#start-url-options-onsuccesscallback-onerrorcallback-initoptions

【讨论】：

【解决方案3】：

请尝试：

(viewer.toolbar.getControl("modelTools") as Autodesk.Viewing.UI.ControlGroup).removeControl('toolbar-explodeTool');

【讨论】：

【解决方案4】：

最简单的方法是使用如下样式覆盖来隐藏它们（参见现场演示 here）：

.adsk-viewing-viewer #toolbar-modelStructureTool{display:none!important}
.adsk-viewing-viewer #toolbar-explodeTool{display:none!important}
.adsk-viewing-viewer #toolbar-measurementSubmenuTool{display:none!important}

另一种解决方法是禁止自动加载这些默认的内置扩展，并在稍后通过回调加载它们以隐藏它们的控件，因为我们确信在触发回调时工具栏将由它们的控件填充：

 new Autodesk.Viewing.Private.GuiViewer3D(document.getElementById('MyViewerDiv'),{disabledExtensions
:{measure:true,explode:true}})

//...

viewer.loadExtension('Autodesk.Explode', viewer.config).then(ext=>{
//...hide the controls
});

viewer.loadExtension('Autodesk.Measure', viewer.config).then(ext=>{
//...hide the controls
});

【讨论】：

谢谢。是否有一个工具栏名称列表，例如 measure 和 explode 在任何地方列出？
@PrageethJayathissa 查看我的答案以获取列表

【解决方案5】：

如果您使用的是最近发布的查看器版本 - v7 - 请注意，现在应该使用回调方法而不是订阅事件来拦截工具栏的创建。详情请见migration guide。

如果您还没有准备好迁移到 v7，您可以在脚本标签中硬编码 v6，例如，<script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/viewer3D.min.js?v=v6.*"></script>。

【讨论】：

你能分享一个例子吗？这对我理解真的很有帮助，谢谢！
我测试了代码，发现订阅Autodesk.Viewing.TOOLBAR_CREATED_EVENT时，有些按钮还没有创建……我已经联系了开发团队，看看这是否是回归v7。与此同时，您可能需要通过延迟删除控件直到它们实际位于工具栏中来解决此问题。