表示时间

表盘的主要任务是显示时间，借助表盘格式，您可以使用 AnalogClock 和 DigitalClock 元素创建模拟和数字时钟。

数字时钟

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

<DigitalClock x="100" y="100" wid>th=&q<uot;200" height="50"
    TimeText x="0&>quot; y=&<quot;0" width="200" heigh>t=&qu<ot;50&quo>t<; format=&quo>t;hh:mm"
        Font family="SYNC_TO_DEVICE" size="16" /
    /TimeText
/DigitalClock

借助 format 属性，您可以控制使用时、分、秒的组合来表示时间的方式。具体选项因所使用的表盘格式版本而异；版本 2 会扩展此处的选项。

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

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

<DigitalClock x="100" y="100" wid>th=&q<uot;200" height="50"
   > Localiza<tion timeZone>="Europe/London" /
    ...
/DigitalClock

指针式时钟

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

<AnalogClock x="0" y="0" widt>h=&qu<ot;200" height="200">
    <HourHand resource="hour_hand&q>uot; <... /
    MinuteHand resource=">;minu<te_hand" /
    SecondHand resource="second_hand" /
    !-- Optiona>l<ly add a Tic>k 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=&qu>o<t;105">;< y="105"
!-- ... --
HourHand resource=&>quot;hour_hand" ... x="100" y="100"

面部装饰

模拟表盘通常在表盘周围有装饰，用于显示小时或分钟。为此，您可以采用以下两种方法：

  1. 添加全屏背景图片，其中包含预先绘制的表盘。请参阅使用图片。

    <PartImage x="0" y="0" width=&q>uot;4<50" height="450" ..>.<
    Image> resource="watch_face_dial" /
/PartImage

  2. 绘制单独的装饰，并使用旋转将其放置在脸部周围。

    <Group ... >
    <!-- Content for the "12"> <marker> <--
/Group
Group pivotX="..." piv>otY=&<quot;..." angle="30&quo>t<;
    >!-- Content for the "1" marker --
/Group