如何删除 Autodesk Forge Viewer 版本 7 中的工具栏按钮
How to remove toolbar buttons in Autodesk Forge Viewer version 7
我正在尝试删除新版 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');
})
从几个快速的 Whosebug 搜索中,我能够理解我必须监听一个事件,然后控制扩展并将其删除,我想我正在尝试做同样的事情,但它没有产生任何结果结果,按钮没有被删除。
请帮忙!
如果您使用的是最近发布的查看器版本 - v7 - 请注意,工具栏的创建现在应该使用回调方法来拦截,而不是订阅事件。有关详细信息,请参阅 migration guide。
如果您还没有准备好迁移到 v7,您可以在脚本标记中对 v6 进行硬编码,例如 <script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/viewer3D.min.js?v=v6.*"></script>
。
最简单的方法是使用如下样式覆盖来隐藏它们(参见现场演示 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
});
请尝试:
(viewer.toolbar.getControl("modelTools") as Autodesk.Viewing.UI.ControlGroup).removeControl('toolbar-explodeTool');
标准工具栏上的按钮与加载的扩展相关联。如果您 remove/hide 这些按钮,您可以使用相关的扩展有效地禁用它们。我建议卸载扩展而不是删除按钮。在浏览器的调试 window 中使用 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
另一种方法如下:
// 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));
我正在尝试删除新版 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');
})
从几个快速的 Whosebug 搜索中,我能够理解我必须监听一个事件,然后控制扩展并将其删除,我想我正在尝试做同样的事情,但它没有产生任何结果结果,按钮没有被删除。
请帮忙!
如果您使用的是最近发布的查看器版本 - v7 - 请注意,工具栏的创建现在应该使用回调方法来拦截,而不是订阅事件。有关详细信息,请参阅 migration guide。
如果您还没有准备好迁移到 v7,您可以在脚本标记中对 v6 进行硬编码,例如 <script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/viewer3D.min.js?v=v6.*"></script>
。
最简单的方法是使用如下样式覆盖来隐藏它们(参见现场演示 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
});
请尝试:
(viewer.toolbar.getControl("modelTools") as Autodesk.Viewing.UI.ControlGroup).removeControl('toolbar-explodeTool');
标准工具栏上的按钮与加载的扩展相关联。如果您 remove/hide 这些按钮,您可以使用相关的扩展有效地禁用它们。我建议卸载扩展而不是删除按钮。在浏览器的调试 window 中使用 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
另一种方法如下:
// 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));