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

stosować maski, efekty mieszania i odcienie.

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 będzie to miało wpływu na inne węzły w grafiku.

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

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 ramach formatu tarczy zegarka w wersji 3 lub nowszej.

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

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

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

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

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 oraz pamiętaj o tym, że ich użycie może mieć wpływ 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" 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

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.