Hacer una selección dibujando un rectángulo con el ratón

mikeltb · #1 (**permalink**) 18/02/2008, 03:13

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.appendC hild(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.

caricatos · #2 (**permalink**) 18/02/2008, 03:24

Hola:

La "opuesta" a appendChild() es removeChild()... si quieres borrar el primer div que hay en "capa", sería:

laCapa = document.getElementById("capa");
cuadradito = lacapa.getElementsByTagName("DIV")[0];
laCapa.removeChild(cuadradito);

Pero me parece que quieres hacer algo bastante complejo para los conocimientos que pareces tener (de todos modos puedes intentarlo

)

Si tienes problemas no dudes en consultar.

Saludos

mikeltb · #3 (**permalink**) 18/02/2008, 03:45

Gracias Caricatos,
voy a intentarlo.
Sí, la verdad es que estoy muy verde en esto. Es por trabajo lo que estoy intentando desarrollar ya que se trata de una aplicación en delphi que tengo que pasarla a entorno web.
Se trata de un formulario donde se presenta un plano de la plataforma compuesto por 300 PCs donde puedo encender y apagar los equipos de forma remota de uno en uno o seleccionando varios PCs. De aquí la duda de realizar el rectangulo para realizar la selección.
No sé como lo voy a hacer pero tengo que intentarlo.

Un saludo.

mikeltb · #4 (**permalink**) 18/02/2008, 04:08

Cita:

Iniciado por caricatos

Hola:

La "opuesta" a appendChild() es removeChild()... si quieres borrar el primer div que hay en "capa", sería:

laCapa = document.getElementById("capa");
cuadradito = lacapa.getElementsByTagName("DIV")[0];
laCapa.removeChild(cuadradito);

Pero me parece que quieres hacer algo bastante complejo para los conocimientos que pareces tener (de todos modos puedes intentarlo

)

Si tienes problemas no dudes en consultar.

Saludos

No lo entiendo, me dice que <<lacapa>> no está definido, he sustituido el código que me indicas pero me sigue saliendo el mismo error:

var laCapa = document.getElementById("capa");
cuadradito = lacapa.getElementsByTagName("div")[0];
laCapa.removeChild(cuadradito);

mikeltb · #5 (**permalink**) 18/02/2008, 04:13

Vale, ya he dado con ello:

laCapa = document.getElementById("capa");
cuadradito = lacapa.getElementsByTagName("DIV")[0];

mikeltb · #6 (**permalink**) 18/02/2008, 04:18

El error que me da en la siguiente línea:

if (movimiento>1) {

laCapa = document.getElementById("capa");
cuadradito = laCapa.getElementsByTagName("DIV")[0];
laCapa.removeChild(cuadradito);

Error Tipo incorrecto.

mikeltb · #7 (**permalink**) 18/02/2008, 09:15

Bueno, al final lo he solucionado, de otra forma pero también me vale.

Quiero agradecer a Enea por su código y a Caricatos por su ayuda.

Ahi va el código:

<%@ 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 content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
<meta content="Visual Basic .NET 7.1" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">

<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==2) {
x1=0;
x2=0;
y1=0;
y2=0;
dibuja=0;
cuadradito.style.left [/CENTER]

= menor(x1, x2);
cuadradito.style.top = menor(y1, y2);
cuadradito.style.width = dife(x1, x2);
cuadradito.style.height = dife(y1, y2);

}

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) {

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

}
else {
cuadradito = document.createElement("div");
document.getElementById("capa").parentNode.appendC hild(cuadradito);
}
}
}

function coordenadas_de_inicio(e) {

if (dibuja==0) {
coordenadas[1] = mouseX();
coordenadas[2] = mouseY();
dibuja=1;
}
else{
dibuja=2;
dibuja_seleccion();
}
}

</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 onmousemove="dibuja_seleccion()" onmousedown="coordenadas_de_inicio()" id="capa"
style="PADDING-RIGHT: 0px; PADDING-LEFT: 350px; PADDING-BOTTOM: 0px; CURSOR: crosshair; PADDING-TOP: 0px"
height="500" src="Plano centro.jpg" width="500">

</div>

</body>
</HTML>[/LEFT]