显示时间

表盘的主要作用是显示时间，表盘格式允许您使用 AnalogClock 和 DigitalClock 元素创建模拟时钟和数字时钟。

数字时钟

可以在表盘 Scene 中使用 DigitalClock 和 TimeText 元素定义一个基本的数字时钟。

<DigitalClock x="100" y="100" width="200" height="50">
    <TimeText x="0" y="0" width="200" height="50" format="hh:mm">
        <Font family="SYNC_TO_DEVICE" size="16" />
    </TimeText>
</DigitalClock>

format 属性允许您通过小时、分钟和秒的组合来控制时间的表示方式。具体选项因所使用的表盘格式版本而异；版本 2 在此扩展了选项。

在前面的示例中，字体设置为使用系统字体。

显示世界其他地点的时间（例如“世界时钟”）也可能很有用。这可以通过 Localization 元素实现。

<DigitalClock x="100" y="100" width="200" height="50">
    <Localization timeZone="Europe/London" />
    ...
</DigitalClock>

模拟时钟

要创建模拟时钟，请使用 AnalogClock 元素。每个 HourHand, MinuteHand 和 SecondHand 子元素都指定了应在渲染中使用的资源。

<AnalogClock x="0" y="0" width="200" height="200">
    <HourHand resource="hour_hand" ... />
    <MinuteHand resource="minute_hand" />
    <SecondHand resource="second_hand" />
    <!-- Optionally add a Tick or Sweep child element to define SecondHand behavior -->
</AnalogClock>

指定枢轴点

时针、分针和秒针资源都会随着时间推移而旋转，但重要的是要指定每个指针应围绕其旋转的正确点。

在某些情况下，枢轴点不完全在指针的底部，而是水平居中。这应该指定为 <HourHand … pivotY="(pivot_ratio)" />，其中

$$ pivot\_ratio = \frac{pivot\_height}{full\_height} $$

为表针着色

为了允许用户自定义表盘的外观，通常会为表针提供可配置的颜色。

一种实现方式是在每个指针上使用 tintColor 来单独为每个指针着色，或者在 AnalogClock 上使用 tintColor 来为所有指针着相同的颜色。

除了允许用户为特定颜色着色外，您还可以向 tintColor 提供配置选项，以允许用户选择。

<AnalogClock ... tintColor="[CONFIGURATION.handColors.0]" />

阴影

为了获得逼真的表针效果，在每个指针后面使用阴影可以产生深度感。要实现这一点，请使用两种类型的指针，一个在另一个后面偏移，并为阴影提供单独的资源。

<!-- Offset the shadow by 5 units in both directions -->
<HourHand resource="hour_hand_shadow" ... x="105" y="105">
<!-- ... -->
<HourHand resource="hour_hand" ... x="100" y="100">

表盘装饰

模拟表盘通常在表盘周围有显示小时或分钟的装饰。有两种方法可以实现这一点：

  1. 包含一个全屏背景图片，其中包含您预先绘制的表盘。请参阅处理图片。

    <PartImage x="0" y="0" width="450" height="450" ...>
    <Image resource="watch_face_dial" />
</PartImage>

  2. 绘制单独的装饰并使用旋转将其定位在表盘周围。

    <Group ... >
    <!-- Content for the "12" marker -->
</Group>
<Group pivotX="..." pivotY="..." angle="30">
    <!-- Content for the "1" marker -->
</Group>