工具栏上的按钮如何变为活动状态？

问题描述

我像这样在我的工具栏中添加了 3 个按钮（使用 Forge 教程中的示例）：

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 颜色。只显示按钮阴影。有没有办法做到这一点？

解决方法

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

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

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