推荐：将 NSDT场景编辑器 加入你的3D开发工具链
介绍
在 CHAI3D 中，小部件是以 2D 形式显示数据和状态信息的主要元素。每个摄像机都包含一个前层和后层，可以在其上附加小部件。渲染摄像机场景时，首先渲染 2D 背景图层，然后渲染 3D 世界，最后渲染 2D 前图层。
在下一节中，我们将回顾其中一些基本小部件。
CHAI3D中的小部件
面板
cPanel 可用于在窗口上放置一个空面板。面板具有用于提供圆角、颜色和材料纹理属性的属性。面板由其宽度定义，高度可以放置在视口中的任何位置。
using namespace chai3d;
// create a panel
cPanel* panel = new cPanel();
// add panel to front layer of camera
camera->m_frontLayer->addChild(panel);
// set width and height of panel
panel->setSize(300, 200);
// assign radius of each corner of panel
panel->setCornerRadius(10, 10, 10, 10);
// assign a position (x,y) to panel
panel->setLocalPos(40, 60);
// set a uniform color to panel
panel->setColor(cColorf(1.0, 0.5, 0.5));
// assign a transparency level to panel
panel->setTransparencyLevel(0.5);
位图
应用程序可以将位图小组件添加到其用户界面以显示图像。图像及其原点显示在微件目标矩形的左下角，并且可以沿 X 轴和 Y 轴拉伸。
using namespace chai3d;
// create bitmap object
cBitmap* bitmap = new cBitmap();
// add bitmap to front layer of camera
camera->m_frontLayer->addChild(bitmap);
// load image file
bitmap->loadFromFile("myImage.png");
背景
背景构件可用于显示覆盖整个显示窗口的图像。
// create a background object
cBackground* background = new cBackground();
// add background to back layer of camera
camera->m_backLayer->addChild(background);
// set aspect ration of background image a constant
background->setFixedAspectRatio(true);
// load an image file
background->loadFromFile("myImage.png");
示例 05-字体：背景图像覆盖整个窗口
水平仪
水平仪是一个线性仪表小部件，用于让用户快速了解值在一定范围内的位置。水平可以水平或垂直设置。
using namespace chai3d;
// create dial object
level = new cLevel();
// add level to front layer of camera
camera->m_frontLayer->addChild(level);
// set range of values displayed by level
level->setRange(0.0, 0.1);
// set size of level
level->setSize(40);
// enable single line display option
level->setSingleIncrementDisplay(true);
// assign value to level
level->setValue(value);
水平仪可以通过旋转小部件 90 度来水平设置。
using namespace chai3d;
// rotate level of 90 degrees angle
level->rotateWidgetDeg(90);
表盘
表盘提供与水平仪类似的功能，但采用圆形显示。
拨盘：（左）连续显示（右）单增量显示
using namespace chai3d;
// create dial object
dial = new cDial();
// add dial to front layer of camera
camera->m_frontLayer->addChild(dial);
// set range of values displayed by dial
dial->setRange(-0.1, 0.1);
// set size of dial
dial->setSize(40);
// enable single line display option
dial->setSingleIncrementDisplay(true);
// assign value to dial
dial->setValue(value);
示波器
应用程序可以添加一个 cScope 小部件，以显示多达四个类似于数字示波器的不同信号。
using namespace chai3d;
// create a background object
scope = new cScope();
// add scope to back layer of camera
camera->m_frontLayer->addChild(scope);
// assign a position (x,y) to panel
scope->setLocalPos(100,60);
// set range of signal values (min / max)
scope->setRange(-0.1, 0.1);
// enable signals for display
scope->setSignalEnabled(true, true, true, false);
// assign a transparency level to scope
scope->setTransparencyLevel(0.7);
初始化示波器后，可以使用以下命令持续更新信号值：
using namespace chai3d;
// assign signal values
scope->setSignalValues(value0, value1, value2, value3);
标签
标签是用于在应用程序中添加文本的小部件。对于每个标签，将分配一种字体。字体应始终在实例化标签之前创建，并且可以在多个标签之间共享。
using namespace chai3d;
// create a font
cFont* font = NEW_CFONTCALIBRI20();
// create a label
cLabel* label = new cLabel(font);
// add label to front layer of camera
camera->m_frontLayer->addChild(label);
// assign color to label
label->m_fontColor.setBlack();
// assign text to label
label->setText("my message");
// position widget on screen
label->setLocalPos(100, 120);
字体
CHAI3D 支持使用位图字体，位图字体由包含字体中所有必需字母的纹理图集和描述该纹理图集上每个字母的位置和大小的文本数据文件组成。
所选字体在 CHAI3D 框架中编码，并可以使用以下代码进行实例化。编码字体的完整列表可以在 src/resources 目录中找到。
using namespace chai3d;
// create a font (Calibri Size 20)
cFont* font1 = NEW_CFONTCALIBRI20();
// create a font (Calibri Size 36)
cFont* font2 = NEW_CFONTCALIBRI36();
字体也可以使用应用程序BMFont从AngelCode生成的字体文件加载。
using namespace chai3d;
// create a font
cFont* font = new cFont();
// load font from file
font->loadFromFile("myFont.fnt");
使用 BMFont 创建位图字体
步骤1
运行 BMFont 并打开选项->字体设置。
步骤2
1、从PC上已安装的字体列表中选择所需的字体，或添加硬盘驱动器上的字体文件。
2、设置字体的像素大小并选中匹配字符高度。
3、检查 字体平滑 和 超级采样 如果您希望字母平滑且消除锯齿。
步骤3
1、然后回到主工具窗口，您将看到所选字体中包含的所有字母。
2、突出显示您希望包含在字体中的所有字母，通过打开/关闭每个字母或从右侧列表中切换字母的子部分来单独突出显示。
步骤4
1、接下来，打开选项->导出选项。
2、根据您选择的字体，以及是否要向纹理图集添加任何后期效果，您可能需要添加一些字母填充以防止字母上出现意外的伪影。
3、设置纹理图集的宽度和高度。它需要足够大，以便将所有字母放入一个纹理上。要检查它是否适合所选大小，请返回主窗口并按“V”或转到选项->可视化。
4、最好是坚持使用地图集的 2 次幂维度。例如 2，4，8，16，32，64，128，256，512 等。
5、检查32位深度以允许alpha通道。
6、选中文本文件格式，并检查 PNG 作为纹理格式。
步骤5
1、选择选项->将位图字体另存为...
2、将位图字体保存到 CHAI3D 资源文件夹。
