Diese Seite wurde von der Cloud Translation API übersetzt.

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

Die Elemente Group und Part* bieten außerdem die Attribute tintColor, renderMode und blendMode, mit denen sich die Darstellung von Bereichen Ihres Zifferblatts anpassen lässt.

Schnittmasken mit einem Rendermodus verwenden

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

Die renderMode kann auf Group- und Part*-Elemente in der Szenenhierarchie angewendet werden. Um zu verstehen, wie das funktioniert, sehen wir uns an, wie die Szenengraphik gerendert wird:

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

Der Renderer des Zifferblatts zeichnet die Elemente in der Reihenfolge, in der sie im Szenenbaum durchlaufen werden.

Wenn renderMode auf einen Knoten angewendet wird, gilt der Effekt nur innerhalb des übergeordneten Group dieses Knotens. Andere Knoten im Graphen sind davon nicht betroffen.

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

Eine Off-Screen-Canvas wird erstellt
Alle untergeordneten Elemente mit SOURCE (Standardeinstellung) werden dargestellt.
1. Alle untergeordneten Elemente, die Teil der Maske (MASK, ALL) sind, werden auf das Canvas angewendet, um das resultierende Bild zu zuschneiden.

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:

Die ersten und dritten Elemente sind MASK-Elemente und werden daher zu einer Maskierungsebene kombiniert.
Das zweite Element ist die einzige Ebene ohne Maske.

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

Die dritte Option für renderMode neben SOURCE und MASK ist ALL. Mit ALL wird angegeben, dass das Element sowohl als SOURCE als auch als MASK behandelt werden soll. Das kann in einigen Fällen nützlich sein.

Mischmodus verwenden

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

Ab Version 3 können Sie mit dem Watch Face-Format beim Erstellen von Part*-Elementen einen Mischmodus anwenden.

Im Gegensatz zu renderMode, bei dem ein spezieller Mechanismus zum Erstellen der Quelle bzw. Maske eingeführt wird, bietet blendMode allgemeinen Zugriff auf alle Effekte des Android-Grafik-Überblendungsmodus und wendet Effekte in der Reihenfolge an, in der Elemente in der Szenengraphik erscheinen.

Wenn im Normalbetrieb zwei Part*-Elemente in der Szene platziert werden, verdeckt das oberste Element das untere Element vollständig oder teilweise, da die StandardblendMode SRC_OVER ist.

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

Zur Veranschaulichung der Verwendung von Überblendungsmodi: Wenn Sie SRC_ATOP auswählen, werden die Quellpixel verworfen, die keine Zielpixel abdecken. Dabei ist PartText die Quelle und PartDraw das Ziel.

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

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

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

Beispiel für die Kombination 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>

Ohne blendMode-Effekte

Mit blendMode-Effekten

Wissenswertes

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

Der Mischmodus wird vor dem Rendermodus angewendet.

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

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

Betrachten wir beispielsweise das vorherige Beispiel und fügen eine rechteckige Maske hinzu. Die Reihenfolge der maskierten Elemente spielt dabei keine Rolle:

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

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 auf unterstützter Hardware effizient ausgeführt werden. Auf älteren Geräten ist dies jedoch möglicherweise nicht möglich.

Verwenden Sie renderMode und blendMode daher mit Bedacht und berücksichtigen Sie die Auswirkungen, die ihre Verwendung auf die Gesamtleistung des Zifferblatts haben kann.

Tönungen verwenden

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

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

Das kann nützlich sein, um einen ganzen Bereich des Zifferblatts zu gestalten, einschließlich der Anwendung des Stils aus den Nutzereinstellungen, z. B.: 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.