¿Puedo trazar una línea usando jQuery?

Question

Tengo una aplicación web en la que me gustaría al usuario trazar una línea en la siguiente forma: Cuando se hace clic en Point1 y se mueve el ratón, dibujar la línea de Point1 a la posición actual del ratón y cuando hace clic en Point2 dibuja la línea final desde Point1 a Point2.

¿Cómo puedo hacerlo usando jQuery y/o uno de sus complementos?

Answer 1

No puede hacerlo con jQuery y HTML clásico.

1. Puede hacerlo utilizando SVG (+ svgweb para IE8- http://code.google.com/p/svgweb/) SVG se puede crear de forma dinámica. jQuery + svgweb están funcionando perfectamente, solo necesitas saber cómo crear nodos SVG y solo necesitas jquerificar estos nodos. Después jquerifiing en la mayoría de los casos se utiliza un solo método attr()

2. Puede hacerlo utilizando Raphael http://raphaeljs.com/ (basado en SVG y VML)

3. Puede hacerlo utilizando mano (http://flashcanvas.net/ para IE8-)

---

Para la programación SVG habrá esta manera:

1. momento de crear el primer punto: se crea una línea vacía var Line (también esto apunta coordenadas serán x1 y y1)

2. Luego que ates en la mousemove repinte del x2, y2 propiedades de Línea

3. En mousedown después de mousemove congela la posición de la última línea.

---

ACTUALIZACIÓN

usted puede hacerlo con CSS/JS, pero el problema principal es en los cálculos para IE8-, que sólo tiene filtro de matriz para las transformaciones.

Answer 2

Desafío aceptado.

Traté de hacerlo con transformaciones CSS y un montón de Matemáticas en Javascript - después de media hora tengo esto:

http://jsfiddle.net/VnDrb/2/

hacer 2 clics en el cuadrado gris y una línea de elaboración debe correr . Todavía hay un pequeño error que dibuja la línea incorrecta cuando el ángulo es> 45 grados. Quizás alguien más sepa cómo arreglar eso. Tal vez en lugar de utilizar Math.asin (arcsinus), utilice otra función trigonométrica, pero realmente no soy bueno en eso. Pensé en publicarlo incluso si hay un pequeño error, creo que es un buen comienzo para ti.

Answer 3

He estado usando una versión modificada de esto por un tiempo. Funciona bien.

http://www.ofdream.com/code/css/xline2.php

Así que el primer clic, la caída y el objeto allí como un div marcador de posición, tal vez un pequeño círculo, entonces o bien mantener a volver a dibujar una línea a medida que avanzan su ratón, o que hagan que cuando hacen clic en el segundo tiempo, usando el marcador de posición original como una guía.

Recientemente he hecho otra función auxiliar para esto, porque mi herramienta consiste en líneas de moverse:

function setLinePos(x1, y1, x2, y2, id) { 
    if (x2 < x1) { 
     var temp = x1; 
     x1 = x2; 
     x2 = temp; 
     temp = y1; 
     y1 = y2; 
     y2 = temp; 
    } 
    var line = $('#line' + id); 
    var length = Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2)); 
    line.css('width', length + "px"); 
    var angle = Math.atan((y2 - y1)/(x2 - x1)); 
    line.css('top', y1 + 0.5 * length * Math.sin(angle) + "px"); 
    line.css('left', x1 - 0.5 * length * (1 - Math.cos(angle)) + "px"); 
    line.css('-moz-transform', "rotate(" + angle + "rad)"); 
    line.css('-webkit-transform', "rotate(" + angle + "rad)"); 
    line.css('-o-transform', "rotate(" + angle + "rad)"); 

} 

Esa es la versión de jQuery, y en esta iteración tengo ningún requisito IE así que ignoro. Podría ser adaptado de la función original bastante fácilmente.

Answer 4

He intentado una serie de enfoques diferentes este fin de semana y la solución que funcionó mejor para mí es de Adam Sanderson: http://monkeyandcrow.com/blog/drawing_lines_with_css3/

Su demostración está aquí: http://monkeyandcrow.com/samples/css_lines/

El núcleo de la misma es muy sencillo , que siempre es bueno

div.line{ 
    transform-origin: 0 100%; 
    height: 3px; /* Line width of 3 */ 
    background: #000; /* Black fill */ 
} 


function createLine(x1,y1, x2,y2){ 
    var length = Math.sqrt((x1-x2)*(x1-x2) + (y1-y2)*(y1-y2)); 
    var angle = Math.atan2(y2 - y1, x2 - x1) * 180/Math.PI; 
    var transform = 'rotate('+angle+'deg)'; 

    var line = $('<div>') 
     .appendTo('#page') 
     .addClass('line') 
     .css({ 
     'position': 'absolute', 
     'transform': transform 
     }) 
     .width(length) 
     .offset({left: x1, top: y1}); 

    return line; 
}