Tutoriel jQuery : Créer une Jauge circulaire avec les Canvas

by: Grafikart.fr

Download this transcript

Transcript:

[0.0]
salut et bienvenue dans ce nouveau tutoriel ou aujourd'hui je vous propose d'en découvrir un petit peu plus sur l'utilisation de la balise canvas donc cette nouvelle balise apparu avec la chaîne 25e va vous permettre tout simplement de décider de modifier des formes donc ce que je vous propose c'est de voir ça dans à travers un exemple concret on va apprendre à créer un système de potentiomètres circulaire donc le principe est relativement simple on a ici anne input de type texte est en fait pour changer sa valeur on ne va pas changer la valeur directement en tapant au clavier mais tout simplement en faisant bouger entre guillemets vers la valeur qu'il y a tout autour et aussi et ainsi on va pouvoir modifier vous le voyez la valeur donc c'est ce que l'on va apprendre à créer aujourd'hui et le principe c'est de le créer sans utiliser aucune image seulement avec la balise canvas donc on est parti alors je vais créer un nouveau fichier html donc j'ai choisi volontairement cette fois ci devait partir vraiment de rien pour qu'on voit ensemble toutes les étapes donc au niveau de la structure html on va rester relativement simple donc on ne va pas mettre de style et on va charger la libre belgique aurait depuis google donc on n'a pas forcément besoin de jquery pour manipuler les canevas mais pour l'exemple que l'on va faire on va en avoir besoin et au niveau de mon démon html je vais mettre mon fameux chant donc ici je mets input type égale texte je lui donne le nom que je veux un bon on va l'appeler ronde et je vais lui donner une classe particulière qui est la classe rentrent donc tous les inputs qui auront cette classe là vont être utilisés avec ce système de potentiomètres circulaire gmail un côté de leur histoire qu'on s'y retrouve mieux et ce champ je vais lui donner deux informations la valeur minimale et la valeur maximale donc d'attirer mine alors date à tirer c'est tout simplement des nouvelles propriétés que l'on peut utiliser un peu m data n'importe quoi et ça passera tout ça ça servira ensuite au niveau du jeu un script à récupérer automatiquement les valeurs plus simplement donc c'est mieux que d'aller mettre des classes vides au genre mines tirer 0 mais max tirer trois là au moins ces éléments sont accessibles facilement donc datamine 0 et enfin mettre date à tirer max égale mois m 50 voilà pour l'exemple et en ferme donc automatiquement ça va créer vous le voyez ce champ texte est automatiquement je vais lui mettre une valeur par défaut en mettant value égale 30 voilà donc le principe c'est de ne pas modifier ce code html là et vient de transformer ça en tentant de se mettre circulaire donc la première chose à faire ça va être de charger un nouveau script qui si je vais aller charger un script que je vais appeler à pépé point js est automatiquement je vais aller le créer un nouveau fichier à pépé point js et dans un script en affaires mais modifications donc la première chose à faire c'est un petit peu de styliser notre élément alors on est parti je vais utiliser directement à cet endroit là je vais même pas utiliser de fichiers css ces histoires de garder des sources relativement simple à comprendre évidemment si vous comptez utiliser ce système là je vous conseille d' isoler le css alors au niveau du body on va supprimer les marges et les padding qui sont mis par défaut voilà pour mieux coller ça donc ensuite ce que l'on va faire un jsc entouré cet hymne toute la dune div cette diva nous servir de conteneurs pour pouvoir mais traiter plus facilement les éléments donc ici au niveau de mon arrivée point js je vais faire ça donc j'attends que jquery soit bien chargé et je vais sélectionner tout mais input qui ont la classe rendent donc tous et input je vais les mettre dans une digue qui est la classe rendre elle aussi donc pour cela je fais pointe wraps et à l'intérieur je mets ma div qui la classe rendent automatiquement ça ça va avoir pour effet tant de cercle et main au monde du foot d'une vive que la classe 30 si maintenant j'inspecte le code mais qu'est ce que vous voyez vous voyez bien que g7 d'yves l'a donc cette dit je vais pouvoir les utiliser pour donner un petit peu mal à la forme finale donc ici je prends toutes les digues qui ont la classe rendent alors pourquoi je mets 10 devant c'est tout simplement pour pas sélectionner les inputs moment n'avoir que les div donc je vais le décalé par rapport aux obama et la gauche tout simplement pour mieux isoler et m'a d'ailleurs être un petit peu moins fort avec 50 pixels je fais ça vous allez voir c'est après on fera les calculs et c'est mieux d'avoir une marche comme ça ça permettra de vérifier que nos calculs soit juste ensuite je vais donner une largeur et la hauteur automatique donc pour l'instant on va partir du principe que mon anneau entre guillemets à 200 pixels de diamètre donc ici je vais 200 pixels et je donne aussi une hauteur de 200 pixels voilà et je mets ça en position relative alors pourquoi en position relative parce que la balise canvas est globalement un peu la même propriété qu'une image ça va avoir une largeur et une hauteur donc en fait qui va se passer c'est qu'on va mettre cette balise canvas au dessus de notre input donc du coup on a besoin de mettre ça en position relative pour ensuite mettre tous les éléments à l'intérieur donc de cette div en position absolut donc ici je vais prendre mon une poutre et justement je vais être en position absolut je vais le positionner un petit peu en haut et je vais ici le centre est alors pour avoir un repère visuel je vais mettre une petite bordure voilà comme ça vous voyez où se situe l'input donc cette input je vais le décalé par rapport aux j'ai testé les valeurs a gelé sort pas de nulle part elle j'ai fait des tests pour arriver justement aux bonnes valeurs voilà donc je le décale comme ceci vous voyez qu'il est à peu près centre et je vais mettre mes une très très grande taille de police donc font size 60 pixels voilà vous voyez un petit peu où je veux en venir je vais centre et le texte texte aline center et du coup je vais préciser une largeur fixé à mon écoute sans pixel et vous voyez du coup qu'on a quelque chose qui à peu près centre est d'ailleurs peu ici tâtonner pour essayer de trouver un meilleur centre âge est ce que je vais faire je vais supprimer la bordure par défaut qui sont mis sur les inputs et le background qui est aussi mis par défaut automatiquement comme ça voilà je vais avoir un champ qui ressemble pas du tout un champ mais tout simplement bas du texte si vous voulez supprimer ce surligne mans ici vous mettez la hotline de points donne voilà ça supprime la look mais certains navigateurs voilà est ce que je vais faire je vais dire que la balise canevas que l'on va mettre plus tard je peux aussi l'utiliser et jamais être en position absolut top 2.0 left 2.0 wright 2.0 et bodum 0 voilà comme ça la valise cannes prendra toute la largeur et toute la hauteur donc on est parti ce que je vais faire je vais dire que pour chaque input donc je les atours d'une vive qu'à la classe ronde et je vais faire une opération pour cela j'utilise la fonction itx ça permet de travailler dans un petit environnement qui est propre à chacun les inputs comme ça je pourrais même multipliés mon script voilà donc je vais définir quelques variables une première qui servira à sauvegarder l'input donc sévices alors pourquoi je mets un dollar devant c'est tout simplement une convention c'est pour différencier les variables qui sont des éléments jquery des variables qui ne sont pas des éléments chicorée vous n'êtes absolument pas obligés de le faire moi j'ai choisi cette convention donc je m'y colle ensuite je vais sélectionner la diff la classe rendent donc pour cela s'est vu ce point parente mavis j'ai déjà stocké dans une variable donc c'est un coup-de-poing parente voilà comme ça avec ces éléments là je vais pouvoir je n'aurais pas refaire des sélections automatiquement dans ces variables et la dives et j'ai une poutre voilà donc ce que je vais créer c'est un premier canevas qui va me permettre de dessiner le cercle alors ce canevas je vais l'appeler circle voilà égal et là c'est tout simplement une valise canevas et je lui précise une largeur et de hauteur which 200 pixels et eight 200 pixels ses dimensions vous permettre de déterminer en fait la zone de dessin automatiquement je pourrais dessinée dans cette zone de 200 par deux sens en revanche si je fais une forme plus grande que vous allez voir ça sera coupé voilà alors maintenant que j'ai ce canevas je vais l'ajout des manifs donc d'yves point happened circle circle est automatiquement vous voyez qu'au niveau de l'html j'ai bien ma balise canvas et vous voyez que c'est un élément de 200 par 200 qui prend toute la largeur et toute la hauteur de mon bloc donc dans ce canevas je vais pouvoir dessiner alors comment on dessine on a déjà besoin de récupérer le contexte donc pour cela on fait donc mon élément circle 0 alors ça c'est tout simplement pour récupérer les mains l'élément d'hommes basique parce que circle c'est l'élément j corée et en faisant 0 récupère le premier élément est ensuite on fait point une quête contexte 2d donc c'est toujours la même chose vous allez devoir stocker ça dans une variable pour pouvoir ensuite dessiné en fait on va se servir de cet élément pour pouvoir dessiner donc ici on est parti si par exemple je veux dessiner un rectangle je fais ctx point fils rect je précise la position 1 x la position on y est la largeur de mon rectangle et la hauteur est automatiquement qu'est ce que vous voyez vous voyez que dès que je savais vous voyez que ça dessine un petit rectangle donc si vous voulez avoir un petit peu l'ensemble des des fonctions que l'on peut utiliser alors il ya une petite fiche qui est pas mal vous laisserez l'url dans la description du tutoriel ça représente un petit peu les différentes fonctions que l'on peut utiliser donc nous ici on a utilisé fils rectangle qui permet tout simplement de dessiner un rectangle si vous voulez changer la couleur parce que ça ne vous voit pas ce noir vous pouvez faire c'est et x le contexte point fils style émettre une couleur égal ici on va mettre du rouge est automatiquement vous voyez que j'ai mon cercle j'aime mon carré rouge alors moi je ne veux pas dessiner l'intérieur du cercle comme je lé fais ici avec le rectangle mais je le plutôt faire va entrer alors pour faire entrer en fait contexte point béguines paf ça veut dire qu'on va commencer un tracé ensuite on va pouvoir faire différentes fonctions pour modifier le tracé c'est ce que vous voyez par exemple sur cette fille là ici toutes ces fonctions vous permettre vous permettre de vous déplacer de créer un tracé vous voyez par exemple là je peux ballet du point actuel à ce point-là xxi déterminé par ses coordonnées 1 x et y est automatiquement sa tracera une ligne donc ici si je vous montre un exemple je fais ctx points line to dise où on va mettre 50 50 automatiquement ça ça va faire entrer et si vous actualisez vous voyez qu'on ne le voit pas donc là vous voyez qu'on ne voit pas cette ligne alors pour dessiner une ligne il faut faire c'est et x contexte point ce troc est automatiquement ça va tracer la ligne donc ici vous ne la voyez pas c'est normal parce qu'en fait le premier line tout il sait pas d'où il doit commencer donc nous on va dire de commencer en faisant un move to 0,0 et automatiquement qu'est ce que vous voyez vous voyez ici que j'ai mon titre et qui va du coordonnées 00 coordonnées 50 50 mais ensuite on peut aller où on veut par exemple si je peux faire 0 150 cas vous voyez que ça continue à tracer et ainsi de suite donc là on peut dessiner différentes formes après ce que l'on peut faire une fois que l'on est content on va refaire un petit tracé on va mettre 250 c'est fermé donc si vous voulez bien fermer le tracé très simple vous faites honte texte points klose paf est automatiquement ça va se charger de revenir au point de départ et du coup on peut dessiner entre guillemets des formes géométriques moi ce n'est pas ce que je veux faire je veux dessiner un cercle donc je fais un béguines taf et je finirai par un stroke pour dessiner montrer donc pour dessiner un arc de cercle on fait contexte point arc on met tout simplement en premier paramètre locle et coordonnée en x et y de notre centre donc nous ici on va le passer au centre de notre carré donc c'est sans bxl various en pixels ensuite ce que l'on va faire c'est qu'on va indiquer le radius donc le radius c'est tout simplement le rayon moi c'est toujours la moitié c'est sans la moitié de l'argent de la boîte ensuite on va préciser le point de départ donc ici c'est zéro et le point d'arrivée sauf que le point d'arrivée on le donne avec un angle donc si vous avez bien appris votre trigonométrie pour faire un cercle complet ces deux fois matt point pi est automatiquement qu'est ce que vous voyez vous voyez que ça fait un cercle si je fais par exemple en 2010 en 2010 ça fait un arc de cercle donc ça commence ici et ça descend si je fais juste pin up ça fait notre demi cercle et ainsi de suite donc nous on veut un cercle complet donc on va mettre de foin magpies est automatiquement vous voyez que ça fait notre cercle sauf que nous on le veut un petit peu plus grand pour changer la largeur de la ligne ont fait contexte points line witz et on change la valeur donc on peut mettre un comme c'est le cas déjà 10 et ainsi de suite donc là moi je vais m une largeur de 20 et vous voyez que le problème apparaît c'est que notre canevas est trop petit on ne peut pas en sortir ou que notre cercle tout simplement est trop grand du coup je vais réduire ici mais le rayon de mon cercle pour prendre en compte cette largeur la vie si au lieu de 100 jeux les 90 est automatiquement vous voyez cette fois ci que mon cercle et bien dessinés et bien à l'intérieur alors si vous avez un regard d un petit peu ce fichier là vous avez remarqué que l'on peut aussi mettre tout simplement bd des ombres on va essayer ça tout de suite et on va mettre une petite ombre portée à notre cercle donc on est parti ici je vais contexte points shadows of 7 x et je vais mettre 2 2 ensuite shadow blur ensuite contexte point shadow blur jeu et choisir un petit peu la dispersion de mon ombre portée donc qu'ici on va forcer un petit peu le trait on va mettre dix égale 10 et ensuite je fais shadow color je ne mets pas mettre contexte toujours devant shadow color et on va mettre du noir donc ici diez et 0 0 est automatiquement ben vous voyez que j'ai créé mon système d'ombré portée mais par contre ça donne pas forcément l'effet que je veux donc je vais supprimer cette couleur de ligne maîtres dublin donc ici c'est contexte point line style et vous choisissez la couleur nous on va mettre du blanc up alors ici c'est les pales line style juste trompé désolé c ce troc color stroke style voilà et là vous voyez du conte à vienne entre cercle avec notre ombre portée par contre elle est un petit peu trop foncée donc soit vous regardez sur photoshop ou gimp est belle la couleur exacte de votre couleur ou ce que vous pouvez faire vous pouvez utiliser ici le rgb un donc rgb à vous préciser la valeur en rouge si c'est 0000 rouge et rose ou vert 0 bleus du coup ça donne du noir et ensuite entre quatrième argument on peut préciser mais tout simplement le l'opacité donc ici en mettant 0 1 vous voyez qu'on a une ombre beaucoup marqué voilà est comme ça on a notre système de forme d'ailleurs ce que je vais faire je vais réduire encore un petit peu le diamètre tout simplement pour contrebalancer le fait que notre ombre ici vous voyez est trop projeté ici on va essayer nombre un petit peu plus légère et du coup vous m 85 pixels au lieu de 90 et vous voyez qu'on a notre début de cercle donc maintenant ce que j'aimerais bien faire c'est sûr ce cercle m mais notre notre couleur un petit détail si vous regardez l'exemple que j'ai fourni moi j'ai une ombre portée interne alors c'est pas possible d'en faire une circuit s'il n'y a pas possibilité directement avec shadow de mettre hince est en fait que j'ai fait ici vous regardez le code source j'ai tout simplement dupliquer créer plein de petits cercles concentriques en diminuant l'opacité le diamètre fur et à mesure c'est très très propre donc c'est pour ça que je voulais pas forcément détaillé ça est plutôt vous montrez l'utilisation des ombres qui est beaucoup plus sympa mais voilà si vous vous demandez comment c'est fait sachez qu'il ya pas vraiment de solution si ce n'est de faire plusieurs cercles alors ici je reprends mon exemple j'aimerais bien faire mon petit système qui va dessiner l'évolution donc ce que je peux faire c'est ici refaire une forme refaire une forme sauf que je vais pas faire ça tout simplement pourquoi parce que cette nouvelle forme s'est tenue ce nouveau cercle je vais avoir besoin de le modifier donc je le crée dans un entretien ne va et l' avantage c'est que cet autre canevas je pourrais le vide et à chaque modification ce qui permettra de donner ses impressions d'évolution donc ici je vais recréer un autre cercle sauf que je vais l'appeler cette fois-ci color et je vais là ajouté ensuite à mon système donc je la joute en seconde voilà comme ça je vais pouvoir dessiner alors on est parti je vais dessiner mon cercles colorés donc maintenant vous comprenez comment ça fonctionne vous faites var contexte égale ma couleur 0 et ensuite point guette contexte 2d toujours la même chose donc donc ici j'écrase mon ancienne variable tout simplement parce que je ne sais que je n'aurai pas de trace est à refaire sur ce contexte là donc je peux en créer un nouveau mais ensuite je vais faire la même chose ici hop hop hop sauf que je ne vais pas mettre dans vos portes et donc j'enlève le shadow offset le chat de blur et le chat de color est ici je change la couleur je ne vais pas mettre du blanc mais tout simplement un bleu voilà donc automatiquement vous voyez ça dessine mon cercle sauf que ce cercle mais je vais avoir besoin de le faire évoluer donc déjà le parrain donc pour le faire évoluer le paramètre que l'on va devoir toucher c'est ce paramètre là le paramètre qu'il était un mineur la fin de mon cercle donc déjà le premier problème c'est que ça commence au mauvais endroit moi je veux qu'ils commenceront donc ici je vais le décalé de -1 2 me de pi voilà c'est un angle de 90 degrés ou si je vais ça vous voyez que ça commence bien là et du coup lorsque j'aurai fini ça ne sera plus de deux fois matbe mais tout simplement 3/2 de matbe et ça permettra de faire un cercle complet voilà donc c'est cette valeur là qu'il faut retenir alors maintenant ce que l'on va faire c'est tout simplement essayé de calculer un ratio un ratio qui sera compris entre 0 et 1 qui permettra de savoir mais en pourcentage entre guillemets que représente ce chiffre là donc ici je vais récupérer le minent en faisant var mines égale maldives monde une poutre point data mines et ça ça récupère automatiquement la tribu date attiré mine qu'on a vu tout à l'heure de la même façon je récupère le max ici


[1127.51]
et comme ça moi j'aurais plus pareil à utiliser ses lecteurs automatiquement le jour et les valeurs mines et max alors maintenant j'ai besoin de calculer la valeur initiale donc ici la valeur initiale console point blog c'est input points valent sauf que cette valeur aller ici chiffrés et moi ce que j'aimerais bien à vous j aimerais bien avoir tout simplement en ration 0 6 et 0 et 1 6 et le max donc pour cela je vais soustraire la valeur diminue donc moins 1000 et tout ça je vais le / max - mina est automatiquement ça va me donner entre guillemets un ratio donc je vais faire un test tout de suite hop donc là ça me donne 066 maintenant je garde ma valeur 30 et que je dis que la valeur minimale ses vins et que la valeur maximale c'est 40 je devrai trouver combien je devrai trouver 05 et 6 mais ce que je trouve donc pour un système fonctionne bien ici je vais revenir sur 0 et 50 j'ai donc moins ratio donc ici je vais le stocker dans une variable donc là je m var ratio égal ma formule mathématique et maintenant mais ce ratio je vais avoir besoin de l'utiliser à cet endroit là donc en fait ici c'est tout simplement 2 pi auquel on retire en fait un demi py qui est tout simplement la position initiale donc en fait ce deux piges je vais le pont des réparations je fais être ratio fois deux fois magpies est automatiquement vous voyez que ça me donne bien un cercle qui remplit à 60% si ici je mets 0 hop c'est un cercle qui commence à zéro si je mets 10 ça commence à donner un pourcentage et ainsi de suite si je mets 50 ce salon rempli à fond voilà donc déjà on a notre système initial qui fonctionne bien qui permet de montrer à l'utilisateur une valeur de manière originale donc maintenant ce que j'aimerais bien faire et ça va être encore un petit peu plus complexe c'est tout simplement faire en sorte que lorsque je clique et que je bouge ça change la valeur dynamiquement donc on va déjà faire au clic je vais clic et ça change la valeur on verra ensuite comment gérer le mouvement de la souris donc ici je vais détecter lorsque l'on clique entre guillemets sur notre élément d'yves point click fonctions cette fonction prend pas remettre l'événement qui est le clic et ça à faire quelque chose donc déjà on va retirer ce qui pourrait se passer par défaut donc event points de prévente des folles tu vois là et on est prêt à commencer donc je vais déjà calculer la position de la souris par rapport au centre dans mon élément donc pour avoir la position de la souris je fais event point x et 20 points page x et cette valeur je laisse sauvegardés dans une variable que j'ai appelé x est automatiquement tout de suite après je vais faire un console point blog x pour voir au fur et à mesure de mes tests où j'en suis donc là vous voyez que quand je teste plus je clique loin en fait plus la position en x est grande le problème c'est que moi je voudrais qu'à vérifier à peu près ça soit 0 et non pas ici la valeur que vous voyez 150 donc je vais retirer à page x la position par rapport en haut de ma div je mets div point of 7 points top points left du coup vous l'aurez compris ici ça fera moins 0 - donc ici ça va faire moins 100 est ici sans donc en fait à cette valeur que je trouve cet endroit là j'ai juste à lui retirer 100 sauf que moi je vais le faire dynamiquement donc je vais div points 8 / 2 voilà est automatiquement ça me permettra d'avant la position en x ici vous voyez ça fait 7 et ainsi de suite voilà de la même façon je vais calculer la position en y sommes c'est evans poing pages y up ici ce n'est plus left métopes et ici ce n'est plus which may tu es automatiquement si je fais x 2 points hop comme ça comme ceux ci et que je développe aussi y on va pouvoir vérifier que tout fonctionne au pelage est pas des buggy xgd buggy y voit là sauf qu'ici je débute donc ici je remplace aussi par les grecs maintenant quand je clique ici hop vous voyez que au niveau 2 x choix 72 et au niveau du y jouent à peu près à 0 si je clique ici je suis proche de zéro niveau du x par un bleu y est grand donc maintenant ce système la forêt que je calcule et que je le commente hisse en un angle alors pour convertir ses valeurs en angle on va utiliser la fonction arc tangente donc ici on va stocker ça dans une variable pauvres on va appeler à comme angle et on ferme at points marc denjean 2 ça prend en premier paramètre la position unique c'est un second paramètre la position y est automatiquement de cette valeur je vais la déléguée console point blog est ici je m à 2 points et on va débugger et du coup à ce sera une valeur qui sera compris entre - map - pays et puis parce que tout simplement l'angle est soit dans un sens ou dans l'autre donc ici quand je clique quand j'ai supprimé les 2 x ou y on est reparti vous voyez qu'ici c'est l'angle 0 quand je monte et grandit jusqu'à atteindre 3,3 16 à peu près et hop dans l'autre sens il est négatif et grandit donc là vous voyez que l'angle par contre ne me va pas y commence ici moi j'aurais bien aimé qu'il commence là où donc en fait ici je vais tout simplement inversé la valeur de y pour faire pivoter mon angle moins y est automatiquement vous voyez que là ça commence en eau ici j'ai des angles positif positif positif et hop d'un coup il passé négatif airg grandissent voilà donc cet angle il est compris entre nous qui aimons et pied comme je voulais 10 moi ça ne me va pas donc cet angle je vais le / pis donc ici j'aime être divisée par matt point pi voilà donc je vais avoir un truc est compris entre 0 et 1 et entre 0 et -1 moi ça me va pas forcément je veux que ce premier angle ce soit la moitié donc 50% donc 056 je vais diviser tout simplement par deux fois magpies voilà et je n'oublie pas de mettre les parenthèses pour éviter les problèmes donc là vous voyez ça va entre 0 et 0,5 impeccable par contre lorsque sa passion négatif ça ne me va pas donc là pas de problème si un est négatif alors je vais rajouter à 1 est automatiquement ça va me permettre de gérer les valeurs négatives si maintenant je recommence vous voyez ici ça va jusqu'à 0,5 et ensuite ça continue à grandir jusqu'à atteindre et 6 1 voilà donc du coup vous voyez que j'ai mon système d' arc de cercle donc automatiquement une fois que j'ai cette valeur là à mais il me suffit de re faire mon petit cercle que j'ai fait à cet endroit là donc ici j'ai réécrit ça sauf que à cet endroit là je ne fais plus un ratio fois deux formats de pim est tout simplement main à fois deux fois en épi et ça fonctionnera automatiquement je fais un test je clic et vous voyez que ça fait quelque chose de relativement bizarre tout simplement à cet endroit là j'ai oublié de faire le big in taf pour dire je commence un tracé donc là de la même façon il faudrait que je le met ici ça veut dire ben je commence un nouveau tracé claquage clics vous voyez que ça marche par contre quand je clique en arrière vous voyez que ça ne marche pas tout simplement parce qu'à chaque fois il refait un tracé l'un par dessus l'autre donc nous ici on veut parfois on veut pas du tout ça on veut pouvoir mettre nettoyer notre tracé à chaque fois quand pour cela tout simplement on utilise la fonction clear direct automatiquement ça nous permet de déterminer un carré à nettoyer donc nous notre carré c'est tout simplement tout notre canevas 0 0 et 200 deux cents en fait c'est un rectangle mais là ici c'est un carré est automatiquement vous voyez que cette fois ci on a notre système je clique et s'affiche la bonne valeur ensuite cette valeur il faut en l'affiché au niveau de mon une poutre donc pour cela rien de plus simple c'est tout simplement le minent - le max enfin le max - lemine x le ratio c'est à ici à x max - mines et ensuite ce sera sciolla on va ajouter le minimum voilà est automatiquement on va mettre ça dans la valeur de mon input donc c'est dollars input points valent et en mai la valeur up et vous voyez ici que ça mais la valeur moi ça me va pas forcément cette valeur en flotte donc je vais la rendirent en utilisant la fonction rampe cette fonction pas disponibles comme salle est disponible dans la collection mat enfin dans la classe matt est automatiquement vous voyez que j'ai mon système qui fonctionne qui va ici de 0 à 50 donc moi après parce que je peux faire c'est dupliquer je crains notre champ et ici je vais dire que la valeur elle est comprise entre 50 et 100 et pour éviter les problèmes je change la mala par défaut je veux mettre 50 up et vous voyez qu'automatiquement sens que je n'ai rien eu à faire metz a rendu ce champ de la même manière que celui là un champ dynamique l'avantagé c'est que vous l'avez vu avec les datas je vais pouvoir piloter l'autre chose par exemple m datacolor égal et si on me met du rouge donc maintenant ce que j'aimerais bien faire c'est que ça influence alors leur va mettre en valeur par défaut un peu plus grande voilà mais tout simplement ici je vais stocker une valeur je m var color égale une poutre point data color le problème c'est que ça ça peut être fallait il ou pas donc si c'est valide ce sera automatiquement cette couleur là si ce n'est pas valide c'est à dire qu'on n'a pas précisé de couleur je vais mettre la couleur que j'ai mis par défaut et la couleur c'est celle ci hop et à cet endroit là et aussi à celui là hop je mets directement color et vous voyez là m'engage c'est que maintenant on a un système dynamique de la même façon mais ça je vous laisse le faire voilà d'ailleurs ce que je vous propose c'est d'essayer vous même un bain de créer deux nouveaux une nouvelle propriété date un radius qui permettraient de préciser la largeur tout simplement de notre cercle et data oui et date attiré line qui permettraient de déterminer la dimension entre guillemets de la ligne voilà donc ces deux petits exercices que je vous propose de faire pour évoluer donc nous on va s'arrêter là pour les data et on va passer maintenant un la création du système de déplacement c'est à dire que dès que je vais cliquer je veux pouvoir continuer à bouger la souris là vous voyez que quand je maintiens la souris ne se passe rien alors comment ça se passe et tout simplement on va détecter quand est-ce qu'on reste appuyé pour cela c'est la fonction minces bandes et là je vais lancer une fonction event voilà qui fera quelque chose hélas pour l'instant pas juste faire console point log pression maintenant j'ai spectre et on est parti je vais essayer d'appuyer sur ma souris hop vous voyez que ça détecte bien la pression par contre ça ne détectent pas le mouvement donc lorsque je fais une pression sur la souris je vais écouter un second événement qui est l'événement mince m'ouvre cet événement d'ailleurs je vais le buy in et autres mangent verband mance moffatt prochain mind tout simplement parce que je vais avoir besoin d' annuler cet événement plus tard donc ici hop je vais mettre une seconde fonction qui fera tout simplement une console point log là on va mettre bouger alors j'essaie on va mettre celui là juste avant et on essaie comment jarjat puis sur la souris vous voyez que ça détecte pression et bouger et dès que je bouge vous voyez que le bouger s'incrémente donc ça marche bien par contre dès que je lâche et que je continue à bouger vous voyez que ça fonctionne donc ça ça ne va pas je veux que dès que je lâche cet événement là ils s'arrêtent ici je fais un second événement qui est mince up ça c'est lorsqu'on lâche un clic et cet événement là qu'est ce qu'il va faire il va tout simplement supprimée cet événement là pour cela en fait div point n bind mince move voilà est automatiquement comme ça on va voir notre système je reste appuyé je bouge je lâche et je conduis un beau jeans passe plus rien voilà donc en fait à cet endroit là je mets déjà l'événement à cet endroit là je vais tout simplement mettre le code que j'avais écrit tout à l'heure hop celui là voilà donc le pré vente des fosses à rien ici on va le mettre à cet endroit là on va enlever les consoles blog voilà et on va le mettre aussi à cet endroit là pour éviter qu'il y ait des événements parasites qui viennent se greffer à notre système voilà et du coup on n'a plus besoin de notre système de clics donc je refais un essai tout de suite j'appuie ici et vous et que quand je bouge mon cercle se remplit automatiquement dès que je lâche ils arrêtent de se remplir de la même façon ici hop je peux changer la valeur est automatiquement vous voyez que ça fonctionne bien donc voilà on en a terminé avec ce tutoriel donc vous avez appris aujourd'hui comment utiliser le système de cannes va donc cette nouvelle balise qui vous permet tout simplement de dessiner directement sur le navigateur donc on peut dessiner des formes relativement simple relativement simple mais ça donne déjà de bonnes perspectives au niveau interface donc là on a appris à créer des systèmes de jauge virtuel qui sont en plus bas tout simplement dynamique donc on peut directement sélectionner des valeurs en chine en utilisant ce système là donc si ce système de canevas vous intéresse et vous aimeriez aller un petit peu plus loin donc je vous ai donné les deux exercices donc le premier c'est d'essayer de choisir la valeur du radius et enfin du rayon dynamiquement et aussi de pose de donner à l'utilisateur la possibilité de choisir un bain le degré et de choisir bah tout simplement la taille de ce cercle a donc si vous voulez des exemples un petit peu plus poussées sur mon portfolio j'ai créé un système de player html5 arrondi ouais si ça vous intéresse n'hésitez pas à télécharger est sourcé regarder un petit peu comment ça fonctionne ça vous permettra un petit peu d'approfondir cette notion de cannes va donc voilà j'espère que ça vous a plu et surtout si vous avez des questions ou des suggestions d'une autre utilisation de cambra que vous pensez intéressante n'hésitez pas à poster un commentaire ou



Description:
More from this creator:
Article ► https://grafikart.fr/tutoriels/canvas-jauge-circulaire-317

Abonnez-vous ► https://bit.ly/GrafikartSubscribe

Je vous propose aujourd'hui d'en découvrir un peu plus sur les Canvas à travers la création d'une Jauge Circulaire. Les Canvas vous permettent de définir une zone de dessin sur vos pages Web. Cette zone peut ensuite être utilisé en Javascript pour dessiner différentes formes. Soutenez Grafikart: Devenez premium ► https://grafikart.fr/premium

Donnez via Utip ► https://utip.io/grafikart

Retrouvez Grafikart sur: Le site ► https://grafikart.fr

Twitter ► https://twitter.com/grafikart_fr

Discord ► https://grafikart.fr/tchat

Disclaimer:
TranscriptionTube is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to amazon.com
Contact:
You may contact the administrative operations team of TranscriptionTube with any inquiries here: Contact
Policy:
You may read and review our privacy policy and terms of conditions here: Policy