Aplicar máscaras, efeitos de mesclagem e matizes

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

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

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

O renderMode pode ser aplicado aos elementos Group e Part* na hierarquia de cena. 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ó se aplica dentro do Group principal desse nó. Os outros nós em outras partes do gráfico não são afetados.

Quando nenhum renderMode é especificado, o padrão é SOURCE, o que significa que o elemento é desenhado 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 desenhados
1. Todos os elementos filhos que fazem parte da máscara (MASK, ALL) são aplicados à tela para cortar a imagem resultante.

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

No exemplo a seguir, o elemento pai Scene contém três filhos:

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

<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

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

Usar o modo de fusão

Observação: esse recurso está disponível na versão 3 e mais recentes do formato de 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 apresenta um mecanismo especial para construir a origem e a máscara, respectivamente, o blendMode oferece acesso geral a todos os efeitos de modo de combinação do Android Graphics e aplica os efeitos na ordem em que os elementos aparecem no gráfico de cena.

Em operação normal, quando dois elementos Part* são colocados na cena, o superior oculta ou oculta parcialmente o elemento inferior porque o blendMode padrão é 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

Como demonstração do uso de modos de fusão, escolher SRC_ATOP descarta os pixels de origem que não cobrem os pixels de destino. Ou seja, o PartText é a origem, e o destino é o PartDraw.

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

<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

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

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

Considerações

As seções a seguir descrevem algumas considerações importantes ao usar efeitos de corte e combinação.

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 seguinte abordagem será adotada.

A origem é combinada, incluindo a aplicação de modos blendMode.
A máscara é aplicada a partir desses elementos, especificando rendermode="MASK"

Por exemplo, considerando o exemplo anterior 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>watchface_effects.xml

Desempenho

O uso de renderMode e blendMode exige mais etapas de computação e desenho. Dependendo do dispositivo em que o mostrador do relógio está sendo executado, parte disso pode ser executada de maneira eficiente em hardware compatível, mas isso pode não ser possível em dispositivos mais antigos.

Por isso, use renderMode e blendMode com moderação e fique atento ao impacto que o uso deles pode ter na performance geral do mostrador do relógio.

Usar tons

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

<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

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.