第 2 步 - 创建燃料和电池指针¶

在本步骤中，您将学习使用与上一步骤相同的方法创建燃油和电池指针。

创建燃油指针¶

在本节中，您将学习创建燃油指针。

要创建燃油指针：

从 Assets 拖动 FuelBatteryNeedle 图像并将其放到 Preview 中的 Gauges 上。
在 Node Tree 中选择 FuelBatteryNeedle 节点，按下 F2，并将其重命名为 FuelNeedle。
使用 Preview 工具和节点的属性调整 FuelNeedle 节点的位置，就像您在上一步中对 SpeedNeedle 所做的那样。调整位置时，请遵循以下指南：
1. 使用 Guides 节点中的指南和 Render Transformation 属性将 FuelNeedle 放置到速度表左侧的仪表上。
  
  小技巧
  
  使用右上角的 Preview 缩放滑块来调整 Preview 中内容的放大级别。
  小技巧
  
  要在 Preview 中平移：
  - 点击鼠标中键并拖动。
  - 按下 Space 键，然后单击并拖动鼠标左键。
2. 使用 Render Transformation Origin 属性将节点的原点设置为节点的顶部中心。您只需将 X 属性设置为 0,5。
在 Library 按 Alt 并右键单击 Property Types 中，选择 Property Type，并在 Property Type Editor 中设置：
- Name 到 Gauges.Fuel
- Display Name 到 Fuel
- Category 到 Gauges
- Data Type 到 Integer
- 将 Lower Bound 设置为 0。
- Upper Bound 到 100
单击 Save 以创建具有您定义的属性的属性类型。

您可以使用自定义属性类型控制 Gauges 中 FuelNeedle 的位置。
在 Node Tree 中选择 Gauges 节点，并在 Properties 中添加 Fuel 属性。

小技巧

您可以通过将属性类型从 Library > Property Types 拖动并放置到 Node Tree 中要添加属性类型的节点上，从而向节点添加自定义属性类型。
在 Node Tree 中选择 FuelNeedle 节点，在 Properties 中点击 + Add Binding，并在 Binding Editor 中设置：
- Property 到 Render Transformation
- Property Field 到 Rotation Z
- Expression 到
```
{@../Gauges/Gauges.Fuel} - 39
```
  当 Fuel 属性的值为 0 时，您必须从该属性的值中减去 39，以便在仪表上正确定位指针到值 0。
单击 Save。使用此绑定，您可以通过 Fuel 属性控制 FuelNeedle 节点围绕 z 轴的旋转，该属性已在上一步中添加到 Gauges 节点。
在 Node Tree 中，将 FuelNeedle 节点拖动并放置在 Gauges 节点上方。

Gauges 节点为 Fuel 和 Battery 仪表提供了透明开口，您可以在其中看到指针的位置。在 Node Tree 窗口中节点的位置定义了节点的渲染顺序：节点树顶部的节点首先渲染，节点树底部的最后一个节点最后渲染。通过将 FuelNeedle 节点放置在 Gauges 节点之上，您可以设置 Kanzi 先渲染 FuelNeedle 节点，然后在其上渲染 Gauges 节点，该节点仅显示 FuelNeedle 的一小部分，以创建一个优雅的燃料指示器。

创建电池指针¶

在本节中，您将学习创建电池指针。

要创建电池指针：

从 Assets 拖动 FuelBatteryNeedle 图像，将其放到 Preview 中的 Gauges 上，并将其重命名为 BatteryNeedle。
使用 Preview 工具和节点的属性调整 BatteryNeedle 节点的位置和 Render Transformation Origin，就像您对 FuelNeedle 所做的那样，但将 BatteryNeedle 放置在速度表的右侧。
创建属性类型，并在 Property Type Editor 中设置：
- Name 到 Gauges.Battery
- Display Name 到 Battery
- Category 到 Gauges
- Data Type 到 Integer
- 将 Lower Bound 设置为 0。
- Upper Bound 到 100
单击 Save 以创建具有您定义的属性的属性类型。

您可以使用自定义属性类型控制 Gauges 中 BatteryNeedle 的位置。

小技巧

因为 Battery 和 Fuel 属性类型之间的唯一区别是名称，在 Library 中右键单击 Fuel 属性，选择 Duplicate，将副本重命名为 Gauges.Battery，并在 Properties 中将 Display Name 属性设置为 Battery。
在 Node Tree 中选择 Gauges 节点并添加 Battery 属性。
在 Node Tree 中选择 BatteryNeedle 节点，添加绑定，并在 Binding Editor 中设置：
- Property 到 Render Transformation
- Property Field 到 Rotation Z
- Expression 到
```
-{@../Gauges/Gauges.Battery} + 39
```
  您必须使用负值，使指针在属性值增加时沿逆时针方向旋转。当 Battery 属性的值为 0 时，您必须在属性值上加 39，以便在仪表上的值为 0 时正确定位指针。
单击 Save。

通过此绑定，您可以使用在上一步中添加到 Gauges 节点的 Battery 属性控制 BatteryNeedle 节点围绕 z 轴的旋转。
在 Node Tree 中，将 BatteryNeedle 节点拖动到 Gauges 节点上方并释放。

就像使用 FuelNeedle 节点一样，通过将 BatteryNeedle 节点放置在 Gauges 之上，您可以设置 Kanzi 先渲染 BatteryNeedle 节点，然后在其上渲染 Gauges 节点，该节点仅显示 BatteryNeedle 的一小部分，以创建一个优雅的电池指示器。