自定义按钮图标 Autodesk Forge 查看器答案

【问题标题】：Custom button Icon Autodesk Forge Viewer自定义按钮图标 Autodesk Forge 查看器
【发布时间】：2021-07-14 19:28:55
【问题描述】：

button

我正在向查看器工具栏添加一个自定义按钮。如何在不创建包含 css 类的样式表的情况下添加图标？

或者使用来自https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.min.css的类

【问题讨论】：

标签： autodesk-forge autodesk-viewer

【解决方案1】：

您可以在创建按钮时直接设置按钮的样式并添加图像，例如作为背景：

function addButton(viewer) {
  let group = viewer.toolbar.getControl('transformExtensionsToolbar');
  if (!group) {
    group = new Autodesk.Viewing.UI.ControlGroup('transformExtensionsToolbar');
    viewer.toolbar.addControl(group);
  }

  // Add a new button to the toolbar group
  button = new Autodesk.Viewing.UI.Button('transformExtensionButton');
  // instead of using bootstrap classes e.g.
  // button.icon.classList.add("fas", "fa-arrows-alt");
  // you can do this
  let iconPath = "icon.png"
  button.icon.style = `background-image: url(${iconPath}); background-size: 24px 24px;`

  button.setToolTip('Transform Object');
  group.addControl(button);
}

你会得到这个：

图标文件：

【讨论】：