Dibujar rectangulos

[Enea]

Estoy intentado que desde una imagen cogida del pc del usuario se puedan trazar rectángulos encima.
Con php se que existen funciones que lo dibujan a partir de unas coordenadas.
Pretendo guardar esas coordenadas en una base de datos al marcar el usuario el rectangulo, para así luego dibujarlo por medio de esas funciones php.
Mi problema esta en como hacer que al usuario le sea sencillo dibujar ese cuadrado (sin introducir las coordenas a mano)...
Conseguí hacerlo guardando las coordenadas al pulsar el ratón sobre la imagen pero necesito algo más sencillo, lo suyo sería una especie de herramienta de selección, tipo los programas de diseño...
¿Podeis vosotros ayudarme? Con php me han dicho que no se puede hacer...

http://www.forosdelweb.com/showthrea...166#post855166

Muchas gracias de antemano!

[caricatos]

Hola Enea:

Dime si quieres algo parecido a esta página: http://www.pepemolina.com/mapas/index.html

Funciona con rectángulos, circulos y polígonos (lo que se usa en un tag area)...

Si es algo parecido, podré ayudarte.

Saludos

[epplestun]

Buenas Caricatos! jeje

Sigo este post desde que se puso en PHP jeje y bueno, es lo que se busca, lo unico que cuando pulsas el boton y desplazas se deberia de dibujar un rectanglo semitransparente que mostrase el area seleccionada, o un rectangulo con borde ... al estilo que lo la herramienta de Create Image Map de Homesite, o sino como los programas de diseño grafico cuando realizas un selección, por lo cual se deberian de controlar los evento onmousedown de la imagen e ir controlando la posicion del mouse para dibujar el cuadrado o el area deseado .... algo por el estilo jeje

Yo si tengo algo de tiempo ya me lo mirare en casa a ver que se puede lograr, yo estoy haciendo algo parecido pero no en Javascript sino en PHP-GTK .... pero bueno ... las ideas pueden ser parecidas jejeje

[Enea]

Hola !!!

Primero de todos gracias por el interes a todos, la verdad es que sería interesante conseguir algo así...

Caricatos, cuando contaba que había probado dibujarlo guardando las coordenadas al hacer click con el ratón... justamente cogí la idea de esa página que me pasas pero es lo que dice epplestun que sería mucho mejor si se pudiera hacer tipo los programas de diseño, que se pudiera ver el cuadrado a medida que se va haciendo... (Para que al usuario le sea más sencillo, más visual...).

Muchisimas gracias nuevamente por el interés, a ver si podemos sacarlo..

[caricatos]

Hola otra vez:

No estoy seguro, pero creo que la idea original de la página era esa misma, marcar cada una de las áreas creadas, pero también quería que sirviese para los polígonos y los círculos (los 3 tipos de áreas permitidas), y sería entonces muy difícil de implementar (aunque también he desarrollado una librería gráfica que se podría usar, pero daría demasiado peso a la página)...
Creo que sólo para rectángulos, bastaría que tanto la imágen grande como el área seleccionada tuvieran estilos: position absolute (compartiendo la misma capa madre), y ponerle un fondo con filtro (pero no sabría implementarlo para opera) o un borde adecuado...

Los estilos del recuadro se calcularían con las coordenadas que se obtuvieran del script de selección.

Si tienes algo hecho, ponlo para intentar conseguir el efecto...

Saludos

[Enea]

Bueno, algo tengo... pero poquito porque borré lo de antes al solo guardar los valores y no ser gráfico.

Código:

<script language="javascript">
//Inicio el contador a 1
var contador=1;
function Dibujar()
{           //Capturo los puntos donde se encuentra el ratón
	var x=(document.layers)?.pageX:event.x+document.body.scrollLeft;
	var y=(document.layers)?.pageY:event.y+document.body.scrollTop;
	//Si el contador fuera mayor o igual q tres volvería a ponerlo a 1, porque significaría que ya hemos dado dos puntos.
             if (contador >= 3) { contador=1; } 
             
             //El código para dibujar la línea iría aquí.

             //Incremento el contador
	contador++;
}
</script>

Llamo a la función cada vez que pulso sobre la imagen, y mi idea era ir dibujando linea a linea... no sé, tampoco sería eso lo más adecuado, lo suyo sería la herramienta de selección, pero es que no sé por donde cogerlo!!

Lo que has contado ahora no lo he entendido demasiado bien...

Socorro me toy volviendo loca!

Gracias,

[Enea]

Ayudaaaa... Por favorrrrrrrrr :(

[caricatos]

Hola otra vez:

Una chapucilla: http://www.pepemolina.com/mapas/cuadraditos.html

Falla en alguna cosa, pero no he podido descubrirlo...
Espero que te sirva.

Saludos

[epplestun]

Yo tb e estado un ratillo trasteando ahora .... y viendo el code de caricatos y exandole un poco de imaginacion ....

Código PHP:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
 
<html> 
<head> 
<script type="text/javascript"> 
var x1 = 10; var x2 = 0; 
var y1 = 0;  var y2 = 0; 
 
var cuadradito = document.createElement("div"); 
cuadradito.style.position    = "absolute"; 
cuadradito.style.borderWidth = "1px"; 
cuadradito.style.borderStyle = "solid"; 
cuadradito.style.borderColor = "#106fa7"; 
 
var play = 0; 
 
function start() { 
    play = 1; 
} 
 
function stop() { 
    play = 0; 
} 
 
function draw(obj) { 
    if(play) { 
        cuadradito.style.top        = "50px"; 
        cuadradito.style.left       = "10px"; 
        cuadradito.style.width      = x1++; 
        cuadradito.style.height     = y1++; 
        obj.parentNode.appendChild(cuadradito); 
    } else { 
        return false; 
    } 
} 
</script> 
</head> 
 
<body> 
<div id="contenedor" style="position: relative; margin: 0px; padding: 0px"> 
<img src="" style="width: 500px; height: 500px; position: absolute;" onmousedown="start();" onmouseup="stop();" onmousemove="draw(this);"> 
</div> 
 
</body> 
</html>  
  

Lo que sucede es que los datos habria que actualizarlos y solo funciona en Firefox de momento, en IE me da error la linea de IMG .... pero bueno, lo e exo en 1 minuto asi que si se estudia detenidamente ....

Donde se incrementa x1 e y1 habria que ir captando la posicion del mouse y hacer la diferencia y actualizar la capa creada via JS ... de esa manera el rectangulo se adaptaria a la posicion del mouse.

[Enea]

He estado probando ahora y parece que algo me ha salido por lo menos en IE

Código:

<html>
<head>
<script language="javascript" type="text/javascript" >
	var coordenadas = new Array();
	var contador = 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";
	}

	function lee(capa)	{

		coordenadas[contador ++] = (document.layers)? e.pageX:event.x+document.body.scrollLeft;
		coordenadas[contador ++] = (document.layers)? e.pageY:event.y+document.body.scrollTop;

			if (contador % 4 == 0)	{
			x1 = coordenadas[contador - 4];
			x2 = coordenadas[contador - 2];

			y1 = coordenadas[contador - 3];
			y2 = coordenadas[contador - 1];
			
			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 = "blue";
			capa.parentNode.appendChild(cuadradito);
		}
	}
</script>

</head>
<body style="position: relative; margin: 0px;">
<div id=contenedor style="position: relative; margin: 0px; padding: 0px" >
<img galleryimg="no" src="logo.jpg" style="position: absolute; top: 0px; left: 0px; cursor: crosshair; padding: 0px" onclick="lee(this)" />
</div>
</body>
</html>

Podeis probar si funciona en otros navegadores?

[caricatos]

Hola otra vez:

Enea: Probé el código con mozilla, y no va bien, ya que se cuela en la definición para explorer, ya que no soporta los "layers".

Si quieres puedes bajarte el fichero que yo uso para las coordenadas del ratón: http://www.pepemolina.com/mapas/ratita.js Solo tienes que enlazarlo en el head y las posiciones se averiguan con ratitaX() y ratitaY() (como se puede ver en mi ejemplo.

Voy a ver el ejemplo de epplestun, y si encuentro alguna mejora te cuento.

Saludos

[Enea]

Gracias a todos de verdad

[epplestun]

Haciendo un poquito mas el tonto jeje he metido este code

Código PHP:

  <html> 
<head> 
<script language="javascript" type="text/javascript" > 
    var coordenadas = new Array(); 
    var contador = 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 ratitaX()    { 
        return _coorX; 
    } 
     
    function ratitaY()    { 
        return _coorY; 
    } 
 
    function lee(e)    { 
        coordenadas[contador ++] = ratitaX(); 
        coordenadas[contador ++] = ratitaY(); 
 
        if (contador % 4 == 0)    { 
            x1 = coordenadas[contador - 4]; 
            x2 = coordenadas[contador - 2]; 
 
            y1 = coordenadas[contador - 3]; 
            y2 = coordenadas[contador - 1]; 
             
            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"; 
             
            fondo = document.createElement("div"); 
            fondo.style.width  = dife(x1, x2); 
            fondo.style.height = dife(y1, y2); 
            fondo.style.position = "absolute"; 
            fondo.style.backgroundColor = "#808080"; 
 
            if(document.all) { 
                fondo.style.filter = "alpha(opacity: 30)"; 
            } else { 
                fondo.style.MozOpacity = "0.3"; 
            } 
                         
            cuadradito.appendChild(fondo); 
             
            document.getElementById("capa").parentNode.appendChild(cuadradito); 
        } 
    } 
</script> 
 
</head> 
<body style="position: relative; margin: 0px;"> 
<div id=contenedor style="position: relative; margin: 0px; padding: 0px" > 
<img src="hugesize.jpg" id="capa" style="position: absolute; top: 0px; left: 0px; cursor: crosshair; padding: 0px" onclick="lee()" /> 
</div> 
</body> 
</html>  
  

Eso ya te hace el efecto de alpha jajaja, como salga esto me voy a reir mucho jajajaj

[Enea]

En IE funciona muy bien epplestun, que bien queda con el efectillo y todo :)
Habría que mirar en otros navegadores... a ver que tal.
Ahora yo estoy dandole vueltas a enlazar todas las partes el subir la imagen, en guardar el marco creado en la base de datos y el mostrarla definitivamente con php según los puntos guardados...
A ver, si lo conseguimos y subiré todos los archivos para que veas el funcionamiento, a mi me parece un ejecicio muy interesante y útil.
Gracias nuevamente.

[caricatos]

Hola otra vez:

Perfecto en mozilla y explorer, pero el filtro no va en opera:

Sería cuestión de cambiar el backgroundColor cuando no es opera ya que todo lo demás se ve bien...

Por cierto, en la página que subí originalmente había un error en la etiqueta style del body, ya está arreglada y se ve perfectamente.

Por cierto epplestun, creo que no es necesario crear una nueva capa para poner el filtro...

Con el script original y unos retoque quedaría:

Código:

function lee(capa)	{
	coordenadas[contador ++] = ratitaX();
	coordenadas[contador ++] = ratitaY();
	if (contador % 4 == 0)	{
		x1 = coordenadas[contador - 4];
		x2 = coordenadas[contador - 2];

		y1 = coordenadas[contador - 3];
		y2 = coordenadas[contador - 1];

		cuadradito = document.createElement("div");
		with (cuadradito)	{
			style.left = menor(x1, x2);
			style.top = menor(y1, y2);
			style.width = dife(x1, x2);
			style.height = dife(y1, y2);

			style.position = "absolute";
			style.borderWidth = "1px";
			style.borderStyle = "solid";
			style.borderColor = "blue";
			style.backgroundColor = "gray";
			if (document.all)
				style.filter = "alpha(opacity: 30)";
			else
				style.MozOpacity = "0.3";
		}
		capa.parentNode.appendChild(cuadradito);
	}
}

Yo use el gris, pero creo que no tiene importancia.

Saludos

[epplestun]

ummmmmm si no creas otra capa, el efecto de alpha tb lo realiza sobre el borde, si quieres que el borde sea de un color solido y el fondo sea el que contegna el efecto de alpha es necesario crearlo ... o eso creo jeje

[eContento]

Hola,

Otra forma que se me ocurre a mi es usar la librería gráfica de walter Zorn para dibujar el rectángulo, y con un setTimeout redibujarlo en función de cuál es la posición del ratón.

http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm

[furoya]

Hola Enea , caricatos , epplestun , eContento :

Una humilde idea : se puede usar el evento mousemove para ir cambiando la vista del tamaño del rectángulo en "tiempo real" hasta que el segundo click fije las medidas.

saludos

furoya

[caricatos]

Hola otra vez:

epplestun: Tienes razón, no me había dado cuenta de la intención

eContento: Yo también implementé una librería gráfica que presenté en estos foros hace tiempo (ha llovido) y puedes ver un ejemplo en este otro enlace: http://www.pepemolina.com/efectos/reloj.html
Curiosamente no conocía esa librería, y parece bastante buena... cuando tenga algo de tiempo, trataré de verla más detenidamente...
El problema de ese tipo de librerías es que ralentiza mucho la carga de la página... Justamente había pensado usar mi librería en el proyecto original, pero pasó el tiempo y ... bla, bla...

furoya: ¡Cómo estás... hace tiempo que no coincidimos!... Puede ser buena idea (al menos se podría parecer a una aplicación gráfica)... En la página de postales: http://www.pepemolina.com/postales/ hay algo como dices, pero me parece que en mozilla no termina de funcionar bien...
Te invito a que lo hagas (o intentes hacer)... y si sale bien, trataré de adaptarlo al tema de las postales (y por supuesto te incluiría en los créditos)

Saludos

[caricatos]

Hola de nuevo

Me fijé en el enlace de la pregunta hecha en php, y pienso que se podrían crear imágenes con php con fondo transparente (tipo png por ejemplo), y se podrían incrustar de la misma manera que se incrustan estas capas, pero en vez de usar tags div, usar un tag img, y el src fuese algo de esta manera: "rectangulo.php?ancho=100&alto?100"... Con las librerías GD no creo que sea difícil (yo las uso para hacer las miniaturas en mi galería de imágenes... hay un mensaje activo sobre ese tema...) Incluso creo que sería relativamente fácil crear los otro tipos de áreas (círculos y polígonos)...

Y ese tipo de gráfico pienso que se le podría dar también opacidad, y funcionaría en opera (aunque no me quita el sueño si algo mío no funciona en ese navegador... )

Saludos

[caricatos]

Hola re-de-nuevo ...

Dicho y hecho.

Con php y las librerías GD, generé unos recortes de la imagen principal...
En el primer enlace que puse se puede ver el resultado: http://www.pepemolina.com/mapas/cuadraditos.html
También mejoré un poco la presentación en este sitio: http://www.pepemolina.com/mapas/partes.html, aunqueen explorer falla cuando hay scroll... el problema es que no creo que deba usar document.all para mejorarlo, porque en opera se ve perfectamente aunque se haga scroll y también soporta document.all... Bueno, ya veremos...

Saludos

[furoya]

Hola todos :

Iniciado por caricatos en el mensaje 858723

...me parece que en mozilla no termina de funcionar bien...
Te invito a que lo hagas ... te incluiría en los créditos ...

caricatos : entré a la página de las postales, y en Internet Explorer 6 se ve bien -sí, era lo que había pergeñado-. Si puedo hacer algo va a ser para el mismo navegador (no conozco de Mozilla ni de otro), así que sería inútil mejorar lo que ya funciona.

Por otro lado, lo de los créditos te lo agradezco mucho, pero si alguna vez quieres usar un código que he posteado basta con que me avises para ponerme feliz. No es necesaria la inclusión de mi nombre. Además, si lo puse yo, seguro que es robado.

saludos

furoya

[caricatos]

Hola otra vez:

furoya: Seguro que hay más de un script tuyo en la página de los colores... ... que por cierto, ya mejoré el tema de las barras de desplazamiento que puedes ver en este enlace: http://www.pepemolina.com/barras/ aunque todavía no lo pude adaptar a la página en cuestión... pero todo se andará.

Sobre este mensaje, para conseguir que funcione bien en los 3 navegadores que uso, tuve que hacer una rara "triquiñuela" (o manganeta), poniendo la imagen y el script de selección de coordenadas en una página distinta dentro de un iframe en la página principal, y en ésta solo dejé los recortes...
Se puede ver en este enlace: http://www.pepemolina.com/mapas/recortes.html
Que espero que se vea bien.

Saludos

[Enea]

Que bueno caricatos!

Yo con la solución de las capas me conformaba... pero veo que habeis seguido mejorando y me parece muy interesante.
Solo quedaría lo que comentaba furoya, voy a investigar sobre el tema... :)

[caricatos]

El script de los recuadros lo inserté en el mensaje que abriste antes en php (supongo que puede ser útil), pero está preparado para imágenes png, creo que debería ser fácil adaptarlo también para las imágenes jpg.

Sobre lo de furoya (¡Hola !) dime si te sirve algo del enlace que puse anteriormente (sobre las postales), y te paso el script que sea. (En realidad, esa página es de otros participantes de los foros como JavierB, KarlanKas, tunait... -la madrina de la página-)... Si haces una búsqueda con la palabra postales, seguro que encontrarás el tema... tuvo mucha participación.

Tengo curiosidad sobre lo que quieres hacer (si quieres contarlo)...

Saludos

[furoya]

Hola otra vez :

No sé qué opinaras tú, Enea,pero es muy interesante ver cómo evolucionan los temas publicados. Se comienza con el dibujo e un rectángulo y se termina (¿se termina?) con recortes de imágenes; pasando por botones deslizantes.

Quisiera hacer un par de comentarios sobre estos dos últimos y antes de que se siga avanzando y quede un poco anacrónico, caricatos -después de tus códigos y los de epplestun, no creo que pueda agregar nada al tema de los rectángulos-.

Todavía estoy tratando de cerrar la boca luego de ver la página de recortes. No sabía que en PHP se podían "generar" partes de imágenes y hasta guardarlas en disco. ¿Es sólo para .PNG? ¿Se puedes hacer círculos, elipses o formas poligonales?. Ésto resolvería un problema que plantearon en Aplicar filtro o similar sobre un elemento SHAPE de una imagen y que estuve tratando de llevar adelante con algunas chapucerías propias del que no sabe cómo salir dignamente del embrollo en que se metió.

Lo de las slide-bars no tiene que ver con el código y no sabía si comentarlo o no; pero sigo sin poder arrastrar el botón a gusto. Y es por la misma causa que me impidió ver hasta hace muy poco tu reloj hecho con "pixelización". Si la máquina no es lo bastante poderosa como para lograr que el botón siga la velocidad del puntero, aquel se escapa y en el arrastre termino "pintando" el documento.
Como dije más arriba, no es problema del código. Ésto pasa siempre que se intenta arrastrar objetos en máquinas lentas. Seguramente se puede mejorar la performance, pero no creo que tenga una solución definitiva y universal. Aunque no sería la primera vez que consigues algo de eso que "no se puede".

saludos

furoya

[caricatos]

Hola furoya:

Las posibilidades gráficas de php son muy grandes, y me parece que todas las respuestas serían afirmativas, pero en verdad es un lenguaje en el que no incursiono mucho.
Tiene soporte para ficheros jpg (las miniaturas de mi galería de imágenes las genero con php, y me ahorro muchísimo espacio del servidor), y también pueden crearse polígonos y círculos (óvalos)... http://es2.php.net/image

Lo de hacer los shapes en javascript, ya hice algo en la página de mapas (creo que está referida al principio de este mensaje) aunque no es más que una chapucilla.

Saludos