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

Group 和 Part* 元素也提供 tintColor, renderMode 和 blendMode 屬性，可有效調整錶面各部分的顯示方式。

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

renderMode 是在 WFF 第 1 版中導入，用於實現裁剪遮罩。

renderMode 可套用至場景階層中的 Group 和 Part* 元素。錶面算繪器會在遍歷場景樹狀結構時，依序繪製元素。

將 renderMode 套用至節點時，效果只會套用至該節點的父項 Group。圖表中其他位置的節點不會受到影響。

如未指定 renderMode，預設值為 SOURCE，表示元素會直接繪製到畫面上。不過，如果父項節點中有一或多個元素指定了 MASK (或 ALL)，則會使用不同的方法：

  1. 建立螢幕外畫布
  2. 系統會繪製所有設有 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 不同，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 元素，則會採取下列做法。

  1. 來源會經過合成，包括套用 blendMode 模式
  2. 然後從指定 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]"。