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

元素也提供了 tintColor, renderMode 和 blendMode 属性，这些都是调整表盘部分外观的强大方式。

使用具有渲染模式的裁剪遮罩

WFF 版本 1 中引入了 renderMode 以实现裁剪遮罩。

renderMode 可以应用于场景层次结构中的 Group 和 Part* 元素。为了更好地理解其工作原理，请考虑场景图的渲染方式

<Group>
  <Group>
    <PartDraw />
    <PartText />
  </Group>
  <PartImage />
</Group>

表盘渲染器在遍历场景树时按顺序绘制元素。

当 renderMode 应用于某个节点时，该效果仅在该节点的父 Group 内部生效。图中其他位置的节点不受影响。

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

系统会创建一个离屏画布
所有设置为 SOURCE（默认值）的子元素都会被绘制
1. 作为遮罩一部分的所有子元素（MASK, ALL）都会应用于画布，以裁剪生成的图片。

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

在以下示例中，Scene 父项包含三个子项

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

<WatchFace width="450" height="450">
  <Scene>
    <PartDraw x="175" y="50" width="100" height="100" renderMode="MASK">
      <Ellipse x="0" y="0" width="100" height="100">
        <Fill color="#FFFFFF"></Fill>
      </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="..." positions="..." />
        </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>
  </Scene>
</WatchFace>

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

使用混合模式

注意：此功能在 Watch Face Format 版本 3 及更高版本中可用。

从版本 3 开始，Watch Face Format 提供了在组合 Part* 元素时应用混合模式的功能。

与引入特殊机制分别构建源和遮罩的 renderMode 不同，blendMode 提供了对所有Android 图形混合模式效果的通用访问权限，并按照元素在场景图中的出现顺序应用效果。

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

<PartDraw x="25" y="15" width="150" height="150">
  <Rectangle x="0" y="0" width="150" height="150">
    <Fill color="#ffd3ba" />
  </Rectangle>
</PartDraw>
<PartText x="35" y="60" width="300" height="120">
  <Text align="START">
    <Font family="pacifico" size="96" weight="BOLD" color="#fb5607">Hello!</Font>
  </Text>
</PartText>

作为使用混合模式的演示，选择SRC_ATOP 会丢弃不覆盖目标像素的源像素。也就是说，PartText 是源，而目标是 PartDraw。

因此，结果是文本只绘制在矩形上，而不是表盘的其他地方

<PartDraw x="25" y="15" width="150" height="150">
  <Rectangle x="0" y="0" width="150" height="150">
    <Fill color="#ffd3ba" />
  </Rectangle>
</PartDraw>
<PartText x="35" y="60" width="300" height="120" blendMode="SRC_ATOP">
  <Text align="START">
    <Font family="pacifico" size="96" weight="BOLD" color="#fb5607">Hello!</Font>
  </Text>
</PartText>

可以应用更复杂的效果，例如使用COLOR_DODGE 而不是 SRC_ATOP，它会使目标变亮以反映源。

一个结合多个 Part* 元素使用HUE 和COLOR_BURN 混合模式的示例

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

注意事项

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

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

如果节点包含使用 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>

性能

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

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

使用着色

tintColor 可以应用于整个 Part* 元素、Group 或单独的指针，例如 HourHand 和 MinuteHand

<WatchFace width="450" height="450">
  <Scene>
    <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>
  </Scene>
</WatchFace>

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

应用遮罩、混合效果和着色 使用收藏夹整理内容 根据您的偏好保存并分类内容。