Foros del Web » Programando para Internet » Javascript »

pintar ruta con Canvas en una imagen.png al seleccionar un enlace

Estas en el tema de pintar ruta con Canvas en una imagen.png al seleccionar un enlace en el foro de Javascript en Foros del Web. Hola. Tengo un mapa de una ciudad en .png y he trazado una ruta de color con canvas. (pero la ruta es estatica)y tengo una ...
  #1 (permalink)  
Antiguo 05/07/2017, 20:30
 
Fecha de Ingreso: enero-2010
Ubicación: Colombia
Mensajes: 238
Antigüedad: 14 años, 10 meses
Puntos: 2
pintar ruta con Canvas en una imagen.png al seleccionar un enlace

Hola. Tengo un mapa de una ciudad en .png y he trazado una ruta de color con canvas. (pero la ruta es estatica)y tengo una tabla al lado de la imagen donde estan escritas las calles y carreras de la ciudad del mapa.
Lo que me piden hacer es que cuando seleccione con el mouse la calle o carrera de la tabla se refleje la ruta pintada de esa calle o carrera en la imagen del mapa. Por ahora la ruta pintada siempre aparece en el mapa ya que estoy probando como funciona el canvas, pero la idea es que ninguna ruta se pinte en el mapa hasta que el usuario seleccione la ruta de la tabla y que cuando seleccione otra ruta de la tabla ya no aparezca pintada en el mapa la ruta que seleccionaron antes.
Dejo el codigo para poder explicarme mejor:
  #2 (permalink)  
Antiguo 05/07/2017, 20:31
 
Fecha de Ingreso: enero-2010
Ubicación: Colombia
Mensajes: 238
Antigüedad: 14 años, 10 meses
Puntos: 2
Respuesta: pintar ruta con Canvas en una imagen.png al seleccionar un enlace

<img src = "girardo1.png" />
<canvas id="micanvas1" width = "972" height = "637"></canvas>
<script type="text/javascript">
var c = document.getElementById("micanvas1");
var cxt = c.getContext("2d");
cxt.beginPath();
cxt.lineWidth = 3;
cxt.strokeStyle = "#2E64FE";
cxt.moveTo(304,153);
cxt.lineTo(460,211);
cxt.moveTo(460,211);
cxt.lineTo(505,270);
cxt.moveTo(505,270);
cxt.lineTo(505,295);
cxt.moveTo(505,295);
cxt.lineTo(425,339);
cxt.closePath();
cxt.stroke();
</script>
<table border="1" align="right" width="300">
<tr><th>RUTAS</th></tr>
<tr><td><a href="#">Calle 30</a></td></tr>
<tr><td><a href="#">Carrera 7</a></td></tr>
<tr><td><a href="#">Calle 19</a></td></tr>
</table>
</body>
</html>[/HIGHLIGHT]
  #3 (permalink)  
Antiguo 05/07/2017, 20:33
 
Fecha de Ingreso: enero-2010
Ubicación: Colombia
Mensajes: 238
Antigüedad: 14 años, 10 meses
Puntos: 2
Respuesta: pintar ruta con Canvas en una imagen.png al seleccionar un enlace

http://subefotos.com/ver/?0b56b02621...8ea01b5c6o.png

Por favor su ayuda.. ¿cual funcion de javascript o algo asi me puede ayudar hacer lo que quiero?. Gracias
  #4 (permalink)  
Antiguo 06/07/2017, 02:18
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años, 7 meses
Puntos: 1284
Respuesta: pintar ruta con Canvas en una imagen.png al seleccionar un enlace

Hola:

No sé con canvas, pero supongo que será parecido a SVG... Tengo una página que marca los bordes de polígonos: SVG: Dibujando mapas.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo

Etiquetas: canvas, enlace, funcion, pintar, ruta
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 00:20.