Dessiner un rectangle sur une image

Soyez le premier à donner votre avis sur cette source.

Vue 19 550 fois - Téléchargée 1 809 fois

Description

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...

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Messages postés
180
Date d'inscription
dimanche 29 juin 2003
Statut
Membre
Dernière intervention
8 septembre 2006

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>


























</html>

Et du coup, désolé pour la longueur du commentaire... Et j'espère n'avoir pas oublié des bouts de test...
Messages postés
17
Date d'inscription
lundi 21 janvier 2008
Statut
Membre
Dernière intervention
12 novembre 2009

vote
Messages postés
17
Date d'inscription
lundi 21 janvier 2008
Statut
Membre
Dernière intervention
12 novembre 2009

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.
Messages postés
487
Date d'inscription
dimanche 5 octobre 2003
Statut
Membre
Dernière intervention
1 septembre 2011

J'avais pas noté... c'est fait
Messages postés
487
Date d'inscription
dimanche 5 octobre 2003
Statut
Membre
Dernière intervention
1 septembre 2011

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;
}
Afficher les 9 commentaires

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.