Cette page a été traduite par l'API Cloud Translation.

Appliquer des masques, des effets de fusion et des teintes
Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.

Les éléments Group et Part* fournissent également des attributs tintColor, renderMode et blendMode, qui sont des moyens efficaces d'ajuster l'apparence des sections de votre cadran.

Utiliser des masques de découpe avec un mode de rendu

renderMode a été introduit dans la version 1 de WFF pour créer un masque de découpe.

renderMode peut être appliqué aux éléments Group et Part* dans la hiérarchie de la scène. Pour mieux comprendre son fonctionnement, examinons la façon dont le graphisme de la scène est affiché:

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

Le moteur de rendu du cadran dessine les éléments dans l'ordre lors de la traversée de l'arborescence de scène.

Lorsque renderMode est appliqué à un nœud, l'effet ne s'applique qu'au Group parent de ce nœud. Les autres nœuds du graphique ne sont pas affectés.

Lorsqu'aucun renderMode n'est spécifié, la valeur par défaut est SOURCE, ce qui signifie que l'élément est dessiné directement à l'écran. Toutefois, lorsqu'un ou plusieurs éléments sont présents dans le nœud parent avec MASK (ou ALL) spécifié, une approche différente est utilisée:

Un canevas hors écran est créé
Tous les éléments enfants avec SOURCE défini (valeur par défaut) sont dessinés.
1. Tous les éléments enfants qui font partie du masque (MASK, ALL) sont appliqués au canevas pour découper l'image obtenue.

Notez que cela signifie que l'ordre des éléments dans le nœud parent n'est pas pris en compte.

Dans l'exemple suivant, le parent Scene contient trois enfants:

Les premier et troisième éléments sont des éléments MASK. Ils sont donc combinés pour former une couche de masquage.
L'élément deuxième est la seule couche non masquée.

<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 troisième option pour renderMode, en plus de SOURCE et MASK, est ALL. ALL spécifie que l'élément doit être traité à la fois comme un SOURCE et comme un MASK, ce qui peut être utile dans certains scénarios.

Utiliser le mode de mélange

Remarque: Cette fonctionnalité est disponible à partir de la version 3 de Watch Face Format.

À partir de la version 3, le format de cadran permet d'appliquer un mode de fusion lors de la composition d'éléments Part*.

Contrairement à renderMode, qui introduit un mécanisme spécial pour la construction de la source et du masque, blendMode fournit un accès général à tous les effets de mode de fusion Android Graphics et applique les effets dans l'ordre dans lequel les éléments apparaissent dans le graphique de scène.

En fonctionnement normal, lorsque deux éléments Part* sont placés dans la scène, l'élément le plus haut masque ou masque partiellement l'élément inférieur, car l'blendMode par défaut est 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>

Pour illustrer l'utilisation des modes de fusion, le choix de SRC_ATOP permet de supprimer les pixels sources qui ne recouvrent pas les pixels de destination. Plus précisément, PartText est la source et PartDraw est la destination.

Par conséquent, le texte n'est dessiné que sur le rectangle, et non ailleurs sur le cadran:

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

Des effets plus complexes peuvent être appliqués, par exemple en utilisant COLOR_DODGE au lieu de SRC_ATOP, ce qui rend la destination plus lumineuse pour refléter la source.

Exemple de combinaison de plusieurs éléments Part* à l'aide des modes de mélange HUE et 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>

Sans effet blendMode

Avec effets blendMode

Points à prendre en compte

Les sections suivantes décrivent certains éléments à prendre en compte lorsque vous utilisez des effets de masquage et de fusion.

Le mode de fusion est appliqué avant le mode de rendu

Si un nœud contient à la fois des éléments Part utilisant blendMode et des éléments Part utilisant renderMode défini sur MASK (ou ALL), l'approche suivante est adoptée.

La source est composée, y compris l'application des modes blendMode.
Le masque est ensuite appliqué à partir de ces éléments spécifiant rendermode="MASK.

Par exemple, en reprenant l'exemple précédent et en ajoutant un masque rectangulaire, notez que l'ordre de l'élément masqué n'a pas d'importance:

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

Performances

L'utilisation de renderMode et de blendMode nécessite des étapes de calcul et de dessin supplémentaires. En fonction de l'appareil sur lequel le cadran s'exécute, certaines de ces opérations peuvent être exécutées efficacement sur du matériel compatible, mais cela peut ne pas être possible sur des appareils plus anciens.

Pour cette raison, utilisez renderMode et blendMode avec discernement et tenez compte de l'impact de leur utilisation sur les performances globales du cadran.

Utiliser des teintes

Un tintColor peut être appliqué à l'ensemble de l'élément Part*, Group ou à des aiguilles individuelles telles que HourHand et MinuteHand, par exemple:

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

Cela peut être utile pour styliser une section entière du cadran, y compris en appliquant le style à partir des paramètres utilisateur, par exemple : tintcolor="[CONFIGURATION.myThemeColor.0]".

Appliquer des masques, des effets de fusion et des teintes Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.