Javascript disegnare la linea dinamica

Sto cercando il codice Javascript per consentire all’utente di disegnare una linea (un’immagine).

Solo come strumento di riga in Photoshop (per esempio):

L’utente fa clic sull’immagine, si trascina il mouse (mentre la linea tra il punto iniziale e il punto del mouse è redatti dinamicamente sul trascinamento del mouse).

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

Ho trovato questo bellissimo script per la zona di selezione:
http://www.defusion.org.uk/code/javascript-image-cropper-ui-using-prototype-scriptaculous/

e ho trovato che molti script per il disegno di linee (e di altre forme in JS), ma non riusciva a trovare quello che sto cercando.

Grazie

InformationsquelleAutor Ranch | 2010-03-24

 

7 Replies
  1. 17

    Poiché non vi è alcun metodo standard di disegno, se si desidera supportare i browser più vecchi e IE,
    sarà necessario utilizzare una libreria. La biblioteca di gestire il cross platform problemi di disegno con SVG o Microsoft VML

    Mi raccomando Raphael JS

    • +1 Altra considerazione da fare è Google Chiusura Biblioteca: code.google.com/closure/library (vedi il goog.graphics pacchetto).
    • Beh, credo Raffaello JS sarebbe. Ho preso uno sguardo al suo API e sembra grande. Avrei bisogno di implementare la linea di trascinamento per la mia auto, ma ho potuto sopportare che… Grazie
    • puoi postare un esempio?
  2. 3

    raphael.js è un leggero strumento di rendering javascript (CON licenza) che lavora in FF, Safari, Chrome e IE6+.

    Utilizza il formato SVG per i primi 3 e VML per IE, ma l’API è identico tra browser e molto dolce.

    http://raphaeljs.com/

    ad esempio

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

    Io l’ho usato per disegnare una linea durante il trascinamento e posso garantire per la sua facilità di utilizzo

  3. 2

    Cross-browser soluzione per il disegno di linee in javascript, senza la necessità di eventuali 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.

    • Ero alla ricerca di puro codice JS e questo funziona perfettamente in IE9 e Firefox8 (Testato sia altri browser potrebbero essere supportate). Quando si copia il codice, hai qualche stringa di formattazione da fare e anche cambiare il colore della linea da #FFFFFF a #FF0000 (causa lo sfondo è bianco!).
  4. 1

    Se la matematica è abbastanza buona, è possibile (anche se mad) a farlo senza il tag canvas per la maggior parte dei browser moderni, utilizzando uno dei (se del caso):

    Creando ad esempio. un 1px alta div, con, ad esempio. un border-top per la tua “linea”, e con il mouse trascinare evento per la posizione e la rotazione.

    Follia si trova in questo modo ma sarebbe molto divertente esercizio. (Si consiglia di utilizzare qualcosa come Raffaello JS, che è cross browser e sane – vedi sopra)

  5. 1

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

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

    Basta seguire il mousedown ascoltatore.

    Anche se ho trovato, quando si vuole caricare le immagini, che raphael la raccolta potrebbe essere meglio utilizzare. Ho visto questo perché la Tela sembra agire come un immagine piatta. Quindi, se voglio aggiungere un aimge, quindi consentire all’utente di manipolare l’immagine, non mi permette (a meno che c’è qualcosa che mi manca).

    Raffaello, permette di disegnare e utilizzare ancora i disegni e le immagini, di oggetti.

Lascia un commento