Esta página foi traduzida pela API Cloud Translation.

Aplicar máscaras, efeitos de mesclagem e matizes
Mantenha tudo organizado com as coleções Salve e categorize o conteúdo com base nas suas preferências.

Os elementos Group e Part* também fornecem atributos tintColor, renderMode e blendMode, que são maneiras eficientes de ajustar a aparência de seções do mostrador do relógio.

Usar máscaras de corte com um modo de renderização

renderMode foi introduzido na versão 1 do WFF para criar uma máscara de recorte.

O renderMode pode ser aplicado a elementos Group e Part* na hierarquia de cena. Para entender melhor como isso funciona, considere como a cena é renderizada:

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

O renderizador do mostrador do relógio desenha os elementos em ordem enquanto percorre a árvore de cena.

Quando renderMode é aplicado a um nó, o efeito só é aplicado no Group pai desse nó. Os outros nós no gráfico não são afetados.

Quando nenhum renderMode é especificado, o padrão é SOURCE, o que significa que o elemento é renderizado diretamente na tela. No entanto, quando um ou mais elementos estão presentes no nó pai com MASK (ou ALL) especificado, uma abordagem diferente é usada:

Uma tela fora da tela é criada
Todos os elementos filhos com SOURCE definido (que é o padrão) são renderizados
1. Todos os elementos filhos que fazem parte da máscara (MASK, ALL) são aplicados à tela para recortar a imagem resultante.

Isso significa que a ordem dos elementos no nó pai não é considerada.

No exemplo abaixo, o pai Scene contém três filhos:

Os elementos primeiro e terceiro são elementos MASK, então eles são combinados para formar uma camada de máscara.
O segundo elemento é a única camada sem máscara

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

A terceira opção para renderMode, além de SOURCE e MASK, é ALL. ALL especifica que o elemento precisa ser tratado como SOURCE e MASK, o que pode ser útil em alguns cenários.

Usar o modo de mesclagem

Observação: esse recurso está disponível na versão 3 e mais recentes do formato do mostrador do relógio.

A partir da versão 3, o Formato do mostrador do relógio oferece a capacidade de aplicar um modo de mesclagem ao compor elementos Part*.

Ao contrário do renderMode, que introduz um mecanismo especial para construir a fonte e a máscara, o blendMode oferece acesso geral a todos os efeitos do modo de mesclagem de gráficos do Android e aplica efeitos na ordem em que os elementos aparecem no gráfico de cena.

No funcionamento normal, quando dois elementos Part* são colocados na cena, o elemento de cima obscurece ou obscurece parcialmente o elemento de baixo porque o blendMode padrão é 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>

Como demonstração do uso de modos de mesclagem, a escolha de SRC_ATOP descarta os pixels de origem que não cobrem os pixels de destino. Mais especificamente, o PartText é a origem, e o destino é o PartDraw.

Como resultado, o texto é desenhado apenas sobre o retângulo, e não em nenhum outro lugar do mostrador do relógio:

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

É possível aplicar efeitos mais complexos, como usar COLOR_DODGE em vez de SRC_ATOP, que tornam o destino mais brilhante para refletir a fonte.

Um exemplo de combinação de vários elementos Part* usando os modos de mistura 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>

Sem efeitos blendMode

Com efeitos blendMode

Considerações

As seções a seguir descrevem algumas considerações a serem consideradas ao usar efeitos de recorte e mesclagem.

O modo de mesclagem é aplicado antes do modo de renderização

Se um nó contiver elementos Part usando blendMode e elementos Part usando renderMode definido como MASK (ou ALL), a abordagem a seguir será seguida.

A fonte é composta, incluindo a aplicação de modos blendMode.
A máscara é aplicada a partir dos elementos que especificam rendermode="MASK.

Por exemplo, considerando o exemplo anterior usado antes e adicionando uma máscara retangular, observe que a ordem do elemento mascarado não importa:

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

Desempenho

O uso de renderMode e blendMode exige etapas de cálculo e desenho adicionais. Dependendo do dispositivo em que o mostrador do relógio está sendo executado, algumas dessas ações podem ser executadas de maneira eficiente em hardwares compatíveis, mas isso pode não ser possível em dispositivos mais antigos.

Por esse motivo, use renderMode e blendMode com cuidado e esteja atento ao impacto que o uso deles pode ter no desempenho geral do mostrador do relógio.

Usar cores

Um tintColor pode ser aplicado a todo o elemento Part*, Group ou ponteiros individuais, como HourHand e MinuteHand, por exemplo:

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

Isso pode ser útil para estilizar uma seção inteira do mostrador do relógio, incluindo a aplicação do estilo das configurações do usuário, por exemplo: tintcolor="[CONFIGURATION.myThemeColor.0]".

Aplicar máscaras, efeitos de mesclagem e matizes Mantenha tudo organizado com as coleções Salve e categorize o conteúdo com base nas suas preferências.