本頁面由 Cloud Translation API 翻譯而成。

套用遮罩、混合效果和色調

Group 和 Part* 元素也提供 tintColor, renderMode 和 blendMode 屬性，可用來調整錶面各部分的外觀。

使用裁剪遮罩搭配算繪模式

renderMode 是在 WFF 1 版中引入，用於建立裁剪遮罩。

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，這在某些情況下可能很實用。

使用混合模式

注意：這項功能適用於 Watch Face Format 3 以上版本。

自第 3 版起，錶面格式可在組合 Part* 元素時套用混合模式。

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 的 Part 元素 (已設為 MASK 或 ALL)，則會採用下列做法。

來源會經過合成，包括套用 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]"。

套用遮罩、混合效果和色調 透過集合功能整理內容 你可以依據偏好儲存及分類內容。