分类：界面

tuo-visual的前端应用界面从区块上大致分3个部分，模型树形结构视图，模型3D视图和底部工具栏。如下图所示：

在屏幕较小的设备（如手机），左侧的模型树形结构视图会成为可收缩的样式，如下图所示：

模型的树形结构视图通过有层次的树形结构来表达模型装配体的组成结构。原CAD文件中的模型名称会也在这里表示出来。这些树形结构都是可展开可回收的，如下图所示：

树形结构视图中，每个条目含有两个元素，一个是其所指模型的名称，一个是该模型的可视性。我们可以用鼠标点击可视性控制图标切换该模型的可视性。如下图所示：

上图也演示了我们可以通过树形结构对不同层级分组的模型进行可视性操作。

对于树形结构视图还有一个特征就是，当我们鼠标放在某个条目上时，其父元素也会表示性ui效果提示，这个功能可以帮助我们快速区分模型的分组情况。如下图所示：

模型的3D视图部分除了显示对模型的3D渲染视图外还提供视角控制操作，3D视角导航工具，和右侧选择控制工具栏。

对于3D视图的视角控制，在移动端（触摸屏操作）和pc端（鼠标操作）分别提供了不同的方案，说明如下：

鼠标操作：

1. 鼠标右键点击后并进行拖拽可以控制浏览模型的角度。
2. 鼠标中键点击后(按下鼠标滚轮)并进行拖拽可以控制浏览模型的聚焦中心点。
3. 滚动鼠标中键(滚动鼠标滚轮)可以控制模型视图的放缩比例。

操作演示如下图所示：

• 

• 

• 

触摸屏操作：

1. 单指触摸滑动手指可以控制浏览模型的角度。
2. 双指触摸并向相同方向滑动双指可以控制浏览模型的聚焦中心点。
3. 双指触摸并向相反方向滑动双手指可视控制模型视图的放缩比例。

操作演示如下图所示：

• 

• 

• 

3D视图中的视图导航工具是我们独立研发的交互引擎tuo-three2的一个插件，它能一方面直观的表达当前浏览模型的角度另一方面用户也能通过它来设定当前视角。请看如下演示动态图片。

• 

• 

当我们的前端应用处于几何体分析模式下时，3D视图的右侧还会出现选择控制工具栏。通过这个选择控制工具栏，我们可以过滤选中3D视图中的几何元素。例如根据用户实际操作需求，我们可以设定只允许选择点，线或者面。

我们通过以下动图来描述此选择过滤操作。

• 

• 

• 

前端应用的底部工具栏是前端各种主要操作的接入点。它包括可视性工具，视图定位工具，历史操作记录控制工具，移动工具和几何分析工具。

底部工具栏拥有一个自身的按钮容器控制机制，每个按钮只有当它有效的时候才会出现。例如 ，移动，测量等一些专门针对3D零件的操作，在普通预览模式下，其所对应的按钮只会在有3D对象被选中时才会出现。如下图所示：

底部工具栏所有的控制按钮都是可以往上展开的树形拓展结构，采用这种设计主要是为了保持界面的简洁性。下文将分别介绍底部5个工具展开后的形态：

1. 可视性工具。当我们在普通浏览模式下选中某个3D对象时，此工具按钮就会出现在底部工具栏。随后，如果我们让鼠标光标停放在该按钮上或者触摸该按钮，其子操作按钮就会出现在该按钮的正上方。如下图所表示：

注：其中“显示所有已被隐藏对象”的按钮需要存在被隐藏对象时，才会出现。

2. 视图定位工具。此工具无论在什么模式下都会出现在底部工具栏。它能控制整体的视图定位。其子按钮介绍如下图所示：

注：其中“定位到被选中对象视图”按钮需要存在被选中对象时才会出现

3. 历史操作记录控制按钮。此按钮是操作历史记录的接入口，通过此按钮我们能够执行“撤销上一步”操作或者“返回下一步”操作。其子按钮分布情况如下图所示：

注：此按钮和其子按钮只有存在可以追溯的操作历史记录时才会出现

4 移动工具按钮。此按钮是进入“移动操作模式”和对3D对象进行移动操作的接口，通过此按钮我们可以对被选中的单一对象做平移，旋转和放缩变形。其子按钮分布情况如下图所示：

注：“退出移动模式”按钮，只会在进入移动模式后才会出现。

5. 几何分析按钮。此按钮是进入几何分析模式和提供各种几何分析操作的接入口。此按钮会在“普通浏览模式“和“几何分析模式”模式下出现。在“普通浏览模式”下，其子按钮只有一个，即“进入几何分析模式”按钮。如下图所示：

当进入“几何分析模式”后，其子按钮的分布情况如下图所示：

上图所表示的“当前可执行分析操作”的按钮是根据当前用户所选中的几何元素而定的，本系统支持的所有几何分析操作所对应图标如下：

几何分析的子按钮中，还可能出现一个“清除所有标注”的按钮，此按钮在应用中存在标注信息的时候会出现。如下图所示：