Forum de discussion
Forum « Programmation Javascript » (archives)
Re: Dessiner un rectangle sur une image
Envoyé: 26 août 2004, 10h26 par jackboy
J'ai trouvé une méthode de dessiner un rectangle sur une image voici le script :
<html>
<head>
<style type='text/css'>
#mask
{
position: absolute;
border: solid 1px #000000;
}
</style>
<!-- **********************************************************-->
<!-- Permettre ici de ne pas afficher les bug explorer -->
<!-- car un erreur est crée lorsque l'usager tente un rectangle-->
<!-- vers le haut et vers la gauche -->
<!-- **********************************************************-->
<SCRIPT LANGUAGE="JavaScript">
function NoError()
{
return true;
}
window.onerror=NoError;
</SCRIPT>
<!--*********************************************-->
<!-- Permettre le dessin d'un rectangle -->
<!--*********************************************-->
<script language="JavaScript" type="text/JavaScript">
<!--
/*****************************/
var curElement = null;
var startPos = new Array(0,0);
/*****************************/
/*
* startDraw : initialise du "drag&drop"
**/
function startDraw(evt)
{
var e = null;
var newX=0;
var newY=0;
// IE
if(document.all)
{
e = window.event;
newX = e.x;
newY = e.y;
curElement = e.srcElement;
}
// Mozilla
else
{
e = evt;
newX = e.clientX;
newY = e.clientY;
curElement = e.currentTarget;
}
// 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";
startPos = new Array(newX, newY);
return false;
}
/*****************************/
/*
* runDraw : "drag&drop" (+/-?)
**/
function runDraw(evt)
{
var e = null;
var newX=0;
var newY=0;
// IE
if(document.all)
{
e = window.event;
newX = e.x;
newY = e.y;
}
// Mozilla
else
{
e = evt;
newX = e.clientX;
newY = e.clientY;
}
// resize du calque
if(curElement!=null)
{
document.getElementById("mask").style.width = newX - startPos[0];
document.getElementById("mask").style.height = newY - startPos[1];
}
return false;
}
/*
* endDraw : fin du drag&drop
**/
function endDraw(evt)
{
curElement = null;
return false;
}
/*
* init : initialise les gestionnaires d'évènements
**/
function init()
{
document.images.obj.onmousedown=startDraw;
document.images.obj.onmousemove=runDraw;
document.images.obj.onmouseup=endDraw;
document.getElementById("mask").onmousemove=runDraw;
document.getElementById("mask").onmouseup=endDraw;
}
/*
* getPosX : retourne la position horizontale de l'objet
**/
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;
}
/*
* getZone : retourne les coordonnées relatives
* à l'image de la zone selectionnée
**/
function getZone( img, mask )
{
var src = document.images[img];
var target = document.getElementById(mask);
/* Ne pas oublier ici que le 420 est la valeur de la hauteur de l'image */
/* donc ont doit les modifiés selon les valeurs de l'image */
var hauteur = (document.getElementById(mask).offsetHeight);
var largeur = (document.getElementById(mask).offsetWidth);
var x1 = (GetRealOffsetLeft(target)-GetRealOffsetLeft(src));
var x2 = (x1 + largeur);
var y2 = (420 - (GetRealOffsetTop(target)-GetRealOffsetTop(src)));
var y1 = (y2 - 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);
}
/*****************************/
window.onload=init;
/*****************************/
//-->
</script>
<!--*********************************************-->
<!-- Fin du dessin d'un rectangle -->
<!--*********************************************-->
</head>
<body>
<img src='test.jpg' name='obj' id='obj' width='520' height='420' border='1'>
<a href='#' onclick="getZone( 'obj', 'mask');">coordonnées</a>
<div id='mask'></div>
</body>
</html>
Réponses
|
![[Photo]](https://www.trucsweb.com/documents/images/2024/js-bs-formulaire-fetch.png)
Formulaire Bootstrap 5 Ajax avec validation.![[Photo]](https://www.trucsweb.com/documents/images/2023/elephants-Salvador_Dali_1948.jpg)
Sécuriser l’accès « bureau à distance » sous IIS![[Photo]](https://www.trucsweb.com/documents/images/2023/trou_noir_galaxie_M87.jpg)
L’AI au temps du Far-Web![[Photo]](https://www.trucsweb.com/documents/images/2023/gilles-villeneuve-montreal1978.jpg)
Sélecteurs JavaScript querySelector() et querySelectorAll()![[Photo]](http://www.trucsweb.com/documents/images/2023/evolution_de_lhomme.jpg)
CSS - Animations![[Photo]](http://www.trucsweb.com/documents/images/2023/univers-copernic.jpg)
Mode de couleurs (Color modes) Bootstrap 5![[Photo]](http://www.trucsweb.com/documents/images/2023/les_burgers_de_papa.jpg)
25 ans des Trucsweb - Bouton hamburger animé Bootstrap 5![[Photo]](http://www.trucsweb.com/documents/images/logos/l_whatwg.svg)
Living Standard pour HTML de Apple, Google, Mozilla, Microsoft ...et la W3C![[Photo]](http://www.trucsweb.com/documents/images/2022/tim-berners-lee-web-b.jpg)
Le nouveau HTML « Living Standard » et le XML![[Photo]](http://www.trucsweb.com/documents/images/2022/v_jacques_dutronc-les_cactus.jpg)
Sécuriser un formulaire de contact au Far-Web!
AbuseIPDB
Connexion