DESSINER UN RECTANGLE SUR UNE IMAGE

Commentaire de philou0075 le 27/03/2005 06:10:15

Bravo. Très ingénieux la manière de dessiner ce rectangle.

Commentaire de bidouillator le 29/08/2006 10:22:44

Super source, je cherchais quelque chose dans le genre depuispas mal de temps.
merci

Commentaire de masternico le 25/10/2007 00:11:58

Salut, c'est moi aussi ce que je cherchais, mais j'étais géné par le fait que l'on ne puisse pas faire de cadre en bougeant la souris vers la gauche ou en haut. J'ai donc apporté qques modifications pour y remédier:

Il suffit de remplacer la fonction runDraw par celle-ci et celà devrait fonctionner à merveille

/*****************************/
/*
* runDraw : "drag&drop" (+/-)
**/
function runDraw(evt)
{
        // j'ai déplacé le test en début de proc
        if(curElement == null) return false;
        var e = null;
        var newX=0;
        var newY=0;
        // j'ai rajouté ces deux variables qui me permettent de calculer la hauteur et largeur du cadre
        var width = 0;
        var height = 0;
        // IE
        if(document.all)
        {
                e = window.event;
                newX = e.x;
                newY = e.y;
        }
        // Mozilla
        else
        {
                e = evt;
                newX = e.clientX;
                newY = e.clientY;
        }
        ///////////////
        //modif
        //////////////
        if(newX<startPos[0]){     // si la souris est à gauche du point de départ, on déplace le cadre vers la nouvelle coordonnée
                document.getElementById("mask").style.left = newX+"px";
                width = startPos[0] - newX;
        }
        else{     // sinon, on déplace le cadre en son point d'origine
                document.getElementById("mask").style.left = startPos[0]+"px";
                width = newX - startPos[0];

        }

        if(newY<startPos[1]){      // si la souris est en haut du point de départ, on déplace le cadre vers la nouvelle coordonnée
                document.getElementById("mask").style.top = newY+"px";
                height = startPos[1] - newY;
        }
        else{      // sinon, on déplace le cadre en son point d'origine
                document.getElementById("mask").style.top = startPos[1]+"px";
                height = newY - startPos[1];
        }
        /////////////////////
        // fin modifs
        /////////////////////

        // resize du calque
        document.getElementById("mask").style.width = width +"px";
        document.getElementById("mask").style.height = height +"px";
        return false;
}