Masken, Überblendungseffekte und Tönungen anwenden

Die Elemente Group und Part* bieten auch die Attribute tintColor, renderMode und blendMode, mit denen sich das Erscheinungsbild von Abschnitten Ihres Zifferblatts anpassen lässt.

Beschneidungspfad mit einem Rendermodus verwenden

renderMode wurde in Version 1 von WFF eingeführt, um eine Clipping-Maske zu erstellen.

Das renderMode kann auf Group- und Part*-Elemente in der Szenenhierarchie angewendet werden. Der Zifferblatt-Renderer zeichnet die Elemente in der Reihenfolge, in der er den Szenenbaum durchläuft.

Wenn renderMode auf einen Knoten angewendet wird, wirkt sich das nur auf den übergeordneten Group dieses Knotens aus. Andere Knoten an anderer Stelle im Diagramm sind davon nicht betroffen.

Wenn kein renderMode angegeben ist, wird standardmäßig SOURCE verwendet. Das Element wird also direkt auf dem Bildschirm gerendert. Wenn jedoch ein oder mehrere Elemente im übergeordneten Knoten mit MASK (oder ALL) vorhanden sind, wird ein anderer Ansatz verwendet:

Ein Offscreen-Canvas wird erstellt.
Alle untergeordneten Elemente, für die SOURCE festgelegt ist (Standard), werden gezeichnet.
1. Alle untergeordneten Elemente, die Teil der Maske (MASK, ALL) sind, werden auf das Canvas angewendet, um das resultierende Bild zu beschneiden.

Das bedeutet, dass die Reihenfolge der Elemente im übergeordneten Knoten nicht berücksichtigt wird.

Im folgenden Beispiel enthält das übergeordnete Element Scene drei untergeordnete Elemente:

Das erste und dritte Element sind MASK-Elemente. Sie werden also zu einer Maskierungsebene kombiniert.
Das zweite Element ist die einzige nicht maskierende Ebene.

<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

Die dritte Option für renderMode neben SOURCE und MASK ist ALL. ALL gibt an, dass das Element sowohl als SOURCE als auch als MASK behandelt werden soll. Das kann in einigen Szenarien nützlich sein.

Mischmodus verwenden

Hinweis: Diese Funktion ist ab Version 3 des Zifferblattformats verfügbar.

Ab Version 3 bietet das Watch Face-Format die Möglichkeit, beim Erstellen von Part*-Elementen einen blend mode anzuwenden.

Im Gegensatz zu renderMode, bei dem ein spezieller Mechanismus zum Erstellen der Quelle bzw. Maske eingeführt wird, bietet blendMode allgemeinen Zugriff auf alle Android Graphics-Effekte für den Mischmodus und wendet Effekte in der Reihenfolge an, in der Elemente im Szenengraphen erscheinen.

Im Normalbetrieb wird das untere Element verdeckt oder teilweise verdeckt, wenn zwei Part*-Elemente in der Szene platziert werden, da der Standardwert für blendMode SRC_OVER ist.

<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

Wenn Sie SRC_ATOP auswählen, werden die Quellpixel verworfen, die keine Zielpixel abdecken. Die PartText ist die Quelle und das Ziel ist die PartDraw.

Daher wird Text nur über dem Rechteck und nicht an anderer Stelle auf dem Zifferblatt gezeichnet:

<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

Es können komplexere Effekte angewendet werden, z. B. COLOR_DODGE anstelle von SRC_ATOP, wodurch das Ziel heller wird, um die Quelle widerzuspiegeln.

Beispiel für das Kombinieren mehrerer Part*-Elemente mit den Mischmodi HUE und 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>watchface_effects.xml

Wissenswertes

In den folgenden Abschnitten werden einige Aspekte beschrieben, die Sie bei der Verwendung von Clipping- und Blending-Effekten beachten sollten.

Der Mischmodus wird vor dem Rendermodus angewendet.

Wenn ein Knoten sowohl Part-Elemente mit blendMode als auch Part-Elemente mit renderMode, die auf MASK (oder ALL) gesetzt sind, enthält, wird folgender Ansatz verwendet.

Die Quelle wird zusammengesetzt, einschließlich der Anwendung von blendMode-Modi.
Die Maske wird dann aus den Elementen angewendet, die rendermode="MASK angeben.

Wenn wir beispielsweise das vorherige Beispiel verwenden und eine rechteckige Maske hinzufügen, wobei die Reihenfolge des maskierten Elements keine Rolle spielt:

<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

Leistung

Die Verwendung von renderMode und blendMode erfordert zusätzliche Berechnungs- und Zeichenschritte. Je nach Gerät, auf dem das Zifferblatt ausgeführt wird, kann ein Teil davon effizient auf unterstützter Hardware ausgeführt werden. Auf älteren Geräten ist das jedoch möglicherweise nicht möglich.

Verwende renderMode und blendMode daher mit Bedacht und achte auf die Auswirkungen, die ihre Verwendung auf die Gesamtleistung des Zifferblatts haben kann.

Farbton verwenden

Ein tintColor kann auf das gesamte Part*-Element (Group) oder auf einzelne Hände wie HourHand und MinuteHand angewendet werden. Beispiel:

<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

Das kann nützlich sein, um einen ganzen Abschnitt des Zifferblatts zu gestalten, z. B. um den Stil aus den Nutzereinstellungen anzuwenden: tintcolor="[CONFIGURATION.myThemeColor.0]".

Masken, Überblendungseffekte und Tönungen anwenden Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.