Outils pour utilisateurs

Outils du site


icn:codeorg:couleur_02

Je teste l'app et je la termine

Mon application doit me permettre de colorier un rectangle en choisissant les valeurs de rouge, de vert et de bleu.

Pour cela, je dois utiliser un canevas, en anglais canvas, pour pouvoir dessiner.

  • l'interface de mon application doit me permettre de choisir la valeur des couleurs rouge, vert et bleu. Voici l'interface de mon app que je dois réaliser :

  • J'utilise les noms de composants suivant :
Nom des couleursNom du sliderNom des labels affichant les valeurs
labeRougesliderRougelabelRougeValeur
labeVertsliderVertlabelVertValeur
labeBleusliderBleulabelBleuValeur

Par défaut, le composant slider génère un nombre compris entre 0 et 100. Il est alors nécessaire de modifier les propriétés des composants slider pour définir 255 comme valeur maximale.

Tester l'app

Voici le lien vers l'app partiellement réalisée et qui est à finir :

Commentaires du code de l'app

  • J'active le canevas,
  • et je dessine un grand rectangle de couleur noire : rgb(0,0,0)

  • dès que le slider gérant l'intensité du rouge est modifié, je redessine mon rectangle avec la nouvelle couleur. La valeur numérique du slider est mémorisée dans une variable qui est ici appelé rouge :

Attention, le composant slider génère un chiffre de 0 à 100. Il est important de modifier les propriétés des composants slider pour que la valeur maximale soit 255.

Quelques explications ...

La fonction setFillColor() permet de définir la couleur de remplissage des dessins. En paramètre, on définit une couleur au format rgb de la manière suivante : setFillColor(“rgb(0,0,0)”).

Pour définir le paramètre couleur de la fonction setFilColor() en fonction de l'intensité du rouge, je concatène des caractères et le contenu de la variable rouge :

  • “rgb(” + rouge + “,0,0”

  • ce qui donne setFilColor(“rgb(” + rouge + “,0,0”);

Je termine l'app

  • Je clique sur le bouton Make my own pour enregistrer l'application,
  • je modifie l'application pour pouvoir définir l'intensité des autres couleurs verte et bleue.

Retour à l'activité : la codification des couleurs dans les images

icn/codeorg/couleur_02.txt · Dernière modification: 2017/01/30 09:10 (modification externe)