咨询2D版ForgeAPI Viewer工具栏是否可添加旋转按钮
答复结论
2D版本ForgeAPI Viewer完全支持在原生工具栏新增自定义旋转按钮,无需修改Viewer核心源码,基于官方开放的扩展能力即可实现,具体实现流程如下:
- 编写自定义扩展类,继承Viewer内置的
Autodesk.Viewing.Extension基类,在扩展加载生命周期内完成按钮挂载、事件绑定逻辑 - 拿到Viewer的工具栏实例后,实例化通用按钮控件,配置按钮的提示文案、显示图标,绑定点击后的旋转逻辑:2D视图旋转直接调用官方提供的
setRotation接口即可,支持传入弧度值设置旋转角度,常规需求做每次点击顺时针旋转90°的逻辑即可满足使用 - 将按钮添加到工具栏的对应分组中,可通过传入索引参数调整按钮的展示位置,和现有工具栏控件保持排布一致
- 扩展编写完成后注册到全局扩展管理器,在Viewer初始化时将扩展ID传入配置项的
extensions数组,Viewer加载完成后就会自动在工具栏渲染你新增的旋转按钮
实现提示:如果需要匹配现有工具栏的图标风格,可以直接复用Viewer内置的图标样式类,不需要额外切图制作图标资源;如果需要自定义旋转角度(比如自由旋转而非固定90°步进),可以结合鼠标拖拽事件改写旋转触发逻辑。
最简实现代码参考:
class Rotate2DViewExtension extends Autodesk.Viewing.Extension { constructor(viewer, options) { super(viewer, options); this.currentAngle = 0; } load() { // 工具栏已创建时直接挂载按钮,未创建则监听创建完成事件 if (this.viewer.toolbar) { this.mountRotateButton(); } else { this.viewer.addEventListener( Autodesk.Viewing.TOOLBAR_CREATED_EVENT, this.mountRotateButton.bind(this), { once: true } ); } return true; } mountRotateButton() { const toolbar = this.viewer.toolbar; // 实例化按钮 const rotateBtn = new Autodesk.Viewing.UI.Button('toolbar-rotate-2d'); rotateBtn.setToolTip('旋转视图'); rotateBtn.setIcon('adsk-icon-rotate'); // 绑定点击旋转逻辑 rotateBtn.onClick = () => { this.currentAngle = (this.currentAngle + 90) % 360; // 角度转弧度传入setRotation接口 this.viewer.setRotation(this.currentAngle * Math.PI / 180); }; // 将按钮加入导航工具分组 const navControlGroup = toolbar.getControl(Autodesk.Viewing.TOOLBAR.NAVTOOLSID); navControlGroup.addControl(rotateBtn); } unload() { // 扩展卸载时可补充按钮移除、事件解绑逻辑 return true; } } // 注册自定义扩展 Autodesk.Viewing.theExtensionManager.registerExtension( 'Rotate2DViewExtension', Rotate2DViewExtension );
内容的提问来源于stack exchange,提问作者dv13
相关产品推荐
相关产品推荐

