步骤 1 - 创建速度指针¶
在本教程的这一步骤中，您将学习将速度指针添加到仪表、调整其位置并使其反映您创建的属性的值的变化。
获取教程¶
要获取该教程，请在 Kanzi Studio 的 Quick Start 窗口中点击 Projects，然后选择 Tutorials 选项卡。在 Gauges 教程旁点击 
。
Kanzi Studio 会将教程下载到 <KanziWorkspace>/Tutorials 目录。您可以找到：
位于
<KanziWorkspace>/Tutorials/Gauges/Assets目录中的教程起点工程。位于
<KanziWorkspace>/Tutorials/Gauges/Completed目录中的已完成教程。
打开工程并添加速度指针¶
在本节中，您将打开工程，调整 Preview，并将速度指针添加到仪表中。
要打开工程并添加速度指针：
在 Kanzi Studio 的 Quick Start 窗口中点击 Projects，然后选择 Tutorials 选项卡。在 Gauges 教程旁点击 Open，然后选择 Start project。
该项目包含 Gauges Image 节点，该节点用作本教程中所有仪表的背景，以及 Guides Image 节点，您可以使用它来精确设置仪表中指针的枢轴点。
小技巧
如果您无法在 Preview 中看到所有三个仪表，您可以在 Preview 的右上角调整 Preview 缩放级别。
小技巧
Preview 的背景默认情况下是黑色的。要使您的内容在 Preview 处于 Interact 模式
时从背景中脱颖而出，您可以设置 Preview Background Color：对于您的所有 Kanzi Studio 项目，请在 Edit > User Preferences 中。
对于特定的 Kanzi Studio 项目，请在 Project > Properties 中。
请参阅 设置 Preview 的背景颜色。
从 Kanzi Studio UI 底部的 Assets 中，拖动 SpeedNeedle 图像并将其放到 Preview 中的 Gauges 上。
当您将图像从 Assets 拖动到 Preview 时，Kanzi Studio 会创建一个新的 Image 节点，该节点显示您拖动的图像并将其放置在屏幕的左上角。在下一节中，您将 SpeedNeedle 节点定位到其正确位置。
调整 SpeedNeedle 的位置。¶
在 Kanzi Studio 中，您可以使用 Preview 工具调整 Preview 中节点的位置，或者通过在 Node Tree 中选择节点并在 Properties 中调整节点属性的值。在本节中，您将结合使用这两种方法。
在本节中，您将 SpeedNeedle 放置在速度表的中心，并调整其原点，以便其围绕表的中心正确旋转。
小技巧
要确保节点的精确位置，创建一个图像，画出界面中所有关键元素的确切位置。将指导图像导入到您的项目中，并在定位节点时将其用作指导。本教程中的项目包含这样一个图像。
要调整 SpeedNeedle 的位置：
在 Node Tree 中，选择 Guides 节点并按下 Ctrl H 以显示可用于设置仪表中指针精确位置的指南。
在 Preview 中，使用 Node tool
来选择 SpeedNeedle。
在 Node tool 中点击顶部中心方块
，将 SpeedNeedle 节点对齐到其父节点 RootNode 节点的顶部中心。
在 Node tool 中，单击
并选择 Render Transformation 作为目标转换。您可以通过以下方式应用变换：
布局变换是在应用布局通道前对项进行变换。
渲染变换是在应用布局通道后、渲染前对项进行变换。
始终使用 Render Transformation，除非您知道必须重新计算布局。
在 Preview 中选择 Node tool
，然后单击 
以禁用对节点和指南的捕捉。当您禁用捕捉功能时，您可以使用 Node tool 在 Preview 中移动节点，以便它不会捕捉到节点或参考线。
使用 Node tool 将指针的底部精确放置在 Guides 中的十字准线正上方。
小技巧
当您拖动具有 Node tool 的节点时，按住 Shift 键以沿真正的水平或垂直线移动节点。
在 Node Tree 中选择 SpeedNeedle 节点，在 Properties 中右键单击，选择 Add Property > Transform 2D > Render Transformation Origin，并设置：
X 属性为 0,5。
Y 属性为 0,9。
在 Kanzi 中，默认情况下，所有 2D 节点的原点位于节点的左上角。因为您想围绕指针的底部中心旋转指针，所以您必须使用 Render Transformation Origin 将支点放置在那里。
使用自定义属性控制 SpeedNeedle。¶
属性提供了指定和检查节点的状态、外观和行为的手段。例如，属性可以定义颜色、指示按钮是否被按下或指定项目的对齐方式。
在本节中，您将创建并使用自定义属性来控制仪表中 SpeedNeedle 的位置。
在本节中，您将学习创建自定义属性类型并用其控制 SpeedNeedle 节点的旋转。
要使用自定义属性控制 SpeedNeedle 节点：
在 Library 中，按 Alt 并右键单击 Property Types 并选择 Property Type。
在 New Property Type 窗口中，设置：
Name 到 Gauges.Speed
Display Name 到 Speed
Category 到 Gauges
Data Type 到 Integer
将 Lower Bound 设置为 0。
Upper Bound 到 240。
单击 Save 以创建具有您定义的属性的属性类型。
您可以使用自定义属性类型控制 Gauges 节点中 SpeedNeedle 节点的位置。
在 Node Tree 中选择 Gauges 节点，在 Properties 中右键单击，然后选择 Add Property > Gauges > Speed。
在 Node Tree 中选择 SpeedNeedle 节点，在 Properties 中点击 + Add Binding，并在 Binding Editor 中设置：
Property 到 Render Transformation
Property Field 到 Rotation Z
Expression 到
{@../Gauges/Gauges.Speed} - 140当 Speed 属性的值为 0 时，您必须从该属性的值中减去 140，以便在仪表上正确地将指针定位在值 0。
单击 Save。
通过此修饰符绑定，您可以使用在上一步中添加的 Gauges 节点中的 Speed 属性围绕其 z 轴旋转 SpeedNeedle。
小技巧
当您在 Binding Editor 中为绑定编写表达式时，向表达式中添加节点及其属性的最快且最准确的方法是将它们从 Properties 拖动到 Binding Editor 中的 Expression 编辑器。
例如，要在 Gauges 节点中添加 Speed 属性，在 Node Tree 中选择 Gauges 节点，并从 Properties 将 Speed 属性拖到 Binding Editor 中的 Expression 字段。
现在可以通过调整 Gauges 节点中 Speed 属性的值来旋转指针。
将当前速度显示为数值¶
在本节中，您将学习创建将当前速度显示为数值的节点。
要将当前速度显示为数值：
在 Node Tree 按 Alt 并右键单击 的 Gauges > SpeedView 节点中，选择 Text Block 2D，并将该节点命名为 SpeedValue。
SpeedView 是一个 Stack Layout 2D 节点。Stack Layout 节点根据其 Direction 属性在轴上堆叠其子节点。SpeedView 包含显示速度单位的 Text Block 2D 节点 SpeedUnit。
在本节中，您使用 SpeedValue 节点来显示 SpeedNeedle 的当前值。
在 Node Tree 中，将 SpeedValue 节点拖到 SpeedUnit 节点上方，以在仪表中显示速度单位上方的速度值。
在 Node Tree 中选择 SpeedValue 节点，并在 Properties 中：
单击 + Add Binding，然后在 Binding Editor 中设置：
Property 到 Text
Expression 到
{@../../Gauges.Speed}
单击 Save。
通过此绑定，您可以在 SpeedValue 节点中显示 Gauges.Speed 属性的当前值。
小技巧
您可以右键单击某个属性并选择 Create Binding，开始为该属性创建绑定。
这样，您会自动将该属性添加到 Binding Editor 中。
添加并设置：
Font Size 到 80
Fixed Character Width 到 44
使用 Fixed Character Width 属性将任何字体转换为等宽字体。
当您更改 Gauges 节点中 Speed 属性的值时，您会旋转指针并在 SpeedValue 节点中显示该属性的值。