Partage
  • Partager sur Facebook
  • Partager sur Twitter

Js et curseur de la souris

    18 juin 2019 à 10:09:19

    Bonjour,

    voila je vous expose le problème, j'ai créer une page web avec du code html, css et Js dans cette page on peut charger une image prédéfinis et dessiner dessus des rectangle qui feront que la zone ou se trouve le dit rectangle sera effacer de l'image pour devenir transparent. Maintenant j'aimerais changer le curseur de la souris au survol des zones rectangles (car on peut les deplacer, les agrandir et les supprimer) alors je sais ce que vous allez dire, je devrais le faire en CSS pour le curseur mais non parce que tout mon code par rapport aux rectangles se fait dans le Js à l'aide d'un canvas Html alors oui j'ai fait un div sur le html pour rendre mon canvas scrollable quand l'image est grande mais rien d'autre me permettant de modifier mon css car mes rectangles sont en fait dans un tableau Js  (leur coordonées). Alors voila si quelqu'un as une idée pour me permettre de changer les curseurs de la souris en js je suis prenneur (je precise que tout mes fichier sont séparer, j'ai un .htlm, un .Css et un .Js)

    //Déclaration des variables d'offset pour la souris
    var lineOffset = 4;
    var anchrSize = 4;
    
    //Déclaration des variables utiles pour conaitre la position de la souris et la zone de clic
    var SourisClic = false;
    var ZoneDeClic = {boite: -1, pos:'o'};
    var x1 = -1;
    var y1 = -1;
    var x2 = -1;
    var y2 = -1;
    
    //Déclaration du tableau qui va contenir les positions et propriétée de nos boites
    var boites = [];
    var tmpBoite = null;
    var SupG = 0;
    var SupD = 0;
    var InfG = 0;
    var InfD = 0;
    var Haut = 0;
    var Bas = 0;
    var Gauche = 0;
    var Droite = 0;
    
    //Déclaration du Canvas, du Context et du Telechargement de nos images
    var canvas = document.getElementById("canvas");
    var Canvas_Scroll = document.getElementById("Canvas-Scroll");
    var dwn = document.getElementById('Telechargement');
    var context = canvas.getContext('2d');
    
    dwn.onclick = function(){
      download(canvas, 'Template test.png');
    }
    
    var template = new Image();
    //Déclaration et définition de ma fonction principale Template
    function Template(){
        context.clearRect(0,0,canvas.width,canvas.height);
        Corbeilles();
        //Création d'un nouvel élément contenant mon image template
        //template = new Image();
        template.src = "template2.png";
        canvas.width = template.width;
        canvas.height = template.height;
        //Affichage de notre image sur le canvas
        context.drawImage(template,0,0);
        //context.drawImage(template, 5, 5,1660,905);//ici le (5,5) donne une petite marge entre le bord du template et l'image
        //Cette ligne ci-dessous me permet d'afficher dans une div sur mon code HTML le nom de mon image
        document.getElementById('NumImg').innerHTML = "Image : Template";
        //Là j'appèle une fonction qui se trouve plus bas
        BoitesRenv();
        Afficher();
        //Ici j'instancie l'evènement du clic de ma souris sur mon canvas
        canvas.onmousedown = function(e) {
            SourisClic = true;//Là je passe ma variable à True pour l'activer
            ZoneDeClic = ZoneCourante(e.offsetX, e.offsetY);//Et là j'appèlle une fonction exterieur pour récuperer l'offset
            //Et donc j'attribu des valeurs à mes variables de souris
            x1 = e.offsetX;
            y1 = e.offsetY;
            x2 = e.offsetX;
            y2 = e.offsetY;
        };
    
        //Ici j'instancie l'évènement du "Non-Clic", c'est ici que mon tableau "boites" va se remplir
        canvas.onmouseup = function(e) {
            //Dans un premier temps je fait le push de ma variable tmpBox dans mon tableau
            if (ZoneDeClic.boite == -1 && tmpBoite != null) {
                boites.push(tmpBoite);
            } 
            else if (ZoneDeClic.boite != -1) {
                var BoiteSelec = boites[ZoneDeClic.boite];
              if (BoiteSelec.x1 > BoiteSelec.x2) {
                  var AncienX1 = BoiteSelec.x1;
                  BoiteSelec.x1 = BoiteSelec.x2;
                  BoiteSelec.x2 = AncienX1;
              }
              if (BoiteSelec.y1 > BoiteSelec.y2) {
                  var AncienY1 = BoiteSelec.y1;
                  BoiteSelec.y1 = BoiteSelec.y2;
                  BoiteSelec.y2 = AncienY1;
              }
            }
            ZoneDeClic = {boite: -1, pos:'o'};
            tmpBoite = null;
            SourisClic = false;
            //Là j'appèlle la fonction qui active la transparence des mes boites qui se trouve plus bas
            Transparence();
            BoitesRenv();
          };
    
        //Ici je pourrais inclure une fonction "onmouseout" (Quand la souris sort du canvas) mais c'est très peu utile car très similaire à "onmouseup" c'est pourquoi je la laisse en commentaire.
        /*canvas.onmouseout = function(e) {
              //Template();
            if (ZoneDeClic.boite != -1) {
                var BoiteSelec = boites[ZoneDeClic.boite];
                if (BoiteSelec.x1 > BoiteSelec.x2) {
                  var AncienX1 = BoiteSelec.x1;
                  BoiteSelec.x1 = BoiteSelec.x2;
                  BoiteSelec.x2 > AncienX1;
              }
              if (BoiteSelec.y1 > BoiteSelec.y2) {
                  var AncienY1 = BoiteSelec.y1;
                  BoiteSelec.y1 = BoiteSelec.y2;
                  BoiteSelec.y2 > AncienY1;
              }
            }
            SourisClic = false;
            ZoneDeClic = {box: -1, pos:'o'};
            tmpBoite = null;
            BoitesRenv();
        };*/
    
        //Ici j'instancie l'evenement onmousemove qui auras pour effet de detecter toute les coordonées de ma souris au glissement de celle-ci quand je clic
        canvas.onmousemove = function(e) {
            //Il faut d'abord que certaines conditions soient remplient pour que cela fonctionne notament le mousedown
            if (SourisClic && ZoneDeClic.boite == -1) {
                x2 = e.offsetX;
                y2 = e.offsetY;
                //et là j'appèlle ma fonction qui va dessiner mes boites (ou les redessinner selon ce que je veux)
                NouvDess();
            } 
            else if (SourisClic && ZoneDeClic.boite != -1) {
                x2 = e.offsetX;
                y2 = e.offsetY;
                xOffset = x2 - x1;
                yOffset = y2 - y1;
                x1 = x2;
                y1 = y2;
          
              if (ZoneDeClic.pos == 'i'  || ZoneDeClic.pos == 'tl' || ZoneDeClic.pos == 'l'  || ZoneDeClic.pos == 'bl') {
                boites[ZoneDeClic.boite].x1 += xOffset;
              }
              if (ZoneDeClic.pos == 'i'  || ZoneDeClic.pos == 'tl' || ZoneDeClic.pos == 't'  || ZoneDeClic.pos == 'tr') {
                boites[ZoneDeClic.boite].y1 += yOffset;
              }
              if (ZoneDeClic.pos == 'i'  || ZoneDeClic.pos == 'tr' || ZoneDeClic.pos == 'r'  || ZoneDeClic.pos == 'br') {
                boites[ZoneDeClic.boite].x2 += xOffset;
              }
              if (ZoneDeClic.pos == 'i'  || ZoneDeClic.pos == 'bl' || ZoneDeClic.pos == 'b'  || ZoneDeClic.pos == 'br') {
                boites[ZoneDeClic.boite].y2 += yOffset;
              }
              NouvDess();
              BoitesRenv();
            }
        };
    
        //Nous y voila, la fonction de dessin de nos recrangles
        function NouvDess() {
            //Dans un premier temps on clear les rectangles precedents
            context.clearRect(0, 0, 1670, 925);
            //et on ouvre une nouvelle figure qui va s'étendre sur plusieur fonctions !
            context.beginPath();
            //Ici tant que "i" ne dépasse pas le tableau on appèlle la fonction DessBoiteOn avec des variables
            for (var i = 0; i < boites.length; i++) {
              DessBoite(boites[i], context);
            }
            if (ZoneDeClic.boite == -1) {
              tmpBoite = NouvBoite(x1, y1, x2, y2);
              if (tmpBoite != null) {
                DessBoite(tmpBoite, context);
              }
              
            }
        }
    
        //Voici enfin notre fonction TrouvZoneCourante qui nous envoie l'offset pour le dessin
        function ZoneCourante(x, y) {
            //Tant qu'on ne depasse pas notre tableau bien evidement
            for (var i = 0; i < boites.length; i++) {
              var boite = boites[i];
              //On créer également deux variable contenant les coordonées du centre de nos boites. Pourquoi creer une variable pour sa ? Tout simplement pour ne pas à avoir à retaper le calcul complet à chaques fois.
              xCenter = boite.x1 + (boite.x2 - boite.x1) / 2;
              yCenter = boite.y1 + (boite.y2 - boite.y1) / 2;
              if (boite.x1 - lineOffset <  x && x < boite.x1 + lineOffset) {
                if (boite.y1 - lineOffset <  y && y < boite.y1 + lineOffset) {
                  return {boite: i, pos:'tl'};
                } 
                else if (boite.y2 - lineOffset <  y && y < boite.y2 + lineOffset) {
                  return {boite: i, pos:'bl'};
                } 
                else if (yCenter - lineOffset <  y && y < yCenter + lineOffset) {
                  return {boite: i, pos:'l'};
                }
              } 
              else if (boite.x2 - lineOffset < x && x < boite.x2 + lineOffset) {
                if (boite.y1 - lineOffset <  y && y < boite.y1 + lineOffset) {
                  return {boite: i, pos:'tr'};
                } 
                else if (boite.y2 - lineOffset <  y && y < boite.y2 + lineOffset) {
                  return {boite: i, pos:'br'};
                } 
                else if (yCenter - lineOffset <  y && y < yCenter + lineOffset) {
                  return {boite: i, pos:'r'};
                }
              } 
              else if (xCenter - lineOffset <  x && x < xCenter + lineOffset) {
                if (boite.y1 - lineOffset <  y && y < boite.y1 + lineOffset) {
                  return {boite: i, pos:'t'};
                } 
                else if (boite.y2 - lineOffset <  y && y < boite.y2 + lineOffset) {
                  return {boite: i, pos:'b'};
                } 
                else if (boite.y1 - lineOffset <  y && y < boite.y2 + lineOffset) {
                  return {boite: i, pos:'i'};
                }
              } 
              else if (boite.x1 - lineOffset <  x && x < boite.x2 + lineOffset) {
                if (boite.y1 - lineOffset <  y && y < boite.y2 + lineOffset) {
                  return {boite: i, pos:'i'};
                }
              }
            }
            return {boite: -1, pos:'o'};
        }
    
        //Ici on instancie donc la fonction NouvBoite qui va nous permettre de dessiner plusieur boites sur le même ecran
        function NouvBoite(x1, y1, x2, y2) {
            //Alors la cela peut paraitre bizzare au premier abord mais oui j'appèlle la fonction Template alors que je suis en train d'écrire dedans. En fait c'est plus compliqué, j'appelle tout ce qui as été écris avant
            //la fonction NouvBoite de sorte à ce que tout reste afficher à l'écran ce qui est plus agréable à l'utillisation.
            Template();
            boiteX1 = x1 < x2 ? x1 : x2;
            boiteY1 = y1 < y2 ? y1 : y2;
            boiteX2 = x1 > x2 ? x1 : x2;
            boiteY2 = y1 > y2 ? y1 : y2;
            if (boiteX2 - boiteX1 > lineOffset * 2 && boiteY2 - boiteY1 > lineOffset * 2) {
                return {x1: boiteX1,
                        y1: boiteY1,
                        x2: boiteX2,
                        y2: boiteY2,
                        lineWidth: 1,
                        color: 'red'};
            } 
            else {
            return null;
           }
        }
    
        //Ici j'instancie la dernierre fonction de notre template le DessBoiteOn, il s'agit de la fonction qui prend les paramètres pour les boites
        function DessBoite(boite, context) {
            Template();
            xCenter = (boite.x1 + (boite.x2 - boite.x1) / 2);
            yCenter = (boite.y1 + (boite.y2 - boite.y1) / 2);
    
            context.strokeStyle = boite.color;
            context.fillStyle = boite.color;
          
            context.rect(boite.x1, boite.y1, (boite.x2 - boite.x1), (boite.y2 - boite.y1));
            context.lineWidth = boite.lineWidth;
            context.fill();
            //context.stroke();
    
            SupG = context.fillRect(boite.x1 - anchrSize, boite.y1 - anchrSize, 2 * anchrSize, 2 * anchrSize);
            Gauche = context.fillRect(boite.x1 - anchrSize, yCenter  - anchrSize, 2 * anchrSize, 2 * anchrSize);
            InfG = context.fillRect(boite.x1 - anchrSize, boite.y2 - anchrSize, 2 * anchrSize, 2 * anchrSize);
            Bas = context.fillRect(xCenter  - anchrSize, boite.y1 - anchrSize, 2 * anchrSize, 2 * anchrSize);
            //context.fillRect(xCenter  - anchrSize, yCenter  - anchrSize, 2 * anchrSize, 2 * anchrSize);
            Droite = context.fillRect(xCenter  - anchrSize, boite.y2 - anchrSize, 2 * anchrSize, 2 * anchrSize);
            SupD = context.fillRect(boite.x2 - anchrSize, boite.y1 - anchrSize, 2 * anchrSize, 2 * anchrSize);
            Haut = context.fillRect(boite.x2 - anchrSize, yCenter  - anchrSize, 2 * anchrSize, 2 * anchrSize);
            InfD = context.fillRect(boite.x2 - anchrSize, boite.y2 - anchrSize, 2 * anchrSize, 2 * anchrSize);
    
            imageBouton = new Image();
            imageBouton.src = "Corbeille2.png";
            context.drawImage(imageBouton, (boite.x1 + (boite.x2 - boite.x1) / 2)-20, boite.y1 + (boite.y2 - boite.y1) / 2-20,40,40);
            for(i = 0; i < boites.length; i++){
              xCenterJ = (boites[i].x1 + (boites[i].x2 - boites[i].x1) / 2);
              yCenterJ = (boites[i].y1 + (boites[i].y2 - boites[i].y1) / 2);    
              SupG = context.fillRect(boites[i].x1 - anchrSize, boites[i].y1 - anchrSize, 2 * anchrSize, 2 * anchrSize);
              Gauche = context.fillRect(boites[i].x1 - anchrSize, yCenterJ     - anchrSize, 2 * anchrSize, 2 * anchrSize);
              InfG = context.fillRect(boites[i].x1 - anchrSize, boites[i].y2 - anchrSize, 2 * anchrSize, 2 * anchrSize);
              Bas = context.fillRect(xCenterJ     - anchrSize, boites[i].y1 - anchrSize, 2 * anchrSize, 2 * anchrSize);
              //context.fillRect(xCenterJ     - anchrSize, yCenterJ     - anchrSize, 2 * anchrSize, 2 * anchrSize);
              Droite = context.fillRect(xCenterJ     - anchrSize, boites[i].y2 - anchrSize, 2 * anchrSize, 2 * anchrSize);
              SupD = context.fillRect(boites[i].x2 - anchrSize, boites[i].y1 - anchrSize, 2 * anchrSize, 2 * anchrSize);
              Haut = context.fillRect(boites[i].x2 - anchrSize, yCenterJ     - anchrSize, 2 * anchrSize, 2 * anchrSize);
              InfD = context.fillRect(boites[i].x2 - anchrSize, boites[i].y2 - anchrSize, 2 * anchrSize, 2 * anchrSize);
    
              imageBouton = new Image();
              imageBouton.src = "Corbeille2.png";
              context.drawImage(imageBouton, (boites[i].x1 + (boites[i].x2 - boites[i].x1) / 2)-20, boites[i].y1 + (boites[i].y2 - boites[i].y1) / 2-20,40,40);
            }
        }
    }
    
    //On instancie ici notre fonction Transparence
    function Transparence(){
      //Ici on récupère le data de note image
      var imgData = context.getImageData(0,0,canvas.width,canvas.height);
      //Là on execute le programme tant qu'on est dans le tableau des boites
      for (i = 0; i < boites.length; i++){
        //Là on parcour toute la zone X donc l'abscisse
        for (x = boites[i].x1; x < boites[i].x2; x++ ){
          //Là on parcour toute la zone Y donc l'ordonée
          for (y = boites[i].y1; y < boites[i].y2; y++){
            if (( 
               (    (x> ( (boites[i].x1 +  boites[i].x2) /2 -21 )) && (x< ( (boites[i].x1 +  boites[i].x2) /2 +20 ) ) )
            && (    (y> ( (boites[i].y1 +  boites[i].y2) /2 -21 )) && (y< ( (boites[i].y1 +  boites[i].y2) /2 +20 ) ) )
            ) == false )
            //Et donc du coup quand il as trouver nos rectangles il met alpha = 0
            imgData.data[(y*(canvas.width)+x)*4+3] = 0;
          }
        }
      }
      context.putImageData(imgData, 0, 0);
    }



    • Partager sur Facebook
    • Partager sur Twitter
      18 juin 2019 à 12:51:54

      Salut,

      Tu peux changer le curseur sur tout le canvas quand la souris entre ou sort d'une zone dans ton canvas.

      Exemple

      if(..... ENTRE DANS LA ZONE ......) {
        canvas.style.cursor = 'pointer';
      }
      ......
      if (.... SORT DE LA ZONE ....) {
        canvas.style.cursor = 'auto';
      }



      -
      Edité par tlgMan 18 juin 2019 à 12:53:07

      • Partager sur Facebook
      • Partager sur Twitter
        18 juin 2019 à 14:13:20

        Oui d'accord mais je met sa ou dans mon code ? parce que la je vois pas xP puis aussi quand tu dis "entre dans la zone" tu veux dire un "boites.onmouseover()" ?
        • Partager sur Facebook
        • Partager sur Twitter
          18 juin 2019 à 17:55:52

          Oui dans "boites.onmouseover()" exact, c'est juste pour donner une idée du code.

          Tu peux le mettre dans la partie : canvas.onmousemove, ça me parait pas mal non ?

          • Partager sur Facebook
          • Partager sur Twitter
            19 juin 2019 à 9:11:26

            voila comment j'ai modifié mon code avec le mouseover mais sa marche toujours pas malheureusement

            canvas.onmousemove = function(e) {
                    //Il faut d'abord que certaines conditions soient remplient pour que cela fonctionne notament le mousedown
                    //for(i = 0; i < boites.length; i++){
                      if(boites.onmouseover()){
                        canvas.style.cursor = 'help';
                      }
                    //}
                    if (SourisClic && ZoneDeClic.boite == -1) {
                        x2 = e.offsetX;
                        y2 = e.offsetY;
                        //et là j'appèlle ma fonction qui va dessiner mes boites (ou les redessinner selon ce que je veux)
                        NouvDess();
                    } 
                    else if (SourisClic && ZoneDeClic.boite != -1) {
                        x2 = e.offsetX;
                        y2 = e.offsetY;
                        xOffset = x2 - x1;
                        yOffset = y2 - y1;
                        x1 = x2;
                        y1 = y2;
                  
                      if (ZoneDeClic.pos == 'i'  || ZoneDeClic.pos == 'tl' || ZoneDeClic.pos == 'l'  || ZoneDeClic.pos == 'bl') {
                        boites[ZoneDeClic.boite].x1 += xOffset;
                      }
                      if (ZoneDeClic.pos == 'i'  || ZoneDeClic.pos == 'tl' || ZoneDeClic.pos == 't'  || ZoneDeClic.pos == 'tr') {
                        boites[ZoneDeClic.boite].y1 += yOffset;
                      }
                      if (ZoneDeClic.pos == 'i'  || ZoneDeClic.pos == 'tr' || ZoneDeClic.pos == 'r'  || ZoneDeClic.pos == 'br') {
                        boites[ZoneDeClic.boite].x2 += xOffset;
                      }
                      if (ZoneDeClic.pos == 'i'  || ZoneDeClic.pos == 'bl' || ZoneDeClic.pos == 'b'  || ZoneDeClic.pos == 'br') {
                        boites[ZoneDeClic.boite].y2 += yOffset;
                      }
                      NouvDess();
                      BoitesRenv();
                      Resize();
                    }
                };



            -
            Edité par StephenFarnault1 19 juin 2019 à 16:55:26

            • Partager sur Facebook
            • Partager sur Twitter
              20 juin 2019 à 14:43:59

              Salut,

              En fait je pensais que boites.onmouseover() était un fonction que tu avais créé.

              Ca ne peut pas marcher comme ça. "boites" est un tableau.

              Il faut que tu code la fonction onmouseover pour chaque boite et que tout parcours la liste.

              • Partager sur Facebook
              • Partager sur Twitter
                20 juin 2019 à 15:15:43

                okay mais je mais quoi dans la fonction onmouseover ? xP j'avance dans mon programme il me reste juste ce truc pour que je puisse le finir proprement ^^
                • Partager sur Facebook
                • Partager sur Twitter

                Js et curseur de la souris

                × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                • Editeur
                • Markdown