Dibujar Rectangulo con el ratón
Publicado por Mikel (1 intervención) el 13/02/2008 16:25:45
Hola,
Soy nuevo en esto, y me esta resultando un mundo dar pasos en este mundo de JavaScript.
El siguiente código dibuja un rectangulo sobre una imagen a la vez que muevo el ratón, el problema se me presenta en que no soy capaz de borrar el rectangulo del movimiento anterior del ratón dibujando tantos rectangulos como veces he movido el ratón.
El código es el siguiente:
<%@ Page Language="vb" AutoEventWireup="false" Codebehind="WebForm1.aspx.vb" Inherits="WebApplication3.WebForm1"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<title>WebForm1</title>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" content="Visual Basic .NET 7.1">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<script language="JavaScript">
var coordenadas = new Array();
var contador = 0;
var dibuja=0;
var movimiento=0;
function menor(a, b) {
var dato = (a < b) ? a : b;
return "" + dato + "px";
}
function dife(a, b) {
var dato = (a < b) ? b - a : a - b;
return "" + dato + "px";
}
var _ns4 = (document.layers) ? true : false;
var _ie = (document.all) ? true : false;
var _ns6 = (document.getElementById && !_ie) ? true : false;
var _coorX, _coorY;
if (_ns6) document.addEventListener("mousemove", mouseMove, true);
if (_ns4) {document.captureEvents(Event.MOUSEMOVE); document.mousemove = mouseMove;}
if (_ie) document.onmousemove = mouseMove;
function mouseMove(e)
{
if (_ns4||_ns6) {_coorX = e.pageX; _coorY = e.pageY;}
if (_ie) {_coorX = event.x; _coorY = event.y;}
return true;
}
function mouseX() {
return _coorX;
}
function mouseY() {
return _coorY;
}
function dibuja_seleccion(e) {
if (dibuja==1) {
movimiento= ++ movimiento;
coordenadas[3] = mouseX();
coordenadas[4] = mouseY();
x1 = coordenadas[1];
x2 = coordenadas[3];
y1 = coordenadas[2];
y2 = coordenadas[4];
if (movimiento>1) {
document.getElementById("capa");
cuadradito = document.createElement("div");
cuadradito.style.left = menor(x1, x2);
cuadradito.style.top = menor(y1, y2);
cuadradito.style.width = dife(x1, x2);
cuadradito.style.height = dife(y1, y2);
cuadradito.style.position = "absolute";
cuadradito.style.borderWidth = "1px";
cuadradito.style.borderStyle = "solid";
cuadradito.style.borderColor = "#808080";
document.getElementById("capa").parentNode.appendChild(cuadradito);
}
}
}
function coordenadas_de_inicio(e) {
if (dibuja==0) {
coordenadas[1] = mouseX();
coordenadas[2] = mouseY();
dibuja=1;} else dibuja=0;
}
</script>
</HEAD>
<body style="MARGIN: 0px; POSITION: relative">
<div id="contenedor" style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; POSITION: relative">
<img src="Plano centro.jpg" id="capa" style="PADDING-RIGHT: 0px; PADDING-LEFT: 350px; PADDING-BOTTOM: 0px; CURSOR: crosshair; PADDING-TOP: 0px"
onclick="coordenadas_de_inicio()" onmousemove="dibuja_seleccion()" height="500" width="500">
</div>
</body>
</HTML>
Gracias de antemano.
Soy nuevo en esto, y me esta resultando un mundo dar pasos en este mundo de JavaScript.
El siguiente código dibuja un rectangulo sobre una imagen a la vez que muevo el ratón, el problema se me presenta en que no soy capaz de borrar el rectangulo del movimiento anterior del ratón dibujando tantos rectangulos como veces he movido el ratón.
El código es el siguiente:
<%@ Page Language="vb" AutoEventWireup="false" Codebehind="WebForm1.aspx.vb" Inherits="WebApplication3.WebForm1"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<title>WebForm1</title>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" content="Visual Basic .NET 7.1">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<script language="JavaScript">
var coordenadas = new Array();
var contador = 0;
var dibuja=0;
var movimiento=0;
function menor(a, b) {
var dato = (a < b) ? a : b;
return "" + dato + "px";
}
function dife(a, b) {
var dato = (a < b) ? b - a : a - b;
return "" + dato + "px";
}
var _ns4 = (document.layers) ? true : false;
var _ie = (document.all) ? true : false;
var _ns6 = (document.getElementById && !_ie) ? true : false;
var _coorX, _coorY;
if (_ns6) document.addEventListener("mousemove", mouseMove, true);
if (_ns4) {document.captureEvents(Event.MOUSEMOVE); document.mousemove = mouseMove;}
if (_ie) document.onmousemove = mouseMove;
function mouseMove(e)
{
if (_ns4||_ns6) {_coorX = e.pageX; _coorY = e.pageY;}
if (_ie) {_coorX = event.x; _coorY = event.y;}
return true;
}
function mouseX() {
return _coorX;
}
function mouseY() {
return _coorY;
}
function dibuja_seleccion(e) {
if (dibuja==1) {
movimiento= ++ movimiento;
coordenadas[3] = mouseX();
coordenadas[4] = mouseY();
x1 = coordenadas[1];
x2 = coordenadas[3];
y1 = coordenadas[2];
y2 = coordenadas[4];
if (movimiento>1) {
document.getElementById("capa");
cuadradito = document.createElement("div");
cuadradito.style.left = menor(x1, x2);
cuadradito.style.top = menor(y1, y2);
cuadradito.style.width = dife(x1, x2);
cuadradito.style.height = dife(y1, y2);
cuadradito.style.position = "absolute";
cuadradito.style.borderWidth = "1px";
cuadradito.style.borderStyle = "solid";
cuadradito.style.borderColor = "#808080";
document.getElementById("capa").parentNode.appendChild(cuadradito);
}
}
}
function coordenadas_de_inicio(e) {
if (dibuja==0) {
coordenadas[1] = mouseX();
coordenadas[2] = mouseY();
dibuja=1;} else dibuja=0;
}
</script>
</HEAD>
<body style="MARGIN: 0px; POSITION: relative">
<div id="contenedor" style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; POSITION: relative">
<img src="Plano centro.jpg" id="capa" style="PADDING-RIGHT: 0px; PADDING-LEFT: 350px; PADDING-BOTTOM: 0px; CURSOR: crosshair; PADDING-TOP: 0px"
onclick="coordenadas_de_inicio()" onmousemove="dibuja_seleccion()" height="500" width="500">
</div>
</body>
</HTML>
Gracias de antemano.
Valora esta pregunta
0