VAPS XT入门教程14.11：滚动数字

本文拆自官方示例中的RollingDigitsExample。

实现的效果就和飞机的高度计一样，左侧显示数值刻度线，右侧显示当前值。就当前状况项目来看，还是很常用的功能。

你需要了解：

VAPS XT入门教程12.02.02：计算器介绍中的LinearInterpolation
VAPS XT入门教程12.02.09：基本组（BasicGroups）介绍中的ClippingRegion
VAPS XT入门教程12.02.10：基本控件（GraphicPrimitives）介绍中的LinearTicks

首先创建一个根工程RollingDigit

滚动数字

在根工程中添加一个画面对象（Graphical Object, GO）ScrollingDigit，在默认属性中添加一个Float类型变量名为Value，类型为Input，默认值为0，In Drawing Unit为FALSE。绘图单位为Hundredth_Of_MM

向GO中添加一个IntData用于缓存。

向GO中添加一个ClippingRegion，用于将数字的部分隐藏起来。坐标为(-450,-625) (450,625)

clippingregion

向ClippingRegion中添加一个SimpleGroup用于管理内部控件。

向SimpleGroup中添加两个Text控件，用于显示数字，因为只是数字所以Text就够了。

两个文字控件分别为Text_0 Text_1，居中对齐，控件大小为(0,0)，文字宽度为1，字体为F4，Y位置分别为0，1000，容量为1，只显示一个字符就可以了。

text

界面设计完成，接下来要处理一些逻辑。

在Data Flow中添加

1	`ClipToInt(.Value) -> IntData_1.Value`

左侧是将.Value属性值（也就是传进来的参数）限制在Int范围内，右侧是将参数保存的缓存中待用。

1	`IntData_1.Value % 10 -> Text_0.DataString`

左侧是将值限制在0-9的范围内，然后将值转换为字符并显示在默认文本框中。

1	`(IntData_1.Value + 1) % 10 -> Text_1.DataString`

将当前值的下一值限制在0-9范围内，同时显示在不可见文本框中。

1	`(ClipToFloat(IntData_1.Value) - .Value) * ClipToFloat(1000 du) -> SimpleGroup_1.Position.Y`

控件的绘图基准是Hundredth_Of_MM，默认是每英寸2540个单位像素，而第二个文本框在第一个文本框上方1000个单位。

du就是display unit，即显示单元，默认1du=1pix。

先计算输入的值与不大于这个值最大的整数（即ceil运算）的差值。比如输入为1.5，那么IntData_1.Value值就是1，Text_0.DataString值就是1，Text_1.DataString值就是2，ClipToFloat就是保证IntData_1的值在Float范围内，两个相减就是1 - 1.5 = -0.5，左侧值就是 -0.5 * 1000 = -500du，那就是SimpleGroup_1的位置在默认基础上向下移动500个像素，受到ClippingRegion控件影响，Text_0的一半被遮住，而Text_1的一半显示在控件中。

result

滚动刻度线

添加一个GO，命名为ScrollingScale。在其内部添加一个ClippingRegion用于屏蔽部分界面，位置是(1750,3150) (4250,10150)

再添加一个SimpleGroup用于管理，位置为(2667,6578.6)

在SimpleGroup中添加一个TransformGroup界面用于对界面进行移动旋转等操作。

在TransformGroup中添加一根线，设置始终点坐标(4675,1650) (4675,12050)

scale

添加一个LinearTicks用于批量生成整数值线条。起点是(4150,1650) 终点是(4150,12050) 线条长度为1050，4条线。

num

添加一个LinearTicks用于显示数值线条。起点(4375,1650) 终点(4375,12050) 线条长度为600，16条线。

num

这是在控件内部查看的效果，如果是在顶层的GO中查看的话，会发现部分线条被隐藏了。

scale

在添加四个Text用于显示数值，将四个控件调整为居中，宽度为1，大小为(0,0) 容量根据显示内容调整，位置分别为(3600,1650) (3600,5116.37) (3600,8583.33) (3600,12050)

numbers

显示值

用于显示当前的高度值，就是把可以滚动的数值组合起来。

为什么滚动数值没有边框呢？因为它们将使用统一的边框。

添加一个Format用于最终显示，添加一个FloatData作为原始数据缓存，然后添加三个IntData作为数值缓存。

再添加三个ScrollingDigit数字显示控件，位置分别为(6800,6850) (6150,6850) (5500,6850)

添加五条线将三个数字框起来。

numbers

然后添加数据流

1
2
3

ClipToInt(FloatData_1.Value) -> IntData_1.Value
IntData_1.Value / 10 -> IntData_2.Value
IntData_2.Value / 10 -> IntData_3.Value

从数据源获取数据

1
2
3

FloatData_1.Value -> ScrollingDigit_1.Value
ClipToFloat(IntData_2.Value) + IfElse(IntData_1.Value % 10 == 9,FloatData_1.Value - ClipToFloat(IntData_1.Value),0)	-> ScrollingDigit_2.Value	
ClipToFloat(IntData_3.Value) + IfElse(IntData_1.Value % 100 == 99,FloatData_1.Value - ClipToFloat(IntData_1.Value),0)	-> ScrollingDigit_3.Value

设置数字需要显示的值