Aplica máscaras, efectos de combinación y tonos

Los elementos Group y Part* también proporcionan atributos tintColor, renderMode y blendMode, que son formas eficaces de ajustar la apariencia de las secciones de la cara de reloj.

Cómo usar máscaras de recorte con un modo de renderización

renderMode se introdujo en la versión 1 de WFF para lograr una máscara de recorte.

El renderMode se puede aplicar a los elementos Group y Part* en la jerarquía de la escena. El renderizador de la cara de reloj dibuja los elementos en orden mientras recorre el árbol de la escena.

Cuando se aplica renderMode a un nodo, el efecto solo se aplica dentro del Group principal de ese nodo. Los demás nodos del gráfico no se ven afectados.

Cuando no se especifica ningún renderMode, el valor predeterminado es SOURCE, lo que significa que el elemento se dibuja directamente en la pantalla. Sin embargo, cuando hay uno o más elementos presentes en el nodo principal con MASK (o ALL) especificado, se usa un enfoque diferente:

Se crea un lienzo fuera de la pantalla
1. Todos los elementos secundarios que forman parte de la máscara (MASK, ALL) se aplican al lienzo para recortar la imagen resultante.

Ten en cuenta que esto significa que no se tiene en cuenta el orden de los elementos en el nodo principal.

En el siguiente ejemplo, el elemento principal Scene contiene tres elementos secundarios:

Los elementos primero y tercero son elementos MASK, por lo que se combinan para formar una capa de máscara.
El elemento segundo es la única capa que no es de 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

La tercera opción para renderMode, además de SOURCE y MASK, es ALL. ALL especifica que el elemento debe tratarse como un SOURCE y como un MASK, lo que puede ser útil en algunos casos.

Usar el modo de mezcla

Nota: Esta capacidad está disponible en la versión 3 y posteriores del formato de cara de reloj.

A partir de la versión 3, el Formato de Caras de Relojes ofrece la capacidad de aplicar un modo de combinación cuando se componen elementos Part*.

A diferencia de renderMode, que introduce un mecanismo especial para construir la fuente y la máscara, respectivamente, blendMode proporciona acceso general a todos los efectos del modo de combinación de gráficos de Android y aplica los efectos en el orden en que aparecen los elementos en el gráfico de escena.

En el funcionamiento normal, cuando se colocan dos elementos Part* en la escena, el elemento superior oculta o cubre parcialmente el elemento inferior porque el blendMode predeterminado es 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 demostración del uso de los modos de fusión, elegir SRC_ATOP descarta los píxeles de origen que no cubren los píxeles de destino. Es decir, PartText es la fuente y PartDraw es el destino.

Como resultado, el texto solo se dibuja sobre el rectángulo y no en otro lugar de la cara de reloj:

<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

Se pueden aplicar efectos más complejos, como usar COLOR_DODGE en lugar de SRC_ATOP, lo que hace que el destino sea más brillante para reflejar la fuente.

Ejemplo de combinación de varios elementos Part* con los modos de fusión HUE y 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

Consideraciones

En las siguientes secciones, se describen algunas consideraciones que debes tener en cuenta cuando usas efectos de recorte y combinación.

El modo de combinación se aplica antes del modo de renderización

Si un nodo contiene elementos Part que usan blendMode y elementos Part que usan renderMode establecidos en MASK (o ALL), se adopta el siguiente enfoque.

La fuente se compone, lo que incluye la aplicación de los modos de blendMode.
Luego, la máscara se aplica a partir de esos elementos que especifican rendermode="MASK".

Por ejemplo, si consideramos el ejemplo anterior y agregamos una máscara rectangular, observamos que el orden del elemento enmascarado no 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

Rendimiento

El uso de renderMode y blendMode requiere pasos adicionales de cálculo y dibujo. Según el dispositivo en el que se ejecute la carátula del reloj, parte de esto se puede ejecutar de manera eficiente en el hardware compatible, aunque esto no sea posible en dispositivos más antiguos.

Por este motivo, usa renderMode y blendMode con prudencia y ten en cuenta el impacto que su uso puede tener en el rendimiento general de la cara del reloj.

Cómo usar tintes

Se puede aplicar un tintColor a todo el elemento Part*, Group o a manecillas individuales, como HourHand y MinuteHand, por ejemplo:

<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

Esto puede ser útil para aplicar un diseño a toda una sección de la cara de reloj, incluido el diseño de la configuración del usuario, por ejemplo: tintcolor="[CONFIGURATION.myThemeColor.0]".

Aplica máscaras, efectos de combinación y tonos Organiza tus páginas con colecciones Guarda y categoriza el contenido según tus preferencias.