表示时间

表盘的主要任务是显示时间，借助表盘格式，您可以使用 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 会扩展此处的选项。

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

显示世界其他地点的时间（例如世界时钟）也很有用。这可以通过 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 提供配置选项，以允许用户选择：

<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>