Dibujar linea de punto X a un punto Y

Gilad · #1 (**permalink**) 30/06/2012, 12:01

Hola, he estado buscando por todos sitios y no he encontrado como poder hacerlo.
Lo que intento hacer es dibujar una linea de un punto a otro, por ejemplo, de un div con posicion top 200px y left 200px a otro div con posicion top 400px y left 400px.

Gracias

emprear · #2 (**permalink**) 30/06/2012, 12:47

Con canvas podes dibujar la linea

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title>linea con canvas</title>
<!--[if lt IE 9]><script type="text/javascript" src="html5ie.js"></script><![endif]-->
</head>
<body>
<canvas id="linea" width="200" height="100" style="background: orange;">
su navegador no soporta canvas
</canvas>
<script type="text/javascript">
var l=document.getElementById("linea");
var c=l.getContext("2d");
c.lineTo(50,0);
c.lineTo(0,50);
c.stroke();
</script>
</body>
</html>

Pero como ves el elemento canvas actúa como un contenedor para la linea, asi que o tenes que dibujar los cuadrados/rectángulos que simulan los divs dentro del canvas, o ubicar los divs fuera del canvas en las posiciones deseadas.

Otra alternativa es usar un svg

Código svg:

Ver original<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="210mm"
   height="297mm"
   id="svg2"
   version="1.1"
   inkscape:version="0.48.2 r9819"
   sodipodi:docname="Documento nuevo 1">
  <defs
     id="defs4" />
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="0.35"
     inkscape:cx="-115.71429"
     inkscape:cy="520"
     inkscape:document-units="px"
     inkscape:current-layer="layer1"
     showgrid="false"
     inkscape:window-width="1440"
     inkscape:window-height="881"
     inkscape:window-x="-4"
     inkscape:window-y="-4"
     inkscape:window-maximized="1" />
  <metadata
     id="metadata7">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="Capa 1"
     inkscape:groupmode="layer"
     id="layer1">
    <rect
       style="fill:#ff0000;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       id="rect2985"
       width="228.57143"
       height="185.71428"
       x="22.857143"
       y="620.93359" />
    <rect
       style="fill:#008000"
       id="rect2987"
       width="220"
       height="174.28572"
       x="408.57144"
       y="143.79076" />
    <path
       style="fill:none;stroke:#16162f;stroke-width:12.1;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
       d="m 411.42857,320.93361 -160,300"
       id="path2989"
       inkscape:connector-curvature="0" />
  </g>
</svg>

Saludos

furoya · #3 (**permalink**) 30/06/2012, 16:57

Y otra más es simular la línea con un div

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
</head>
<body>
<div style="position: absolute; top: 200px; left: 200px; height: 100px; width: 100px; background: green;"></div>

<div style="position: absolute; top: 400px; left: 400px; height: 100px; width: 100px; background: red;"></div>

<div style="position: absolute; top: 250px; left: 250px; height: 2px; width: 290px; 
background: black; overflow: hidden; 
-moz-transform-origin:0px 0px; 
-o-transform-origin:0px 0px; 
-webkit-transform-origin:0px 0px; 
transform-origin:0px 0px; 
-moz-transform: rotate(45deg); 
-o-transform: rotate(45deg); 
-webkit-transform: rotate(45deg); 
transform: rotate(45deg); 
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', 
M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, 
M22=0.7071067811865476);"></div>

</body>
</html>

caricatos · #4 (**permalink**) 30/06/2012, 18:34

Hola:

Para líneas svg solo es necesario el tag line (y el tag svg)...

Saludos

furoya · #5 (**permalink**) 30/06/2012, 19:05

Me resultó extraña esa forma de presentar un SVG. Pensé que sería alguna "librería" compatibilizadora. Esperaba que alguien más preguntara, pero ya que pasé, aprovecho y lo hago yo ahora. ¿Hay algún manual sobre eso?. Tiene etiquetas muy raras.

Y ya que menciono cosas raras.

Cita:

Iniciado por Gilad

...he estado buscando por todos sitios y no he encontrado como poder hacerlo...

¿De veras?

Panino5001 · #6 (**permalink**) 30/06/2012, 19:17

El código parece estar generado con inkscape y por eso es medio "complejo". A mi me gustó esta página como introducción a svg: http://srufaculty.sru.edu/david.dailey/svg/#JSSMIL
Es viejita, pero con muchos ejemplos interesantes

caricatos · #7 (**permalink**) 01/07/2012, 03:28

Hola:

Y sin imágenes, se puede generar una serie de divs de un pixel de altura y anchura, con posicionamiento absoluto (dentro de uno "relativo"), usando la ecuación de laa recta para los puntos intermedios: un viejo ejemplo de un reloj analógico (me parece que estaba en las FAQs).

Sobre el formato svg, acabo de hacer este apunte: SVG: Mapa de España... parece un formato interesante para hacer mapas de imágenes (lástima que aún no se implemente bien en algunos navegadores).

Saludos

emprear · #8 (**permalink**) 01/07/2012, 04:08

Cita:

Iniciado por furoya

Me resultó extraña esa forma de presentar un SVG. Pensé que sería alguna "librería" compatibilizadora. Esperaba que alguien más preguntara, pero ya que pasé, aprovecho y lo hago yo ahora. ¿Hay algún manual sobre eso?. Tiene etiquetas muy raras.

Y ya que menciono cosas raras.

¿De veras?

Cita:

Iniciado por Panino5001

El código parece estar generado con inkscape y por eso es medio "complejo". A mi me gustó esta página como introducción a svg: http://srufaculty.sru.edu/david.dailey/svg/#JSSMIL
Es viejita, pero con muchos ejemplos interesantes

Si, efectivamente lo hice con el Inkscape(me parece una buena herramienta entre las que he visto), tratando de interpretar/visualizar que es lo que quiere @Gilad, ya que no aclara mucho si la linea une 2 vertices de los divs, o los une por el centro como hizo @furoya.
Cabe aclarar que muchas de las etiquetas y atributos son solo para uso interno del Inkscape, (para una edición posterior basicamente), podría haberse hecho algo más simple

Código svg:

Ver original<svg width="640" height="480">
 <g>
  <polyline transform="rotate(5.0162, 286.5, 216.447)" se:connector="svg_2 svg_1" fill="none" stroke-width="5" stroke="#000000" points="364,154.76 286.5,216.449 209,278.138" id="svg_3"/>
  <rect id="svg_1" height="119" width="119" y="266" x="90"  fill="#FF0000"/>
  <rect id="svg_2" height="120" width="120" y="47" x="364"  fill="#7f3f00"/>
 </g>
</svg>

Saludos

furoya · #9 (**permalink**) 04/07/2012, 08:07

Ya que estamos —y porque Gilad sigue sin aclarar nada— pongo otro que nos falta : VML ( Vector Markup Language), que es para IE.

Código:

<html xmlns:v="urn:schemas-microsoft-com:vml" prefix="v" />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<head>
<style type="text/css">
v\: * { behavior:url(#default#VML); position: absolute; top:0; left: 0;}
</style>
</head>
<body>

<div style="position: absolute; top: 200px; left: 200px; height: 100px; width: 100px; background: green;"></div>

<div style="position: absolute; top: 400px; left: 400px; height: 100px; width: 100px; background: red;"></div>

<v:line from="250 250" to="450 450" stroke="true" strokecolor="black" strokeweight="2" coordsize="1000,1000" coordorigin="0 0" />

</body>
</html>

(Al próximo que diga que "no encuentra", lo colgamos de las amígdalas.)