Hola, necesito algo muy muy urgente.
He buscado mucho, pero no he encontrado una manera sencilla
de hacer lo siguiente:

Tengo una imagen con 4 lineas verticales que son fijas, estas
lineas estan en una imagen(.jpg), pero ademas tengo 2 lineas
moviles (roja, azul), entonces necesito que los extremos de
las lineas se muevan sobre las lineas verticales, asi:
Linea Roja: 1 y 3
Linea Azul: 2 y 4

Dejo una imagen y me dicen si fui claro.
Espero respuesta y realmente agradezco mucho cualquier ayuda.
Gracias.



Imagen

y qué problema tienes en concreto?

Parece que simplemente tengas que recorrer los puntos inicial y final de las líneas verticales e ir redibujando las líneas rojas/azul variando su componente y, sumando 1 en cada iteracion del bucle.

Creo que si es lo que dices, solo necesito mover los
extremos de las lineas de colores sobre los ejes verticales,
pero no tengo ni idea de como hacerlo.

No entiendo muy bien qué quieres.
Sí sé lo que quieres, pero no entiendo en qué lenguaje lo pretendes hacer ni con qué librerías.
Si pudieras explicarte te lo agradeceríamos y seguro que obtendrías más ayuda.

Saludos.

Si, perdon por no dar mas informacion.

Pues lo necesito para una aplicacion en la web asi
que creo que la mejor opcion es javascript con css, para
manejar los eventos del mouse y la ubicacion y dimension
de las lineas.

Igual espero sugerencias.

Creo que lo mejor es que utilices canvas de html5 y controles con javascript. Para guardar una imagen que necesites tienes la librería de tratamiento de imágenes de php.

Saludos.

Citando a CHuLoYo

Creo que lo mejor es que utilices canvas de html5 y controles con javascript. Para guardar una imagen que necesites tienes la librería de tratamiento de imágenes de php.
Saludos.

Pues la imagen no necesito guardarla, solo necesito que las dos lineas
puedan ser manipuladas por el usuario, y habia pensado que podia
hacer un div donde solo se pudiera ver la linea inferior o superior,
pero no se como mantener uno de los extremos fijo mientras el
otro se mueve.

Por otro lado no se mucho del Canvas de HTML5, es dificil??
Y me serviria para lo que quiero??

He estado leyendo del Canvas de HTML5, aun tengo dudas respecto
al hecho de mantener un extremo fijo, seguire buscando y les
informo, igual espero cualquier tipo de informacion que me sea
de utilidad.
Gracias.

Voy a opinar aunque no se si funcionará, esto ya lo dirá CHuLoYo. Lo que se me ocurre es que cada línea sea una capa fija en un índice mayor (con z-index) y una posición absoluta. Al clicar, un evento se llama y javascript verifica si la posición es correcta, entonces envía la posición donde se ha clicado a PHP, y este procesa una nueva imagen que envía al navegador. La relación JS/PHP se haría con AJAX.

Para dibujar la línea, yo lo haría así, no lo he probado así que no se si funcionará, ya depurarás si hay algún problema:

Código Fuente:

<?php
define("X_START", 0);
define("Y_START", 0);

$x = $_POST["x"]; // por post | $x es la posición donde se ha clicado, válida
$y = $_POST["y"];

$width = abs($x - X_START);
$height = abs($y - Y_START);

$image = imagecreate($width, $height);
$alpha = imagecolorallocate($image, 0, 255, 255); // el cian será el color transparente
$color = imagecolorallocate($image, 255, 0, 0); // rojo será el color de la línea

imagecolortransparent($image, $alpha);
imagefill($image, 0, 0, $alpha); // creamos todo transparente
imageline($image, X_START, Y_START, $x, $y, $color);
imagepng($image);
imagedestroy($image);

?>


Yo en un rato lo pruebo a ver.

Citando a Sorancio

Voy a opinar aunque no se si funcionará, esto ya lo dirá CHuLoYo. Lo que se me ocurre es que cada línea sea una capa fija ...

Eso quiere decir que dibujaria una nueva linea con las coordenadas
que le envia el .js al .php con cada evento del mouse??

Así es, PHP te devolvería la imagen, tu simplemente debes de mostrarla.