stosować maski, efekty mieszania i odcienie.

Elementy Group i Part* udostępniają też atrybuty tintColor, renderMode i blendMode, które pozwalają dostosowywać wygląd sekcji tarczy zegarka.

Używanie masek przycinających w trybie renderowania

renderMode został wprowadzony w wersji 1 WFF, aby uzyskać maskę przycinającą.

renderMode można zastosować do elementów Group i Part* w hierarchii sceny. Renderowanie tarczy zegarka rysuje elementy w kolejności podczas przechodzenia przez drzewo sceny.

Gdy atrybut renderMode zostanie zastosowany do węzła, efekt będzie widoczny tylko w Group węzła nadrzędnego. Nie ma to wpływu na inne węzły w grafie.

Jeśli nie określono wartości renderMode, domyślną wartością jest SOURCE, co oznacza, że element jest rysowany bezpośrednio na ekranie. Jeśli jednak w węźle nadrzędnym występuje co najmniej 1 element z atrybutem MASK (lub ALL), stosowane jest inne podejście:

Utworzenie obszaru roboczego poza ekranem
Wszystkie elementy podrzędne z ustawionym atrybutem SOURCE (domyślnie) są rysowane.
1. Wszystkie elementy podrzędne, które są częścią maski (MASK, ALL), są stosowane do obszaru roboczego, aby przyciąć wynikowy obraz.

Pamiętaj, że oznacza to, że kolejność elementów w węźle nadrzędnym 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 ze sobą, aby utworzyć warstwę maskującą.
Element second jest jedyną warstwą niebędącą 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

Trzecia opcja dla renderMode oprócz SOURCE i MASK to ALL. ALL oznacza, że element powinien być traktowany zarówno jako SOURCE, jak i MASK, co w niektórych przypadkach może być przydatne.

Używanie trybu mieszania

Uwaga: ta funkcja jest dostępna w wersji 3 i nowszych formatu tarczy zegarka.

Od wersji 3 format tarczy zegarka umożliwia stosowanie trybu mieszania podczas tworzenia elementów Part*.

W przeciwieństwie do renderMode, który wprowadza specjalny mechanizm tworzenia odpowiednio źródła i maski, blendMode zapewnia ogólny dostęp do wszystkich efektów trybu mieszania grafiki Androida i stosuje efekty w kolejności, w jakiej elementy pojawiają się na wykresie sceny.

W normalnych warunkach, gdy w scenie znajdują się 2 elementy Part*, element znajdujący się wyżej zasłania lub częściowo zasłania element znajdujący się niżej, ponieważ domyślna wartość blendMode to 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

Jako przykład użycia trybów mieszania wybierz SRC_ATOP, aby odrzucić piksele źródłowe, które nie pokrywają pikseli docelowych. Źródłem jest PartText, a miejscem docelowym jest PartDraw.

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

<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

Można zastosować bardziej złożone efekty, np. użyć COLOR_DODGE zamiast SRC_ATOP, co rozjaśnia miejsce docelowe, aby odzwierciedlało ź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>watchface_effects.xml

co należy wziąć pod uwagę

W sekcjach poniżej znajdziesz kilka kwestii, o których warto pamiętać podczas korzystania z efektów przycinania i mieszania.

Tryb mieszania jest stosowany przed trybem renderowania.

Jeśli węzeł zawiera zarówno elementy Part z atrybutem blendMode, jak i elementy Part z atrybutem renderMode ustawionym na MASK (lub ALL), stosowane jest to podejście.

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

Na przykład, biorąc pod uwagę poprzedni przykład i dodając maskę prostokątną, pamiętaj, że kolejność zamaskowanego elementu 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>watchface_effects.xml

Wydajność

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

Z tego powodu używaj funkcji renderMode i blendMode z rozwagą i pamiętaj o tym, jaki wpływ może mieć ich użycie na ogólną wydajność tarczy zegarka.

Używanie odcieni

tintColor można zastosować do całego elementu Part*, Group lub poszczególnych wskazówek, np. HourHand i 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

Może to być przydatne do stylizowania całej sekcji tarczy zegarka, w tym do stosowania stylu z ustawień użytkownika, np.: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.