Applicare maschere, effetti di fusione e tinte

Gli elementi Group e Part* forniscono anche gli attributi tintColor, renderMode e blendMode, che sono modi efficaci per regolare l'aspetto delle sezioni del quadrante.

Utilizzare le maschere di ritaglio con una modalità di rendering

renderMode è stato introdotto nella versione 1 di WFF per ottenere una maschera di ritaglio.

renderMode può essere applicato agli elementi Group e Part* nella gerarchia della scena. Il renderer del quadrante disegna gli elementi in ordine durante l'attraversamento dell'albero della scena.

Quando renderMode viene applicato a un nodo, l'effetto si applica solo all'interno del Group principale di quel nodo. Gli altri nodi in altre parti del grafico non sono interessati.

Se non viene specificato alcun renderMode, il valore predefinito è SOURCE, il che significa che l'elemento viene disegnato direttamente sullo schermo. Tuttavia, quando nel nodo principale sono presenti uno o più elementi con MASK (o ALL) specificato, viene utilizzato un approccio diverso:

Viene creato un canvas fuori schermo
Tutti gli elementi secondari con SOURCE impostato (valore predefinito) vengono disegnati
1. Tutti gli elementi secondari che fanno parte della maschera (MASK, ALL) vengono applicati alla tela per ritagliare l'immagine risultante.

Tieni presente che ciò significa che l'ordine degli elementi nel nodo principale non viene preso in considerazione.

Nel seguente esempio, l'elemento principale Scene contiene tre elementi secondari:

Il primo e il terzo elemento sono elementi MASK, quindi vengono combinati insieme per formare un livello di mascheramento
Il secondo elemento è l'unico livello non di mascheramento

<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

La terza opzione per renderMode, oltre a SOURCE e MASK, è ALL. ALL specifica che l'elemento deve essere trattato sia come SOURCE sia come MASK, il che può essere utile in alcuni scenari.

Utilizzare la modalità di fusione

Nota: questa funzionalità è disponibile nella versione 3 e successive di Watch Face Format.

A partire dalla versione 3, Watch Face Format offre la possibilità di applicare una modalità di fusione durante la composizione degli elementi Part*.

A differenza di renderMode, che introduce un meccanismo speciale per costruire rispettivamente l'origine e la maschera, blendMode fornisce l'accesso generale a tutti gli effetti della modalità di fusione di Android Graphics e applica gli effetti nell'ordine in cui gli elementi vengono visualizzati nel grafico della scena.

Durante il normale funzionamento, quando nella scena vengono inseriti due elementi Part*, l'elemento più in alto oscura o oscura parzialmente l'elemento inferiore perché il valore predefinito di blendMode è 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

Come dimostrazione dell'utilizzo dei metodi di fusione, la scelta di SRC_ATOP comporta l'eliminazione dei pixel di origine che non coprono i pixel di destinazione. ovvero PartText è l'origine e la destinazione è PartDraw.

Di conseguenza, il testo viene disegnato solo sopra il rettangolo e non altrove sul quadrante:

<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

È possibile applicare effetti più complessi, ad esempio utilizzando COLOR_DODGE anziché SRC_ATOP, che rende la destinazione più luminosa per riflettere l'origine.

Un esempio di combinazione di più elementi Part* utilizzando le modalità di fusione HUE e 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

Considerazioni

Le sezioni seguenti descrivono alcune considerazioni da tenere presente quando utilizzi effetti di ritaglio e fusione.

La modalità fusione viene applicata prima della modalità di rendering

Se un nodo contiene sia elementi Part che utilizzano blendMode sia elementi Part che utilizzano renderMode impostato su MASK (o ALL), viene adottato il seguente approccio.

La sorgente è composita, inclusa l'applicazione delle modalità blendMode
La maschera viene quindi applicata a questi elementi specificando rendermode="MASK"

Ad esempio, considerando l'esempio precedente e aggiungendo una maschera rettangolare, tieni presente che l'ordine dell'elemento mascherato non ha importanza:

<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

Prestazioni

L'utilizzo di renderMode e blendMode richiede ulteriori passaggi di calcolo e disegno. A seconda del dispositivo su cui viene eseguita la watch face, alcune di queste operazioni possono essere eseguite in modo efficiente nell'hardware supportato, anche se ciò potrebbe non essere possibile su dispositivi meno recenti.

Per questo motivo, utilizza renderMode e blendMode con giudizio e tieni presente l'impatto che il loro utilizzo può avere sulle prestazioni complessive del quadrante.

Utilizzare le tinte

Un tintColor può essere applicato all'intero elemento Part*, Group o a singole mani come HourHand e MinuteHand, ad esempio:

<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

Può essere utile per applicare uno stile a un'intera sezione del quadrante, inclusa l'applicazione dello stile dalle impostazioni utente, ad esempio: tintcolor="[CONFIGURATION.myThemeColor.0]".

Applicare maschere, effetti di fusione e tinte Mantieni tutto organizzato con le raccolte Salva e classifica i contenuti in base alle tue preferenze.