应用遮罩、混合效果和色调

Group 和 Part* 元素还提供 tintColor, renderMode 和 blendMode 属性，这些属性可用于以强大的方式调整表盘部分的外观。

将剪切蒙版与渲染模式搭配使用

renderMode 是在 WFF 版本 1 中引入的，用于实现剪裁遮罩。

renderMode 可应用于场景层次结构中的 Group 和 Part* 元素。表盘主题渲染器在遍历场景树时按顺序绘制元素。

当 renderMode 应用于节点时，其效果仅适用于该节点的父级 Group。图表中其他位置的其他节点不受影响。

如果未指定 renderMode，则默认值为 SOURCE，这意味着元素直接绘制到屏幕上。不过，当父节点中存在一个或多个指定了 MASK（或 ALL）的元素时，系统会采用不同的方法：

创建了屏幕外画布
所有设置了 SOURCE（默认值）的子元素都会绘制出来
1. 属于遮罩 (MASK, ALL) 的所有子元素都会应用于画布，以剪裁生成的图片。

请注意，这意味着系统不会考虑父节点中元素的顺序。

在以下示例中，Scene 父元素包含三个子元素：

第一个和第三个元素是 MASK 元素，因此它们会组合在一起以形成遮罩层
第二个元素是唯一非遮盖层

<PartDraw x="175" y="50" width="100" height="100" renderMode="MASK">
    <Ellipse x="0" y="0" width="100" height="100">
        <Fill color="#FFFFFF" />
    </Ellipse>
</PartDraw>

<PartDraw x="0" y="0" width="450" height="450">
    <Rectangle x="0" y="0" width="450" height="450">
        <Fill color="#ff0000">
            <LinearGradient startX="0" startY="0" endX="450" endY="450"
                colors="#FFFF00 #00FFFF #FF00FF" positions="0.25 0.5 0.75" />
        </Fill>
    </Rectangle>
</PartDraw>

<PartText x="75" y="250" width="300" height="80" renderMode="MASK">
    <Text align="CENTER">
        <Font family="pacifico" size="72" weight="BOLD" color="#FFFFFF">Hello!</Font>
    </Text>
</PartText>watchface_effects.xml

除了 SOURCE 和 MASK 之外，renderMode 的第三个选项是 ALL。 ALL 指定元素应同时被视为 SOURCE 和 MASK，这在某些情况下非常有用。

使用混合模式

注意：此功能适用于表盘格式的第 3 版及更高版本。

自版本 3 起，表盘格式在合成 Part* 元素时支持应用混合模式。

与 renderMode（它引入了一种用于分别构建源和遮罩的特殊机制）不同，blendMode 提供对所有 Android Graphics 混合模式效果的一般访问权限，并按元素在场景图中的显示顺序应用效果。

在正常运行中，当场景中放置了两个 Part* 元素时，最上面的元素会遮挡或部分遮挡下面的元素，因为默认的 blendMode 是 SRC_OVER。

<PartDraw x="125" y="115" width="150" height="150">
    <Rectangle x="0" y="0" width="150" height="150">
        <Fill color="#ffd3ba" />
    </Rectangle>
</PartDraw>
<PartText x="135" y="160" width="300" height="120">
    <Text align="START">
        <Font family="pacifico" size="96" weight="BOLD" color="#fb5607">Hello!</Font>
    </Text>
</PartText>watchface_effects.xml

为了演示如何使用混合模式，选择 SRC_ATOP 会舍弃未覆盖目标像素的源像素。也就是说，PartText 是来源，PartDraw 是目的地。

因此，文字仅绘制在矩形上，而不会绘制在表盘的其他位置：

<PartDraw x="125" y="115" width="150" height="150">
    <Rectangle x="0" y="0" width="150" height="150">
        <Fill color="#ffd3ba" />
    </Rectangle>
</PartDraw>
<PartText x="135" y="160" width="300" height="120" blendMode="SRC_ATOP">
    <Text align="START">
        <Font family="pacifico" size="96" weight="BOLD" color="#fb5607">Hello!</Font>
    </Text>
</PartText>watchface_effects.xml

您可以应用更复杂的效果，例如使用 COLOR_DODGE 而不是 SRC_ATOP，这样可以使目标更亮以反映来源。

以下示例展示了如何使用 HUE 和 COLOR_BURN 混合模式组合多个 Part* 元素：

<Group name="container" x="75" y="100" width="300" height="300">
    <PartDraw x="25" y="15" width="150" height="150">
        <Rectangle x="0" y="0" width="150" height="150">
            <Fill color="#ffd3ba" />
        </Rectangle>
    </PartDraw>
    <PartDraw x="100" y="15" width="150" height="150" blendMode="HUE">
        <Ellipse x="0" y="0" width="150" height="150">
            <Fill color="#219ebc" />
        </Ellipse>
    </PartDraw>
    <PartText x="35" y="60" width="300" height="120" blendMode="COLOR_BURN">
        <Text align="START">
            <Font family="pacifico" size="96" weight="BOLD" color="#fb5607">Hello!</Font>
        </Text>
    </PartText>
</Group>watchface_effects.xml

注意事项

以下部分介绍了使用剪裁和混合效果时需要注意的一些事项。

混合模式在渲染模式之前应用

如果某个节点同时包含使用 blendMode 的 Part 元素和使用 renderMode 设置为 MASK（或 ALL）的 Part 元素，则采用以下方法。

来源已合成，包括应用 blendMode 模式
然后，系统会从指定 rendermode="MASK 的这些元素应用遮盖

例如，考虑之前使用的示例，并添加矩形遮罩，注意遮罩元素的顺序无关紧要：

<Group name="container" x="75" y="100" width="300" height="300">
    <PartDraw x="25" y="15" width="150" height="150">
        <Rectangle x="0" y="0" width="150" height="150">
            <Fill color="#ffd3ba" />
        </Rectangle>
    </PartDraw>
    <PartDraw x="100" y="15" width="150" height="150" blendMode="HUE">
        <Ellipse x="0" y="0" width="150" height="150">
            <Fill color="#219ebc" />
        </Ellipse>
    </PartDraw>
    <PartDraw x="100" y="15" width="150" height="150" renderMode="MASK">
        <Rectangle x="0" y="0" width="150" height="150">
            <Fill color="#ffffff" />
        </Rectangle>
    </PartDraw>
    <PartText x="35" y="60" width="300" height="120" blendMode="COLOR_BURN">
        <Text align="START">
            <Font family="pacifico" size="96" weight="BOLD" color="#fb5607">Hello!</Font>
        </Text>
    </PartText>
</Group>watchface_effects.xml

性能

使用 renderMode 和 blendMode 都需要额外的计算和绘制步骤。根据表盘运行的设备，其中一些操作可以在受支持的硬件中高效执行，但在旧款设备上可能无法实现。

因此，请谨慎使用 renderMode 和 blendMode，并注意使用它们可能会对表盘主题的整体性能产生的影响。

使用色调

tintColor 可应用于整个 Part* 元素、Group 或单个指针（例如 HourHand 和 MinuteHand），例如：

<Group x="75" y="100" width="350" height="350" name="group1" tintColor="#ffd3ba">
    <PartDraw x="25" y="0" width="100" height="100">
        <Rectangle x="0" y="0" width="100" height="100">
            <Fill color="#ffffff" />
        </Rectangle>
    </PartDraw>
    <PartDraw x="150" y="0" width="100" height="100">
        <Ellipse x="25" y="0" width="100" height="100">
            <Fill color="#ffffff" />
        </Ellipse>
    </PartDraw>
    <PartText x="0" y="150" width="300" height="80">
        <Text align="CENTER">
            <Font family="pacifico" size="72" weight="BOLD" color="#ffffff">Hello!</Font>
        </Text>
    </PartText>
</Group>watchface_effects.xml

这对于设置表盘整个部分的样式非常有用，包括应用用户设置中的样式，例如：tintcolor="[CONFIGURATION.myThemeColor.0]"。

应用遮罩、混合效果和色调 使用集合让一切井井有条 根据您的偏好保存内容并对其进行分类。