基于WatchFaceFormat(WFF)创建无资源文件的简易模拟表盘技术咨询

现有代码核心问题 #

你的代码主要问题在于指针旋转锚点未对准表盘中心，导致指针位置和旋转逻辑错误，同时缺少表盘刻度，无法构成完整的模拟表盘。以下是修正后的实现方案，全程不依赖PNG/SVG等外部资源。

修正后的完整代码 #

<?xml version="1.0"?>
<WatchFace width="450" height="450">
    <Metadata key="CLOCK_TYPE" value="ANALOG" />
    <Metadata key="PREVIEW_TIME" value="10:08:32" />

    <Scene backgroundColor="#000000">
        <!-- 表盘刻度：12个大刻度 + 48个小刻度 -->
        <!-- 四个主方向大刻度 -->
        <Circle cx="225" cy="45" r="6" color="#ffffff" />
        <Circle cx="405" cy="225" r="6" color="#ffffff" />
        <Circle cx="225" cy="405" r="6" color="#ffffff" />
        <Circle cx="45" cy="225" r="6" color="#ffffff" />
        <!-- 其余8个大刻度（通过旋转复用） -->
        <Circle cx="225" cy="80" r="4" color="#ffffff" rotation="30" pivotX="225" pivotY="225" />
        <Circle cx="225" cy="80" r="4" color="#ffffff" rotation="60" pivotX="225" pivotY="225" />
        <Circle cx="225" cy="80" r="4" color="#ffffff" rotation="120" pivotX="225" pivotY="225" />
        <Circle cx="225" cy="80" r="4" color="#ffffff" rotation="150" pivotX="225" pivotY="225" />
        <Circle cx="225" cy="80" r="4" color="#ffffff" rotation="210" pivotX="225" pivotY="225" />
        <Circle cx="225" cy="80" r="4" color="#ffffff" rotation="240" pivotX="225" pivotY="225" />
        <Circle cx="225" cy="80" r="4" color="#ffffff" rotation="300" pivotX="225" pivotY="225" />
        <Circle cx="225" cy="80" r="4" color="#ffffff" rotation="330" pivotX="225" pivotY="225" />
        <!-- 小刻度示例（每5分钟间隔的4个刻度，其余可按相同逻辑补充） -->
        <Circle cx="225" cy="60" r="2" color="#aaaaaa" rotation="6" pivotX="225" pivotY="225" />
        <Circle cx="225" cy="60" r="2" color="#aaaaaa" rotation="12" pivotX="225" pivotY="225" />
        <Circle cx="225" cy="60" r="2" color="#aaaaaa" rotation="18" pivotX="225" pivotY="225" />
        <Circle cx="225" cy="60" r="2" color="#aaaaaa" rotation="24" pivotX="225" pivotY="225" />

        <!-- 模拟时钟指针 -->
        <AnalogClock x="0" y="0" width="450" height="450">
            <!-- 时针：以表盘中心为旋转锚点 -->
            <HourHand x="221" y="225" width="8" height="100" pivotX="4" pivotY="0" alpha="255">
                <Rectangle x="0" y="0" width="8" height="100" color="#ffffff" />
            </HourHand>

            <!-- 分针：以表盘中心为旋转锚点 -->
            <MinuteHand x="222" y="225" width="6" height="130" pivotX="3" pivotY="0" alpha="255">
                <Rectangle x="0" y="0" width="6" height="130" color="#00ff00" />
            </MinuteHand>

            <!-- 秒针：以表盘中心为旋转锚点 -->
            <SecondHand x="224" y="225" width="2" height="150" pivotX="1" pivotY="0" alpha="255">
                <Rectangle x="0" y="0" width="2" height="150" color="#ff0000" />
            </SecondHand>
        </AnalogClock>

        <!-- 表盘中心圆点 -->
        <Circle cx="225" cy="225" r="5" color="#ffffff" />
    </Scene>
</WatchFace>

关键实现说明 #

1. 指针锚点修正：

   • 时针x=221（225减去自身宽度的一半），确保水平居中于表盘中心；pivotY=0将旋转锚点设在指针靠近中心的一端，配合y=225，实现围绕表盘中心旋转。
   • 分针、秒针采用相同逻辑，根据自身宽度调整x坐标，保证水平居中。

2. 无资源刻度实现：

   • 使用Circle元素创建刻度，通过rotation属性旋转复制，无需重复编写大量代码；大刻度用白色、大半径，小刻度用浅灰色、小半径区分。
   • 所有刻度的pivotX和pivotY均设为表盘中心(225,225)，确保旋转后位置正确。

3. 视觉完整性优化：添加白色小圆点覆盖指针根部，提升表盘整体美观度。

参考资料翻译 #

1. android/wear-os-samples → Android Wear OS 示例项目
2. AnalogClock官方文档 → AnalogClock 官方文档

内容的提问来源于stack exchange，提问作者3kstc