工具栏上的按钮是如何激活的？

Question

我像这样在我的工具栏上添加了 3 个按钮（使用的示例来自伪造教程）：

export class Edit2DExtension extends Autodesk.Viewing.Extension {

    edit2DExtension;
    edit2DTools;
    edit2DContext;
    edit2DLayer;

    currentTool: string = '';

    lineToolButton: Autodesk.Viewing.UI.Button;
    polygonToolButton: Autodesk.Viewing.UI.Button;
    editToolButton: Autodesk.Viewing.UI.Button;

    activated: boolean = false;

    constructor(viewer, options) {
        super(viewer, options);
        this._group = null;
        this._button = null;

        this.viewer.addEventListener('extensionLoaded', this.extensionLoaded.bind(this));
    }


     extensionLoaded(event) {
        ...
    }


    onToolbarCreated() {
       
        // Create a new toolbar group if it doesn't exist
        this._group = this.viewer.toolbar.getControl('Edit2DToolbar');
        if (!this._group) {
            this._group = new Autodesk.Viewing.UI.ControlGroup('Edit2DToolbar');
            this.viewer.toolbar.addControl(this._group);
        }

        // Line tool button
        this.lineToolButton = new Autodesk.Viewing.UI.Button('Edit2_PolylineTool_default');
        this.lineToolButton.onClick = this.activateTool.bind(this, 'Edit2_PolylineTool_default');
        this.lineToolButton.setToolTip('Line Tool');
        this.lineToolButton.addClass('line-tool-button');
        this._group.addControl(this.lineToolButton);

        // Polygon tool button
        this.polygonToolButton = new Autodesk.Viewing.UI.Button('Edit2_PolygonTool_default');
        this.polygonToolButton.onClick = this.activateTool.bind(this, 'Edit2_PolygonTool_default');
        this.polygonToolButton.setToolTip('Polygon Tool');
        this.polygonToolButton.addClass('polygon-tool-button');
        this._group.addControl(this.polygonToolButton);

        // Polygon tool button
        this.editToolButton = new Autodesk.Viewing.UI.Button('Edit2_PolygonEditTool_default');
        this.editToolButton.onClick = this.activateTool.bind(this, 'Edit2_PolygonEditTool_default');
        this.editToolButton.setToolTip('Edit Tool');
        this.editToolButton.addClass('edit-tool-button');
        this._group.addControl(this.editToolButton);
    }


     activateTool(toolName: string) {

        this.deactivateCurrentButton()

        switch (toolName) {
            case 'Edit2_PolylineTool_default':
                this.currentTool = 'Edit2_PolylineTool_default';
                
                break;
            case 'Edit2_PolygonTool_default':
                this.currentTool = 'Edit2_PolygonTool_default';

                break;
            case 'Edit2_PolygonEditTool_default':
                this.currentTool = 'Edit2_PolygonEditTool_default';
                break;
        }

        this.startTool(this.currentTool, this.viewer);
    }


    startTool(toolName: string, viewer) {
        let toolController = viewer.toolController;

        // Deactivate active tool
        toolController.deactivateTool(toolController.getActiveTool().getName());

        toolController.activateTool(toolName);
    }

当我单击新按钮时，导航平移工具仍显示为活动并被选中，并且我的新按钮没有获取活动按钮的 css。工具本身已切换，我可以使用 Edit2D 库开始绘图，但工具栏并未更新其 UI。我是在不正确地创建按钮，还是遗漏了什么？

如下图所示，我点击了我添加的“线条工具”并用它绘图，但工具栏上的平移工具仍处于激活状态。

编辑：

我正在使用 button.setState() 函数，但它不会像常规工具那样更改 svg 颜色。只显示按钮阴影。有没有办法做到这一点？

Answer 1

您需要通过在回调事件处理程序中调用按钮类的 setState() 方法来更改按钮状态。 您可以指定以下任何一个 'Button.State' 成员。

Button.State = {
  ACTIVE: 0,
  INACTIVE: 1,
  DISABLED: 2
};

如果你想让按钮保持按下状态，'你可以选择 Button.State.ACTIVE'。 当然，您需要在命令结束时切换回按钮状态。