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);
}

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

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()" ?

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 ?

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

please

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.

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

up