Appliquer des masques, des effets de fusion et des teintes

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

Utiliser des masques de sélection avec un mode de rendu

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

renderMode peut être appliqué aux éléments Group et Part* dans la hiérarchie de la scène. Le moteur de rendu du cadran dessine les éléments dans l'ordre lors de la traversée de l'arborescence de la 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 sur 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 dont l'attribut SOURCE est 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 recadrer l'image résultante.

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 un calque de masquage.
Le deuxième élément est la seule couche non masquante.

<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 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 dans la version 3 et les versions ultérieures du format de cadran.

À partir de la version 3, Watch Face Format permet d'appliquer un mode de fusion lors de la composition des éléments Part*.

Contrairement à renderMode, qui introduit un mécanisme spécial pour construire respectivement la source et le 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, celui du dessus masque ou masque partiellement l'élément du dessous, car la valeur par défaut de blendMode est 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

Pour illustrer l'utilisation des modes de fusion, le choix de SRC_ATOP supprime les pixels sources qui ne couvrent pas les pixels de destination. En d'autres termes, 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="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

Des effets plus complexes peuvent être appliqués, par exemple en utilisant COLOR_DODGE au lieu de SRC_ATOP, 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>watchface_effects.xml

Points à prendre en compte

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

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 composite, y compris l'application des modes blendMode.
Le masque est ensuite appliqué à partir des éléments spécifiant rendermode="MASK.

Par exemple, en reprenant l'exemple précédent et en ajoutant un masque rectangulaire, en notant 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>watchface_effects.xml

Performances

L'utilisation de renderMode ou 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 dans le matériel compatible, mais cela peut ne pas être possible sur les appareils plus anciens.

Pour cette raison, utilisez renderMode et blendMode avec parcimonie et soyez attentif à l'impact que leur utilisation peut avoir 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 :

<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

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.