Javascript disegnare linea dinamica

Question

Sto cercando codice Javascript per lasciare l'utente tracciare una linea (su un'immagine).

Proprio come lo strumento linea in Photoshop (per esempio):

L'utente clicca sull'immagine, trascina il mouse (mentre la linea tra il punto di inizio e il punto di topo è dinamicamente disegnato sulla trascinamento del mouse).

Vorrei anche bisogno di una funzione callable per inviare la pagina iniziale e finale coordinate.

Ho trovato questo molto bello scritto per la selezione dell'area: http://www.defusion.org. uk / code / javascript-image-Cropper-ui-con-prototipo-scriptaculous /

e ho trovato molti sceneggiatura di linee (e altre forme di JS) disegno, ma non ho trovato quello che sto cercando.

Grazie

Answer 1

Dal momento che non v'è alcun metodo standard di disegno, se si desidera supportare i browser più vecchi e IE, è necessario utilizzare una libreria. La biblioteca gestirà le questioni multi-piattaforma di disegno con SVG o VML di Microsoft

Raphael JS

Answer 2

Raphaël.js è uno strumento leggero di rendering per javascript (MIT concesso in licenza), che lavora in FF, Safari, Chrome e IE6 +.

Si utilizza SVG per la prima 3 e VML per IE, ma l'API è identica tutti i browser e molto dolce.

http://raphaeljs.com/

es.

// 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"); 

L'ho usato per disegnare una linea durante il trascinamento e posso garantire per la sua facilità d'uso

Answer 3

Una soluzione cross-browser per disegnare linee in JavaScript, senza richiedere alcuna librerie esterne, può essere trovato qui: http://bytes.com/topic/javascript/answers/88771-drawing-vector-lines-javascript

Questo funziona in tutti i browser, tra cui Internet Explorer.

Answer 4

Si consiglia di utilizzare l'elemento canvas per visualizzare l'immagine. Poi, tracciando una linea (o qualsiasi altra cosa) su di esso è banale.

Answer 5

Se i tuoi calcoli è abbastanza buono, è possibile (anche se pazza) di farlo senza il tag canvas per la maggior parte dei browser moderni che utilizzano uno dei (a seconda dei casi):

• -webkit-transform: ruotare
• -moz-transform: rotate
• -o-transform-rotate
• La Trident matrice del filtro

Con la creazione ad esempio. un alto div 1px, con ad esempio. un border-top per la 'linea', e utilizzando l'evento trascinare il mouse per posizionare e ruotarlo.

Madness si trova in questo modo , ma sarebbe un esercizio abbastanza divertente. (Si dovrebbe usare qualcosa di simile a Raphael JS, che è cross browser e sano - vedi sopra)

Answer 6

sto lavorando su qualcosa di simile. Disegno di una linea su una tela è abbastanza semplice. Si può prendere dal mio codice qui.

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

Basta seguire l'ascoltatore mousedown.

Anche se ho trovato, quando si vuole caricare le immagini, che la biblioteca Raffaello potrebbe essere migliore da usare. Ho visto questo perché Canvas sembra agire come un'immagine piatta. Quindi, se voglio aggiungere un aimge ad esso, quindi consentire all'utente di manipolare l'immagine, non mi lasciare (a meno che non ci sia qualcosa che mi manca).

Raphael consente di disegnare e utilizzare tali disegni e immagini, come oggetti ancora.

Answer 7

Quando è supportato è possibile utilizzare tela, in IE di utilizzare i filtri funzione di rotazione. Come qui funziona su entrambi:

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