自定义按钮图标 Autodesk Forge Viewer
Custom button Icon Autodesk Forge Viewer
button
我正在向查看器工具栏添加一个自定义按钮。如何在不创建带有 css class 的样式表的情况下添加图标?
或使用 https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.min.css
中的 class
您可以在创建按钮时直接设置按钮的样式并添加图像,例如作为背景:
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);
}
你会得到这个:
图标文件:
button
我正在向查看器工具栏添加一个自定义按钮。如何在不创建带有 css class 的样式表的情况下添加图标?
或使用 https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.min.css
中的 class您可以在创建按钮时直接设置按钮的样式并添加图像,例如作为背景:
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);
}
你会得到这个:
图标文件: