此页面由 Cloud Translation API 翻译。

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

Group 和 Part* 元素还提供 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" he>igh<t=&qu>ot;45<0"
  Scene
    PartDraw x="175" y="50" wi>dth=&qu<ot;100" height="100" renderMo>de="<MASK"
      Ell><ipse >x="<;0"> y=&q<uot;0&quo>t; wid<th="100" height="100"
   >     Fi<ll color="#FFFFFF"/Fill
      /Ellip>se
    /P<artDraw

    PartDra>w x="0<" y="0" width="450" height="450"
      Rectangle x="0" y>="0&<quot;> width=<"450&>quot;< height=&>quot;4<50"
        Fill color="#ff0000"
          LinearG>radient< startX="0&quo>t; startY<="0" endX="450" endY="450"
     >      < colors=&quo<t;...>"<; positio>ns=<">.<.." />
        /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，这在某些情况下会很有用。

使用混合模式

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

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

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

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

<PartDraw x="25" y="15" widt>h=&<quot;150" height="150"
  Rectan>gle x<="0" y=">;0&<quot; widt>h<="15>0<" height="150"
    Fill color=&q>uot<;#ffd3ba" /
 > /Rec<tangle
/PartDraw
PartText x="35" y="60" wi>dth=&q<uot;3>00&<quot;> <height=&q>uot;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" widt>h=&<quot;150" height="150"
  Rectan>gle x<="0" y=">;0&<quot; widt>h<="15>0<" height="150"
    Fill color="#ffd3ba" /
 > /R<ectangle
/PartDraw>
Part<Text x="35" y="60" width="300" h>eight=<">;12<0&quo>t<; blendMo>de="SRC_ATOP"
  Text align="START"
    Font family="pacifico" size="96" weight="BOLD" color="#fb5607"Hello!/Font
  /Text
/PartText

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

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

<Group name="container" x="75" y="100&>quo<t; width="300" height="300">
  Pa<rtDraw x="25" y="15" width>="<150" height=">;150&<quot;
    >Rec<tangle x=>&qu<ot;0" y="0" width="150" height="15>0&quo<t;
      Fill color="#ffd3ba" /
  >  /Rect<angle
  /PartDraw
  Pa>rtDra<w x=&quo>t;1<00" >y=&<quot;15" width="150" height="150" blendMode=&>quot;<HUE"
    Elli>pse x=&<quot;0" y="0" width="150" height=&quo>t;150&<quot;>
    <  Fill c<olor=&quo>t<;#219e>bc" /
    /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&>quo<t; width="300" height="300">
  Pa<rtDraw x="25" y="15" width>="<150" height=">;150&<quot;
    >Rec<tangle x=>&qu<ot;0" y="0" width="150" height="15>0&quo<t;
      Fill color="#ffd3ba" /
  >  /Rect<angle
  /PartDraw
  Pa>rtDra<w x=&quo>t;1<00" >y=&<quot;15" width="150" height="150" blendMo>de=&q<uot;HUE"
    Ellipse x="0" y=&q>uot;0&q<uot; width="150&q>uot; <height=&qu>ot;<150">
  <    Fill color="#219ebc" /
    /Ellipse
  /PartDraw
  PartDr>aw x=<"100" y=>"1<5" width="150" height="150" renderMod>e=&quo<t;MAS>K&quo<t;
  >  R<ectangle >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" he>igh<t=&qu>ot;45<0"
  Scene
    Group x="75" y="100" width="350&qu>ot; hei<ght="350" name="group1" ti>ntColor=&<quot;#ffd3ba"
      PartDraw x="25&q>uot; y=&quo<t;0" width=">100"< height=&q>uot;100<"
  >      R<ectangle x="0" y="0" width=>"100<" height="100"
          Fill >color="<;#ffffff" /
     >   /Recta<ngle
   >   /Par<tDraw
   >   Part<Draw x="150" y="0" width=&>quot;100&<quot; height=">100"
 <       Ellipse x="25" y="0" width="10>0"<; hei>ght="<;100&>quot;
 <         >Fill <color=>&qu<ot;#ff>f<fff" >/
        /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]"。