工具栏上的按钮如何激活?
How Do the Buttons on the Toolbar Become Active?
我像这样在我的工具栏中添加了 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 颜色。只显示按钮阴影。有办法吗?
您需要通过在回调事件处理程序中调用按钮 class 的 setState() 方法来更改按钮状态。
您可以指定以下 'Button.State' 成员之一。
Button.State = {
ACTIVE: 0,
INACTIVE: 1,
DISABLED: 2
};
如果你想让按钮保持按下状态,'you can choose Button.State.ACTIVE'。
当然,你需要在命令结束时切换回按钮状态。
我像这样在我的工具栏中添加了 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 颜色。只显示按钮阴影。有办法吗?
您需要通过在回调事件处理程序中调用按钮 class 的 setState() 方法来更改按钮状态。 您可以指定以下 'Button.State' 成员之一。
Button.State = {
ACTIVE: 0,
INACTIVE: 1,
DISABLED: 2
};
如果你想让按钮保持按下状态,'you can choose Button.State.ACTIVE'。 当然,你需要在命令结束时切换回按钮状态。