begin process at 2012 05 28 13:27:52
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Graphique

 > DESSINER UN RECTANGLE SUR UNE IMAGE

DESSINER UN RECTANGLE SUR UNE IMAGE


 Information sur la source

Note :
9,38 / 10 - par 8 personnes
9,38 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Graphique Niveau :Expert Date de création :07/07/2004 Date de mise à jour :08/07/2004 19:49:57 Vu / téléchargé :14 846 / 1 509
Auteur : Jackboy

Ecrire un message privé
Site perso
Commentaire sur cette source (9)
Ajouter un commentaire et/ou une note

 Description

Cliquez pour voir la capture en taille normale
Bonjour !

suite a un trouble que j'avais a créer une petite appli permettant de dessiner sur une image. J'en est trouvé la solution et voici....

**update #1**
- modif de la fonction getzone et la valeur des x et y


 Conclusion

Merci à zegnoo pour sont aide...

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Sources du même auteur

SCRIPT POUR LE FORMATAGE DE LA DATE SELON CHOIX DU TYPE
GESTION DES EXTENSIONS SELON LE SIZE
Source avec Zip TRAITEMENT DES DONNÉES AVEC UN CHECKBOX
Source avec Zip VITESSE CONNEXION
TEXTE DISABLED
Toutes les sources de Jackboy

 Sources de la même categorie

Source avec Zip JDMATH-MINI.JS : GÉNÉRATION D'EXPRESSION MATHÉMATIQUE par jdmcreator
Source avec une capture SPHERE 3D DÉFORMABLE par phm
Source avec Zip Source avec une capture EFFET DE ROTATION A 360° D'IMAGE AVEC ACCELERATION DECELERAT... par kazma
Source avec Zip Source avec une capture PETIT LOGICIEL DE DESSIN, RETOUCHE AVEC CANVAS par kazma
Source avec Zip Source avec une capture CALCULATRICE HEURE par m22001111
Toutes les sources de la catégorie Graphique

Commentaires et avis

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

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

Commentaire de ifebo le 12/05/2005 05:40:18

Ce trouble était consécutif à quoi ?
La fille de l'image ? ;-)
Si la fille vaut 10, toi tu vaux bien un petit 9.

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 zetta le 21/04/2007 13:59:16

Salut,
super code, c'est ca que je cherchais...
merci encore

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

Commentaire de masternico le 25/10/2007 00:15:38 9/10

J'avais pas noté... c'est fait

Commentaire de 3KyNoX le 12/11/2009 09:02:37

Modification du calcul pour que la zone de départ x et y soit le coin supérieur gauche de l'image (0,0):

function getZone(img, mask) {

            var src = document.images[img];
            var target = document.getElementById(mask);

            /* Ne pas oublier ici que le 560 est la valeur de la hauteur de l'image */
            /* donc ont doit la modifier selon la hauteur si l'image change */

            var hauteur = (document.getElementById(mask).offsetHeight);
            var largeur = (document.getElementById(mask).offsetWidth);
            var x1 = (GetRealOffsetLeft(target) - GetRealOffsetLeft(src));
            var x2 = (x1 + largeur);
            var y1 = GetRealOffsetTop(target) - GetRealOffsetTop(src);
            var y2 = y1 + hauteur;

            var str = "X1 = " + x1;
            str += "\nX2 = " + x2;
            str += "\nY1 = " + y1;
            str += "\nY2 = " + y2;
            str += "\n";

            str += "\n(X1,Y1) = (" + x1;
            str += "," + y1;
            str += ")";

            str += "\n(X2,Y1) = (" + x2;
            str += "," + y1;
            str += ")";

            str += "\n(X1,Y2) = (" + x1;
            str += "," + y2;
            str += ")";

            str += "\n(X2,Y2) = (" + x2;
            str += "," + y2;
            str += ")";

            str += "\n";
            str += "\nHauteur = " + (document.getElementById(mask).offsetHeight);
            str += "\nLargeur = " + (document.getElementById(mask).offsetWidth);
            alert(str);
        }

Auparavant, le coin 0 pour x était à gauche et le point 0 pour y en bas, ce que je trouvais illogique. Plus besoin de définir la hauteur de l'image si elle diffère également. Je vote car ça m'a bien servi. La possibilité de redéfinir l'emplacement et la taille du champ div défini serait une bonne fonctionnalité; ainsi que de définir une image qui change sur ce div également. Merci.

Commentaire de 3KyNoX le 12/11/2009 09:05:24 10/10

vote

Commentaire de pastis51forever le 21/01/2010 23:26:11

Hello!

J'ai ajouté quelques petits trucs à cette source (et enlevé la compatibilité avec ie, je pouvais pas la vérifier, pas équipé...):
- coloration du rectangle
- Le rectangle peut être modifié après coup grace aux poignées dans les coins
- Le rectangle peut être déplacé (une fois dessiné) en cliquant dessus (sauf sur les coins, bien sûr...)
- L'image peut être affichée de manière réduite grace à maxWidth et maxHeight, les données qui en sortent étant forcément moins précises, puisqu'arrondies, mais ca permet de travailler sur des photos qui sortent des APN récents
- 4 champs ont étés rajoutés, (que j'utilise moi en masqué, pour envoyer à php qui s'occupe de retailler) donnant les coordonnées des points supérieur gauche et inférieur droit

Du coup, ca fait beaucoup de modifs, mais si l'auteur veut mettre à jour sa source, qui m'a aidé comme base, ainsi que les 2 modifs proposées en commentaire, après l'avoir optimisée pour ie & co, si ca le chante, c'est toujours mieux que de démultiplier les sources.

Voila le code:

<html>
    <head>
        <style type='text/css'>
            #mask
            {
                position: absolute;
                border: solid 1px #000000;
                background-color:rgba(150,150,256,0.3);
                overflow:hidden;
            }
            #mask div{
                position:absolute;
                background-color:rgba(150,150,150,0.4);
                width:20px;
                height:20px;
            }
            #mask div#tl{
                border-right: solid 1px #666666;
                border-bottom: solid 1px #666666;
                top:0;
                left:0;
                cursor:nw-resize;
            }
            #mask div#tr{
                border-left: solid 1px #666666;
                border-bottom: solid 1px #666666;
                top:0;
                right:0;
                cursor:ne-resize;
            }
            #mask div#bl{
                border-right: solid 1px #666666;
                border-top: solid 1px #666666;
                bottom:0;
                left:0;
                cursor:sw-resize;
            }
            #mask div#br{
                border-left: solid 1px #666666;
                border-top: solid 1px #666666;
                bottom:0;
                right:0;
                cursor:se-resize;
            }
        </style>
        <script language="JavaScript" type="text/JavaScript">
            <!--
            /*****************************/
            // Parameters that allow to use this on a thumbnail
            var maxWidth = 600;
            var maxHeight = 400;
            // End of the parameters
            /*****************************/


            /*****************************/
            // Don't change these elements
            var factor = 1;
            var width = 0;height = 0;
            var x1 = 0;var y1 = 0;var x2 = 0;var y2 = 0;
            var minX = 0;var maxX = 0;var minY = 0;var maxY = 0;
            var startX = 0;var startY = 0;
            var isDrawing = false;
            var isMoving = false;
            var isDrawn = false;
            var selectedCorner = '';

            /*****************************/
            /*
             * initialization of the events
             **/
            function init(){
                document.images.obj.onmousedown=startRedimMask;
                document.images.obj.onmousemove=redimMaskSelect;

                document.getElementById("mask").onmousedown=startMoveMask;
                document.getElementById("mask").onmousemove=moveMask;
                document.getElementById("mask").onmouseup=endRedimMask;

                document.getElementById("tl").onmousedown=startRedimMaskTL;
                document.getElementById("tl").onmousemove=redimMaskSelect;
                document.getElementById("tl").onmouseup=endRedimMask;

                document.getElementById("tr").onmousedown=startRedimMaskTR;
                document.getElementById("tr").onmousemove=redimMaskSelect;
                document.getElementById("tr").onmouseup=endRedimMask;

                document.getElementById("bl").onmousedown=startRedimMaskBL;
                document.getElementById("bl").onmousemove=redimMaskSelect;
                document.getElementById("bl").onmouseup=endRedimMask;

                document.getElementById("br").onmousedown=startRedimMaskBR;
                document.getElementById("br").onmousemove=redimMaskSelect;
                document.getElementById("br").onmouseup=endRedimMask;
            }
            function startMoveMask(evt){
                if(isDrawing || !isDrawn){
                    return false;
                }
                isMoving = true;
                decayX = evt.clientX-x1;
                decayY = evt.clientY-y1;
                return false;
            }
            function moveMask(evt){
                if(!isMoving){
                    return false;
                }

                var newX=0;
                newX = evt.clientX - decayX;
                var maskWidth = x2 - x1;
                if(newX >= minX && newX + maskWidth <= maxX){
                    document.getElementById("mask").style.left = newX;
                }else if(newX >= minX){
                    document.getElementById("mask").style.left = maxX - maskWidth;
                }else{
                    document.getElementById("mask").style.left = minX;
                }

                var newY=0;
                newY = evt.clientY - decayY;
                var maskHeight = y2 - y1;
                if(newY >= minY && newY + maskHeight <= maxY){
                    document.getElementById("mask").style.top = newY;
                }else if(newY >= minY){
                    document.getElementById("mask").style.top = maxY - maskHeight;
                }else{
                    document.getElementById("mask").style.top = minY;
                }
            }
            function redimMaskSelect(evt){
                if(!isDrawing){
                    return false;
                }
                return redimMask(evt);
            }
            function startRedimMaskTL(evt){
                selectedCorner = 'TL';
                return startRedimMaskFromCorners(evt);
            }
            function startRedimMaskTR(evt){
                selectedCorner = 'TR';
                return startRedimMaskFromCorners(evt);
            }
            function startRedimMaskBL(evt){
                selectedCorner = 'BL';
                return startRedimMaskFromCorners(evt);
            }
            function startRedimMaskBR(evt){
                selectedCorner = 'BR';
                return startRedimMaskFromCorners(evt);
            }
            function startRedimMaskFromCorners(evt){
                isDrawing = true;
                startX = evt.clientX;
                startY = evt.clientY;
                return false;
            }

            function startRedimMask(evt){
                isDrawing = true;
                var newX=0;
                var newY=0;
                newX = evt.clientX;
                newY = evt.clientY;
                // placement du calque
                document.getElementById("mask").style.top = newY+"px";
                document.getElementById("mask").style.left = newX+"px";
                document.getElementById("mask").style.width = "0px";
                document.getElementById("mask").style.height = "0px";
                //position = Array(newX,newY,newX,newY);
                startX = newX;
                startY = newY;
                x1 = x2 = newX;
                y1 = y2 = newY;
                return false;
            }

            function redimMask(evt){
                var newX=0;
                var newY=0;
                var width = 0;
                var height = 0;

                newX = evt.clientX;
                newY = evt.clientY;
                if(isDrawn){
                    if(selectedCorner == 'TL'){
                        startX = x2;
                        startY = y2;
                    }else if(selectedCorner == 'TR'){
                        startX = x1;
                        startY = y2;
                    }else if(selectedCorner == 'BL'){
                        startX = x2;
                        startY = y1;
                    }else if(selectedCorner == 'BR'){
                        startX = x1;
                        startY = y1;
                    }
                }
                if(newX < startX){
                    // From right to left
                    document.getElementById("mask").style.left = newX+"px";
                    width = startX - newX;
                }else{
                    // From left to right
                    document.getElementById("mask").style.left = startX+"px";
                    width = newX - startX;
                }
                document.getElementById("mask").style.width = width+"px";
                if(newY < startY){
                    // From right to top
                    document.getElementById("mask").style.top = newY+"px";
                    height = startY - newY;
                }else{
                    // From left to bottom
                    document.getElementById("mask").style.top = startY+"px";
                    height = newY - startY;
                }
                document.getElementById("mask").style.height = height+"px";
                return false;
            }
            function endRedimMask(evt){
                isDrawing = false;
                isMoving = false;
                isDrawn = true;
                var obj = document.getElementById("obj");
                var mask = document.getElementById("mask");
                // Positions on the screen
                x1 = parseFloat(mask.style.left);
                x2 = parseFloat(mask.style.width) + x1;
                y1 = parseFloat(mask.style.top);
                y2 = parseFloat(mask.style.height) + y1;
                // Positions on the image
                var realx1 = x1 - minX;
                var realx2 = x2 - minX;
                var realy1 = y1 - minY;
                var realy2 = y2 - minY;
                // Real positions (using the factor)
                document.getElementById("startCropX").value = Math.round(realx1 * factor);
                document.getElementById("startCropY").value = Math.round(realy1 * factor);
                document.getElementById("stopCropX").value = Math.round(realx2 * factor);
                document.getElementById("stopCropY").value = Math.round(realy2 * factor);
            }

            function GetRealOffsetLeft(inOBJ){
                var oObj = inOBJ;
                var iVal = 0;
                while (oObj && oObj.tagName != "BODY") {
                    iVal += oObj.offsetLeft;
                    oObj = oObj.offsetParent;
                }
                return iVal;
            }


            function GetRealOffsetTop(inOBJ){
                var oObj = inOBJ;
                var iVal = 0;
                while (oObj && oObj.tagName != "BODY") {
                    iVal += oObj.offsetTop;
                    oObj = oObj.offsetParent;
                }
                return iVal;
            }
            function prepareDrawing(img){
                init();
                width = img.width;
                height = img.height;
                var xFactor = 1;var yFactor = 1;
                if(maxWidth > 0 && (width > maxWidth)){
                    xFactor = width / maxWidth;
                }
                if(maxHeight > 0 && height > maxHeight){
                    yFactor = height / maxHeight;
                }
                if(xFactor > yFactor){
                    img.width = maxWidth;
                    factor = xFactor;
                }else if(yFactor > xFactor){
                    img.height = maxHeight;
                    factor = yFactor;
                }
                width = width / factor;
                height = height / factor;


                // Now that the image is loaded, we also have to set the minimums
                var offsetLeft = GetRealOffsetLeft(obj);
                var offsetTop = GetRealOffsetTop(obj);
                minX = offsetLeft;
                maxX = offsetLeft + width;
                minY = offsetTop;
                maxY = offsetTop + height;
            }
            //-->
        </script>
    </head>
    <body>
        <img src='test.jpg' name='obj' id='obj' alt="The image" onload="prepareDrawing(this);"/>
        <div id='mask'>
            <div id="tl"></div>
            <div id="tr"></div>
            <div id="bl"></div>
            <div id="br"></div>
        </div>
        <div>
        <input id="startCropX"/>
        <input id="startCropY"/><br />
        <input id="stopCropX"/>
        <input id="stopCropY"/>
        </div>
        <div id="debug"></div>
    </body>
</html>

Et du coup, désolé pour la longueur du commentaire... Et j'espère n'avoir pas oublié des bouts de test...

 Ajouter un commentaire

Nos sponsors


Sondage...

Comparez les prix


Apple iPhone 4 Noir (32 Go)
Entre 1290€ et 1333€

Visiter le guide achat

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 3,822 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)