Citando a Sorancio

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

Pero el usuario tendria la sensacion de manipular la imagen??
Y cuando decias cada linea, te referias a las de colores, cierto??

Por cada evento del ratón manejado, PHP enviará una nueva imagen, así que dará esa sensación de movimiento y modificación.

Y sí, me refiero a las de color.

Creo que entiendo tu planteamiento, tratare de ponerlo en practica
y te aviso, muchas gracias por tu ayuda.

Puedo preguntarte si tengo alguna duda mientras lo voy
haciendo??
-----------------------------------------------------------------
Igual nuevas soluciones son bien recibidas.

Claro, para eso estamos por aquí

Aun no he podido hacer nada, busque sobre el Canvas, pero
creo que no he sabido como sacarle el provecho para lo que
necesito... Estoy ya preocupado pues debo entregarlo lo mas
pronto posible; espero alguien me pueda ayudar.

Muchas Gracias de antemano  y disculpen la molestia.

Si no te atreves a usar mi sistema, puedes hacer dos cosas.

1) Una aplicación Flash
2) Una aplicación Java

Te recomiendo la primera, Java es una basura.

El hecho es que hacerlo de mi manera es que la mayoría de ciclos los usa el servidor, manteniendo el cliente estable. Nadie quiere que el navegador le gaste el 20% de la CPU.

Explicame las dudas sobre mi método y te lo explico como mejor pueda.

Citando a Sorancio

Explicame las dudas sobre mi método y te lo explico como mejor pueda.

Te dire lo que entiendo y lo que no.

El codigo php que pones es para crear la imagen, cierto??

Que tipo de objeto recibe el .js??
Lo que recibo del .php es lo que meto en el div??
Por otro lado, creo que para usar el evento drag debo tener
un objeto con una posicion fija, entonces,
lo que movere sera el div??

Creo que no entiendo muy bien como hacerlo.

Ah! y Java o Flash, pues de Java huyo y Flash pues me suena
un poco, aunque no se mucho de eso, alguien me dijo que era
facil, pero no quiero entrar a molestar por los plug-in y ese cuento.

Con lo que yo he entendido, la imagen que tienes fija deberás hacerle un mapa de imagen HTML (en el curso de HTML de esta página tienes la explicación). Si utilizas Linux, te recomiendo instalar KImageMapEditor el cual te simplificará enormemente el trabajo.

Teniendo el mapa, los enlaces serán a una función Javascript:

Código Fuente JS:

function hizoClick(punto) {

  /* Mandas la información al PHP por ajax */

}


Código Fuente HTML:

<area shape="rect" coords="x,x,x,x" href="#" onclick="hiceClick(1);">


Y en el php ya tratarías la imagen base para meterle la línea como quieras.

Otra opción es hacerlo todo por javascript con canvas (si miras el foro de Javascript verás un post que dice "El poder de Javascript no tiene límites". Ahí verás que con canvas de html5 y javascript puedes tratar una imagen plana como si fuese 3D, y por tanto podrías girar tu línea roja hacia donde quisieras.

Es cuestión de estudiar qué opción es más viable.

El código PHP sí, crea una imagen de formato PNG con una línea que tiene el inicio en (0,0) y el final en (x,y), donde x e y son las coordenadas recibidas desde JavaScript.

Recibes bytes crudos que si no recuerdo mal, debes de ponerlos en un objeto Image.

De PHP recibes la imagen, tu haces con ella lo que quieras.

Y Flash es fácil (yo he estado obligado a aprender algunas cosas en el instituto).

Hice algo parecido a lo que necesito con el Canvas de HTML5,
pero tengo un pequeño problema, pues la imagen se dibuja
despues de donde le digo que lo haga.

Código Fuente:

document.onmousemove=function(){
var elEvento = arguments[0];
var CordX=elEvento.clientX;
var CordY=elEvento.clientY;
.
.
.
dibujaLn(iniXZ, iniYZ, finXZ, finYZ,1,0,0);
dibujaLn(finXR, finYR, iniXR, iniYR,2,1000,500);
.
.
.
ctx.strokeStyle = colorLn;
ctx.lineWidth = 2;
ctx.beginPath();
ctx.moveTo(n1,n2);
ctx.lineTo(nX,nY);
ctx.lineTo(fX,fY);
ctx.stroke();
ctx.clearRect(0,0,180,523);//Borra linea inicial
ctx.clearRect(865,1,180,523);


La primera parte deberia capturar las posiciones, pero
lo hace un poco retardado, pues dibuja la linea en el inicio
del segundo arrastre.
La segunda parte invoca la funcion para dibujar y la tercera
dibuja la linea.

Por cierto lo que muevo son unos pequeños div

Código Fuente:


<div class="box" onmousedown="dragStart(event); movio(this.id);" id=ext1></div>