Dibujar js
¿Se puede dibujar una linea con javascript? Con coordenadas o algo igual se puede pero no se hacerlo.
2 Respuestas
Respuesta de bobbin
1
No se pueden dibujar líneas directamente, aunque se pueden simular.
Por ejemplo, una forma de hacer una línea horizontal o vertical en una tabla es hacer una fila o columna y darle el color de background que quieras y ponerle un height o un width de 1 respectivamente. Así están hechas en la lista del tablón público, por ejemplo.
En http://www.dynamicdrive.com/dynamicindex6/analog.htm se crea una línea punteada. Hacerla sólida es sólo ponerle más capas y colocarlas (lo más difícil).
De esta página se puede extraer otra forma de hacer líneas verticales y horizontales que es con capas, y serían tal que:
Para hacerla más ancha o más alta hay que modificar height y width.
Bien, como verás hacer líneas horizontales y verticales no implica una gran dificultad, pero si quieres hacer diagonales el tema se complica más.
Por ejemplo, una forma de hacer una línea horizontal o vertical en una tabla es hacer una fila o columna y darle el color de background que quieras y ponerle un height o un width de 1 respectivamente. Así están hechas en la lista del tablón público, por ejemplo.
En http://www.dynamicdrive.com/dynamicindex6/analog.htm se crea una línea punteada. Hacerla sólida es sólo ponerle más capas y colocarlas (lo más difícil).
De esta página se puede extraer otra forma de hacer líneas verticales y horizontales que es con capas, y serían tal que:
Para hacerla más ancha o más alta hay que modificar height y width.
Bien, como verás hacer líneas horizontales y verticales no implica una gran dificultad, pero si quieres hacer diagonales el tema se complica más.
Perfecto. Solo una pregunta más. En la página que me has dicho, ¿Cómo hacen para hacer el segundero y minutero en ángulo?
Para hacer las tres líneas se define tres arrays de capas, H para la línea de las horas, M y ES para minutero y segundero, respectivamente.
Se define un Xbase y un Ybase, que serán los dos radios de la elipse que describirán las capas (si son iguales, como en el ejemplo, el resultado es un círculo).
Para colocar el segundero, minutero y hora, utiliza la ecuación de la circunferencia para colocar los puntos, algo parecido a :
x = x0 + radio * cos(angulo)
y = y0 + radio * sin (angulo)
Salvo que lo retrasa 1/4 de circunferencia (1.045 radianes) para que coincida con un reloj normal.
En tu caso, si quieres dibujar una línea en particular, deberías seguir la ecuación de una recta entre dos puntos:
y = y0 + y' * (x-x0)
y' = (y1-y0)/(x1-x0)
Donde (x0, y0) e (y0, y1) son los puntos que indican principio y fin de la recta e y' es la tangente. Esto te daría, a primera vista x1-x0 capas, aunque se puede mejorar para sacar menos capas.
Para hacer eso, deberías calcular la posición de todas las capas y luego agrupar por la misma por, por ejemplo, o la misma y, con lo que reducirías el número de capas.
Bueno, voy a preparar un ejemplo y luego te lo mando por aquí.
Se define un Xbase y un Ybase, que serán los dos radios de la elipse que describirán las capas (si son iguales, como en el ejemplo, el resultado es un círculo).
Para colocar el segundero, minutero y hora, utiliza la ecuación de la circunferencia para colocar los puntos, algo parecido a :
x = x0 + radio * cos(angulo)
y = y0 + radio * sin (angulo)
Salvo que lo retrasa 1/4 de circunferencia (1.045 radianes) para que coincida con un reloj normal.
En tu caso, si quieres dibujar una línea en particular, deberías seguir la ecuación de una recta entre dos puntos:
y = y0 + y' * (x-x0)
y' = (y1-y0)/(x1-x0)
Donde (x0, y0) e (y0, y1) son los puntos que indican principio y fin de la recta e y' es la tangente. Esto te daría, a primera vista x1-x0 capas, aunque se puede mejorar para sacar menos capas.
Para hacer eso, deberías calcular la posición de todas las capas y luego agrupar por la misma por, por ejemplo, o la misma y, con lo que reducirías el número de capas.
Bueno, voy a preparar un ejemplo y luego te lo mando por aquí.
Muchísimas gracias, espero impaciente tu ejemplo.
Ahí va el ejemplo:
<html>
<body>
<script>
// Prueba para internet explorer.
// Crea una línea entre dos puntos.
var x0 = 100;
var y0 = 100;
var x1 = 100;
var y1 = 300;
// Si alguna de las dos componentes son iguales, dibujamos una línea recta.
if (x0 == x1)
{
document.write ("<div id=linea0 style='position:absolute;top:" + y0 + "px;left:" + x0 + "px;height:" + (y1-y0) + "px;width:1px;font-size:1px;background:black'></div>");
}
else
{
if (y0 == y1)
{
document.write ("<div id=linea0 style='position:absolute;top:" + y0 + "px;left:" + x0 + "px;width:" + (x1-x0) + "px;height:1px;font-size:1px;background:black'></div>");
}
else
{
var tan = (y1-y0)/(x1-x0);
// iteramos sobre x
for (var x=x0;x<x1;x++)
{
document.write ("<div id=linea" + x + " style='position:absolute;top:" + (tan*x) + "px;left:" + x + "px;width:1px;height:1px;font-size:1px;background:black'></div>");
}
}
}
</script>
</body>
</html>
Está hecho para explorer, para netscape cambia la forma de escribir las capas.
También van fijados los puntos de inicio (x0, y0) y fin (x1, y1).
Ya me contarás si te gustó.
<html>
<body>
<script>
// Prueba para internet explorer.
// Crea una línea entre dos puntos.
var x0 = 100;
var y0 = 100;
var x1 = 100;
var y1 = 300;
// Si alguna de las dos componentes son iguales, dibujamos una línea recta.
if (x0 == x1)
{
document.write ("<div id=linea0 style='position:absolute;top:" + y0 + "px;left:" + x0 + "px;height:" + (y1-y0) + "px;width:1px;font-size:1px;background:black'></div>");
}
else
{
if (y0 == y1)
{
document.write ("<div id=linea0 style='position:absolute;top:" + y0 + "px;left:" + x0 + "px;width:" + (x1-x0) + "px;height:1px;font-size:1px;background:black'></div>");
}
else
{
var tan = (y1-y0)/(x1-x0);
// iteramos sobre x
for (var x=x0;x<x1;x++)
{
document.write ("<div id=linea" + x + " style='position:absolute;top:" + (tan*x) + "px;left:" + x + "px;width:1px;height:1px;font-size:1px;background:black'></div>");
}
}
}
</script>
</body>
</html>
Está hecho para explorer, para netscape cambia la forma de escribir las capas.
También van fijados los puntos de inicio (x0, y0) y fin (x1, y1).
Ya me contarás si te gustó.
Respuesta de chispeante
1
Una forma de "engañar" es:
Haciendo una línea horizontal o vertical, le das el color (background) y le pones un height o un width de 1 respectivamente. Así están hechas en la lista del tablón público, por ejemplo.
En http://www.dynamicdrive.com/dynamicindex6/analog.htm se crea una línea punteada. Hacerla sólida es sólo ponerle más capas y colocarlas (lo más difícil).
De esta página se puede extraer otra forma de hacer líneas verticales y horizontales que es con capas, y serían tal que:
<div id="Nz" style="position:absolute;top:0px;left:0px;width:2px;height:2px;font-size:2px;background:black"></div>
Para hacerla más ancha o más alta hay que modificar height y width.
A mi me paso lo mismo y tuve que recurrir a un foro, así que el mérito es del que me dio la respuesta.
Haciendo una línea horizontal o vertical, le das el color (background) y le pones un height o un width de 1 respectivamente. Así están hechas en la lista del tablón público, por ejemplo.
En http://www.dynamicdrive.com/dynamicindex6/analog.htm se crea una línea punteada. Hacerla sólida es sólo ponerle más capas y colocarlas (lo más difícil).
De esta página se puede extraer otra forma de hacer líneas verticales y horizontales que es con capas, y serían tal que:
<div id="Nz" style="position:absolute;top:0px;left:0px;width:2px;height:2px;font-size:2px;background:black"></div>
Para hacerla más ancha o más alta hay que modificar height y width.
A mi me paso lo mismo y tuve que recurrir a un foro, así que el mérito es del que me dio la respuesta.