Questa pagina è stata tradotta dall'API Cloud Translation.

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

Gli elementi Group e Part* forniscono anche gli attributi tintColor, renderMode e blendMode, che sono strumenti efficaci per modificare l'aspetto di alcune 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. Per comprendere meglio come funziona, considera come viene visualizzato il grafo della scena:

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

Il renderer del quadrante disegna gli elementi in ordine durante l'esplorazione dell'albero della scena.

Quando renderMode viene applicato a un nodo, l'effetto si applica solo all'renderMode principale del nodo.Group Gli altri nodi nel grafico non sono interessati.

Se non viene specificato 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 creata una tela off-screen
Tutti gli elementi secondari con SOURCE impostato (il valore predefinito) vengono disegnati
1. Tutti gli elementi secondari che fanno parte della maschera (MASK, ALL) vengono applicati al canvas per ritagliare l'immagine risultante.

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

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

Gli elementi primo e terzo sono elementi MASK, pertanto vengono combinati per formare un livello di mascheramento
L'elemento secondo è l'unico livello senza maschera

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

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.

Usare la modalità di fusione

Nota: questa funzionalità è disponibile dalla versione 3 in poi di Watch Face Format.

Dalla versione 3, Watch Face Format offre la possibilità di applicare una modalità di miscela durante la composizione degli elementi Part*.

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

In condizioni normali, quando nella scena sono presenti due elementi Part*, quello superiore oscura o oscura parzialmente l'elemento inferiore perché il valore predefinito di Part* è SRC_OVER.blendMode

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

Come dimostrazione dell'utilizzo delle modalità di miscela, la scelta di SRC_ATOP elimina i pixel di origine che non coprono i pixel di destinazione. Nello specifico, PartText è l'origine e PartDraw è la destinazione.

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

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

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

Senza effetti blendMode

Con effetti blendMode

Considerazioni

Le sezioni seguenti descrivono alcune considerazioni da tenere presenti quando si utilizzano gli effetti di taglio e di miscelazione.

La modalità di 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 seguito il seguente approccio.

La sorgente è composta, inclusa l'applicazione delle modalità blendMode
La maschera viene quindi applicata dagli elementi che specificano rendermode="MASK"

Ad esempio, prendiamo in considerazione l'esempio precedente e aggiungiamo una maschera rettangolare, tenendo presente che l'ordine dell'elemento mascherato non è importante:

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

Prestazioni

L'utilizzo di renderMode e blendMode richiede ulteriori passaggi di calcolo e disegno. A seconda del dispositivo su cui è in esecuzione il quadrante, alcune di queste funzionalità potrebbero essere eseguite in modo efficiente nell'hardware supportato, anche se ciò potrebbe non essere possibile sui dispositivi meno recenti.

Per questo motivo, utilizza renderMode e blendMode con giudizio e tieni presente l'impatto che il loro utilizzo potrebbe avere sul rendimento complessivo 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:

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

Questa opzione può essere utile per applicare uno stile a un'intera sezione del quadrante, ad esempio per applicare lo 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.