Médiaforma

All posts tagged ombrage

Ombrer une image lui donne du relief et renforce l’ambiance qui s’en dégage. L’ajout d’un ombrage est un vrai jeu d’enfant dans PhotoFiltre : lancez la commande Ombre extérieure dans le menu Image. La boîte de dialogue Ombre extérieure s’affiche.

Photofiltre - Ajouter un ombrage à une image - Ombre extérieure

Choisissez la couleur de l’ombrage. Vous pouvez :

  • dérouler la liste Couleur pour accéder à une palette de couleur réduite ;
  • cliquer dans la liste déroulante Couleur pour accéder à une palette étendue ;
  • utiliser la pipette pour prélever une couleur dans l’image.

Définissez l’opacité de l’ombrage, entre 0 (totalement transparent) et 100 (totalement opaque) et sa largeur en pixels. Si nécessaire, ajoutez une marge autour de l’ombrage.

Définissez la position de l’ombrage en choisissant une option dans le groupe Position.

Pour améliorer l’effet de relief, choisissez l’option Contour progressif dans le groupe Style.

Par défaut, l’arrière-plan autour de l’ombrage est de couleur blanche, mais vous pouvez choisir une autre couleur en utilisant la liste déroulante Fond ou la pipette qui se trouve à sa droite.

Enfin, l’arrière-plan autour de l’ombrage peut être un motif et non une couleur unie. Pour cela, cochez la case Motif de fond et choisissez un des motifs fournis avec PhotoFiltre ou un autre motif présent sur vos unités de masse.

Photofiltre - Ajouter un ombrage à une image


Quatre propriétés permettent d’ombrer les éléments affichés dans un canvas :

  • shadowColor définit la couleur de l’ombrage.
  • shadowBlur définit le flouté de l’ombrage. Plus la valeur est grande, plus l’ombrage est flou.
  • shadowOffsetX définit le décalage horizontal de l’ombrage.
  • shadowOffsetY définit le décalage vertical de l’ombrage.

Ces propriétés s’appliquent à tous les objets affichés dans le canevas. A titre d’exemple, nous allons les appliquer à un rectangle plein et à un texte. Voici le code utilisé :

Lorsque l’utilisateur clique sur le bouton, la fonction ombrage() est exécutée.

Comme toujours, les premières instructions de la fonction récupèrent le contexte et le stockent dans la variable ctxt.

Les quatre instructions suivantes définissent les caractéristiques de l’ombrage :

  • le décalage horizontal est de 5 pixels :
    ctxt.shadowOffsetX = 5;
  • le décalage vertical est de 5 pixels :
    ctxt.shadowOffsetY = 5;
  • le flouté est modéré :
    ctxt.shadowBlur = 4;
  • l’ombrage est gris et semi-transparent :
    ctxt.shadowColor   = ‘rgba(100, 100, 100, 0.5)’;

Les deux instructions suivantes tracent un rectangle ombré de couleur bleue en 20, 150. Le rectangle fait 150 pixels de large et 100 pixels de haut.

ctxt.fillStyle     = ‘#00f’;

ctxt.fillRect(20, 150, 150, 100);

Enfin, les trois dernières instructions affichent un texte ombré à 10 pixels du bord gauche et à 50 pixels du bord supérieur :

ctxt.strokeStyle = ‘#f00’;

ctxt.font = ‘bold 50px Algerian’;

ctxt.strokeText(‘Bonjour’, 10, 50);

Voici le résultat dans Internet Explorer :