NetPlusMédia

Créer une Jauge Circulaire avec les Canvas

Retour

Sources : http://www.grafikart.fr/tutoriels/jquery/canvas-jauge-circulaire-317

 

Ce programme fonctionne avec la librairie Jquery

jauge-circulaire.html

  1. <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN'
  2. 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
  3. <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='fr' lang='fr'>
  4. <title>Cr&eacute;er une Jauge Circulaire avec les Canvas</title>
  5. <meta http-equiv='content-type' content='text/html; charset=iso-8859-1'/>
  6.  
  7.  
  8. <!-- Style CSS -->
  9. <link rel='stylesheet' type='text/css' href='jauge-circulaire.css' />
  10.  
  11.  
  12.  
  13. </head>
  14.  
  15.  
  16. <input type='text' name='compteur' value='30' class='compteur' data-min='0' data-max='100' />
  17.  
  18. <input type='text' name='compteur' value='55' class='compteur' data-min='0' data-max='200'
  19. data-color='#ff0000' data-taille='60' />
  20.  
  21. <input type='text' name='compteur' value='5' class='compteur' data-min='0' data-max='10'
  22. data-color='#00ff00' data-taille='20' />
  23.  
  24.  
  25. <!-- Javascript -->
  26. <script language='Javascript' type='text/javascript'
  27. src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script>
  28. <script language='Javascript' type='text/javascript'
  29. src='jauge-circulaire-fonction-dessin-jauge.js'></script>
  30. <script language='Javascript' type='text/javascript'
  31. src='jauge-circulaire.js'></script>
  32.  
  33. </body>
  34. </html>

jauge-circulaire-fonction-dessin-jauge.js

  1. function dessin_jauge(element_div , taille , ratio , color , ombre , contexte){
  2.  
  3. if(contexte===true){
  4.  
  5. var circle = $('<canvas width="'+(taille*2)+'px" height="'+(taille*2)+'px" />');
  6. element_div.append(circle);
  7. // on configure notre plan de travail : 2 dimentions
  8. var ctx = circle[0].getContext('2d');
  9.  
  10. }else{
  11.  
  12. ctx = contexte;
  13.  
  14. }
  15.  
  16. // dbut du dessin
  17. ctx.beginPath();
  18. // on dessine un cercle
  19. ctx.arc(taille,taille,(taille/100*85), -1/2*Math.PI , ratio*2*Math.PI-1/2*Math.PI);
  20. // taille du bord
  21. ctx.lineWidth = (taille/100*20);
  22. //couleur du bord
  23. ctx.strokeStyle = color;
  24.  
  25. if(ombre){
  26.  
  27. //position de l'ombre
  28. ctx.shadowOffsetX = (taille/100*1.5);
  29. // taille de l'ombre
  30. ctx.shadowBlur = (taille/100*8);
  31. //couleur de l'ombre
  32. ctx.shadowColor='rgba(0,0,0,0.5)';
  33.  
  34. }
  35.  
  36. //fin du dessin
  37. ctx.stroke();
  38.  
  39. return ctx;
  40.  
  41. }

jauge-circulaire.js

  1. (function($){
  2.  
  3. // on entour le champs texte avec une Div qui contiendra notre jauge
  4. $('input.compteur').wrap('<div class="compteur" />').each(function(){
  5.  
  6. // initialisation des variables
  7. var element_input = $(this); // le champs texte
  8. var element_div = element_input.parent(); // la div
  9. // on rcupre la valeur minimum de la jauge
  10. var min = element_input.data('min');
  11. // puis le maximum
  12. var max = element_input.data('max');
  13. //la couleur de la jauge
  14. var color = element_input.data('color') ? element_input.data('color') : "#91c2ff" ;
  15. // sa taille
  16. var taille = element_input.data('taille') ? element_input.data('taille') : 100 ;
  17. // on rcupre la valeur par dfaut de la jauge et la transporme en pourcentage
  18. var ratio = ( element_input.val() - min ) / ( max - min );
  19.  
  20. // on met en forme la div et le champs texte
  21. element_div.width(taille*2)
  22. .height(taille*2);
  23. element_input.width(taille)
  24. .css("font-size",(taille/100*60)+"px")
  25. .css("top",(taille/100*60)+"px")
  26. .css("left",(taille/100*50)+"px");
  27.  
  28. //on dessine la jauge circulaire l'aide du canevas
  29. dessin_jauge(element_div , taille , 1 , "#fff" , true , true);
  30.  
  31. //on dessine le niveau de la jauge circulaire
  32. var contexte = dessin_jauge(element_div , taille , ratio , color , false , true);
  33.  
  34. // cration d'un vnement : souris clique
  35. element_div.mousedown(function(event){
  36.  
  37. // on supprimer tout vnement qui pourrai parasiter notre animation
  38. event.preventDefault();
  39.  
  40. // cration d'un vnement : souris en mouvement
  41. element_div.bind('mousemove' , function(event){
  42.  
  43. // on rcupre la position de la souris
  44. var x = event.pageX - element_div.offset().left - element_div.width() / 2;
  45. var y = event.pageY - element_div.offset().top - element_div.height() / 2;
  46.  
  47. // on calcule l'angle de la jauge de couleur
  48. var ratio = Math.atan2(x,-y) / (2*Math.PI);
  49. if(ratio<0){ ratio+=1;}
  50.  
  51. //on efface l'ancienne jauge de couleur
  52. contexte.clearRect(0,0,(taille*2),(taille*2));
  53.  
  54. //on redessine la jauge de couleur avec les nouvelles valeurs
  55. dessin_jauge(element_div , taille , ratio , color , false , contexte);
  56.  
  57. // le champs texte obtient la nouvelle valeur arrondie
  58. element_input.val(Math.round( ratio * ( max - min ) + min ) );
  59.  
  60. });
  61.  
  62. // cration d'un vnement : souris d-clique
  63. }).mouseup(function(event){
  64.  
  65. event.preventDefault();
  66. element_div.unbind('mousemove');
  67.  
  68. });
  69.  
  70.  
  71. });
  72.  
  73. })(jQuery);

jauge-circulaire.css

  1. div.compteur{
  2. float:left;
  3. display:inline;
  4. position:relative;
  5. margin:50px;
  6. width:200px;
  7. height:200px;
  8. }
  9.  
  10. div.compteur input{
  11. position:absolute;
  12. top:65px;
  13. left:50px;
  14. font-size:60px;
  15. text-align:center;
  16. width:100px;
  17. border:none;
  18. background:none;
  19. outline:none;
  20. line-height:1em;
  21. }
  22.  
  23. div.compteur canvas{
  24. position:absolute;
  25. top:0;
  26. left:0px;
  27. right:0px;
  28. bottom:0px;
  29. }

Démonstration

Créer une Jauge Circulaire avec les Canvas
ro    Posté le : 07/02/2017 - 21:29
c beau
Ge6ka    Posté le : 02/04/2018 - 19:09
Bonjour ,

J'aime vraiment beaucoup cet exemple de jauge !
C'est d'autant plus agréable lorsque le code est bien commenté !!
Merci pour ce partage :

Laissez-nous un commentaire


Votre pseudo/nom/prénom :
Votre commentaire :
Plan du site - Contact - Google+ - FaceBook - Twitter