Se usó la API de Cloud Translation para traducir esta página.

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

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

Usa 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 escenas. Para comprender mejor cómo funciona esto, considera cómo se renderiza el grafo de escenas:

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

El renderizador de caras de reloj dibuja los elementos en orden mientras recorre el árbol de escenas.

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

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

Se crea un lienzo fuera de la pantalla.
Todos los elementos secundarios con SOURCE establecido (que es el valor predeterminado) se dibujan.
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 superior.

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

Los elementos primero y tercero son elementos MASK, por lo que se combinan para formar una capa de enmascaramiento.
El segundo elemento es la única capa que no enmascara.

<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 tercera opción para renderMode, además de SOURCE y MASK, es ALL. ALL especifica que el elemento debe tratarse como SOURCE y como MASK, lo que puede ser útil en algunas situaciones.

Usa el modo de combinación

Nota: Esta función está disponible en la versión 3 y posteriores del Formato de Caras de Relojes.

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

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

En el funcionamiento normal, cuando se colocan dos elementos Part* en la escena, el elemento superior oculta o oculta parcialmente el elemento inferior porque el blendMode predeterminado es 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 demostración del uso de los modos de combinación, si eliges SRC_ATOP, se descartan 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 ningún otro lugar de la cara de reloj:

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

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

Ejemplo de cómo combinar varios elementos Part* con los modos de combinació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>

Sin ningún efecto blendMode

Con efectos blendMode

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 configurados en MASK (o ALL), se adopta el siguiente enfoque.

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

Por ejemplo, si consideras el ejemplo anterior y agregas una máscara de rectángulo, ten en cuenta 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>

Rendimiento

El uso de renderMode y blendMode requiere pasos de procesamiento y dibujo adicionales. Según el dispositivo en el que se ejecuta la cara de reloj, es posible que algunas de estas acciones se ejecuten de manera eficiente en hardware compatible, aunque es posible que 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 de reloj.

Usa tonos

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

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

Esto puede ser útil para aplicar un diseño a toda una sección de la cara de reloj, lo que incluye aplicar el diseño desde 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.