Ta strona została przetłumaczona przez Cloud Translation API.

stosować maski, efekty mieszania i odcienie.
Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

Elementy Group i Part* zawierają też atrybuty tintColor, renderMode i blendMode, które umożliwiają skuteczne dostosowywanie wyglądu poszczególnych sekcji tarczy zegarka.

Używanie masek przycinania w trybie renderowania

W wersji 1 WFF wprowadzono renderMode, aby uzyskać maskę przycięcia.

renderMode można stosować do elementów Group i Part* w hierarchii sceny. Aby lepiej zrozumieć, jak to działa, zastanów się, jak renderowana jest tablica sceny:

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

Renderer tarczy rysuje elementy w kolejności podczas przechodzenia przez scenę.

Gdy tag renderMode zostanie zastosowany do węzła, jego efekt będzie dotyczył tylko jego Group. Nie ma to wpływu na inne węzły w grafu.

Jeśli nie określono właściwości renderMode, domyślnie jest ona ustawiona na SOURCE, co oznacza, że element jest rysowany bezpośrednio na ekranie. Jeśli jednak w węźle nadrzędnym znajduje się co najmniej 1 element z wartością MASK (lub ALL), stosuje się inne podejście:

Tworzenie obrazu poza ekranem
Rysowane są wszystkie elementy podrzędne z ustawionym atrybutem SOURCE (domyślnie).
1. Wszystkie elementy podrzędne, które są częścią maski (MASK, ALL), są stosowane na płótnie, aby przyciąć wynikowy obraz.

Oznacza to, że kolejność elementów w nadrzędnym węźle nie jest brana pod uwagę.

W tym przykładzie element nadrzędny Scene zawiera 3 elementy podrzędne:

Pierwszy i trzeci element to elementy MASK, więc są one łączone, aby utworzyć warstwę maskowania.
Drugi element jest jedyną warstwą bez maskowania.

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

Trzecią opcją dla renderMode oprócz SOURCE i MASK jest ALL. ALL określa, że element powinien być traktowany zarówno jako SOURCE, jak i MASK, co może być przydatne w niektórych sytuacjach.

Używanie trybu mieszania

Uwaga: ta funkcja jest dostępna w wersji 3 lub nowszej formatu tarczy zegarka.

Od wersji 3 Format tarczy zegarka umożliwia zastosowanie trybu mieszania podczas komponowania elementów Part*.

W przeciwieństwie do renderMode, która wprowadza specjalny mechanizm do konstruowania odpowiednio źródła i maski, blendMode zapewnia ogólny dostęp do wszystkich efektów trybu mieszania Grafiki Androida i zastosowuje efekty w kolejności, w jakiej elementy pojawiają się w graficznej reprezentacji sceny.

Podczas normalnej pracy, gdy w scenie znajdują się 2 elementy Part*, ten znajdujący się na górze zasłania lub częściowo zasłania element znajdujący się niżej, ponieważ domyślna wartość atrybutu blendMode to SRC_OVER.

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

Aby zademonstrować używanie trybów mieszania, wybierz SRC_ATOP. W ten sposób zostaną odrzucone piksele źródłowe, które nie pokrywają pikseli docelowych. Mianowicie PartText jest źródłem, a PartDraw – miejscem docelowym.

W efekcie tekst jest wyświetlany tylko na prostokącie, a nie w innych miejscach tarczy zegarka:

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

Można stosować bardziej złożone efekty, np. użyć COLOR_DODGE zamiast SRC_ATOP, co powoduje, że miejsce docelowe będzie jaśniejsze, aby odzwierciedlać źródło.

Przykład łączenia wielu elementów Part* za pomocą trybów mieszania HUE i 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>

Bez efektów blendMode

Z efektami blendMode

co należy wziąć pod uwagę

W następnych sekcjach opisaliśmy kwestie, które warto wziąć pod uwagę podczas stosowania efektów przycinania i blendowania.

Tryb mieszania jest stosowany przed trybem renderowania.

Jeśli węzeł zawiera elementy Part korzystające z elementów blendMode i elementów Part korzystających z elementów renderMode ustawionych na MASK (lub ALL), stosuje się następujące podejście.

Źródło jest złożone, w tym zastosowano tryby blendMode
Maska jest następnie stosowana na podstawie tych elementów, które określają rendermode="MASK.

Na przykład, jeśli weźmiemy pod uwagę poprzedni przykład i dodamy do niego prostokątną maskę, pamiętając, że kolejność elementów w masce nie ma znaczenia:

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

Wydajność

Użycie funkcji renderMode i blendMode wymaga dodatkowych obliczeń i rysowania. W zależności od urządzenia, na którym działa tarcza zegarka, niektóre z tych funkcji mogą być wydajnie wykonywane na obsługiwanym sprzęcie, ale może to być niemożliwe na starszych urządzeniach.

Z tego powodu używaj elementów renderMode i blendMode rozważnie i weź pod uwagę wpływ, jaki ich użycie może mieć na ogólną wydajność tarczy zegarka.

Używanie odcieni

Element tintColor można zastosować do całego elementu Part*, Group lub poszczególnych rąk, takich jak HourHand i MinuteHand, na przykład:

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

Może to być przydatne do nadawania stylu całej sekcji tarczy zegarka, w tym do stosowania stylu z ustawień użytkownika, na przykład: tintcolor="[CONFIGURATION.myThemeColor.0]".

stosować maski, efekty mieszania i odcienie. Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.