Javascript dibujar la línea dinámica

Question

Estoy buscando un código Javascript para permitir que el usuario dibuje una línea (en una imagen).

Al igual que la herramienta de línea en Photoshop (por ejemplo):

El usuario hace clic en la imagen, arrastra el ratón (mientras que la línea entre el punto inicial y el punto de ratón se dibuja dinámicamente en arrastre del ratón).

También necesitaría una función invocable para enviar a la página las coordenadas de inicio y fin.

he encontrado este muy buen guión para la selección del área: http://www.defusion.org.uk/code/javascript-image-cropper-ui-using-prototype-scriptaculous/

y he encontrado muchos guión para el trazado de líneas (y otras formas de JS), pero no pude encontrar lo que estoy buscando .

Gracias

Answer 1

Dado que no existe un método estándar de dibujo, si desea admitir navegadores más antiguos e IE, , necesitará utilizar una biblioteca. La biblioteca se encargará de las cuestiones de plataforma cruzada de dibujo con SVG o de Microsoft VML

recomiendo Raphael JS

Answer 2

Considere el uso del elemento canvas para mostrar la imagen. Entonces, dibujar una línea (o cualquier otra cosa) en él es trivial.

Answer 3

Si tus cuentas es lo suficientemente bueno, es posible (aunque locas) a hacerlo sin la etiqueta de la lona para el más moderno navegadores usando uno de (según corresponda):

• -webkit-transform: rotate
• -moz-transform: rotate
• -o-transform-rotate
• The Trident Matrix Filter

Al crear por ejemplo. un div 1px alto, con p. ej. un borde superior para su 'línea', y usando el evento de arrastre del mouse para posicionarlo y rotarlo.

Locura se encuentra de esta manera pero sería un ejercicio bastante divertido. (Debe usar algo como Raphael JS, que es cross browser y cuerdo - ver arriba)

Answer 4

raphael.js es una herramienta de renderizado liviana para javascript (licencia MIT) que funciona en FF, Safari, Chrome e IE6 +.

Utiliza SVG para los primeros 3 y VML para IE, pero la API es idéntica en todos los navegadores y muy dulce.

http://raphaeljs.com/

por ejemplo

// Creates canvas 320 × 200 at 10, 50 
var paper = Raphael(10, 50, 320, 200); 

// Creates circle at x = 50, y = 40, with radius 10 
var circle = paper.circle(50, 40, 10); 
// Sets the fill attribute of the circle to red (#f00) 
circle.attr("fill", "#f00"); 

// Sets the stroke attribute of the circle to white 
circle.attr("stroke", "#fff"); 

Lo he utilizado para dibujar una línea mientras arrastra y puedo responder por su facilidad de uso

Answer 5

estoy trabajando en algo similar. Dibujar una línea en un lienzo es bastante simple. Puedes tomar de mi código aquí.

http://p-func.com/html5_test/test2.html

sólo tienes que seguir el oyente mousedown.

Aunque he encontrado, al querer cargar imágenes, que la biblioteca de Rafael podría ser mejor usarla. Vi esto porque Canvas parece actuar como una imagen plana. Entonces, si quiero agregarle un objetivo, permitir que el usuario manipule esa imagen, no me dejará (a menos que haya algo que me falta).

Raphael le permite dibujar y seguir usando esos dibujos e imágenes como objetos.

Answer 6

Una solución multi-navegador para dibujar líneas en Javascript, sin requerir ninguna biblioteca externa, se puede encontrar aquí: http://bytes.com/topic/javascript/answers/88771-drawing-vector-lines-javascript

Esto funciona en todos los navegadores, incluyendo IE.

Answer 7

Cuando se admite puede utilizar lienzo, en IE utiliza la función de rotación de filtros. Como aquí funciona tanto:

http://www.gatekeeperel.co.uk/interactives/web.html