Disegnare forme di base di HTML/CSS/Javascript

Ho bisogno per la progettazione di una web app che permette di disegnare e etichetta di forme di base. I visitatori saranno il disegno di una mappa di base di un negozio. Le forme disegnate dovranno essere memorizzati in un database (loro le coordinate e le dimensioni), insieme con le loro etichette e un paio di opzioni in modo che può essere facilmente replicato in seguito in un’altra app.

Qual è il modo più semplice per realizzare questo su una pagina web?!

InformationsquelleAutor ShawnCBerg | 2011-03-09

 

4 Replies
  1. 9

    Se stavo facendo questo, mi piacerebbe usare il Raphaël.

    Controllare il demo sul link qui sopra, si può fare tutti i tipi di pazzi.

    Se siete dopo un reale esempio di codice, farò una visita, utilizzando Raphaël, se volete.

    Funziona in molti browser:

    Raphaël attualmente supporta Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ e Internet Explorer 6.0+.

    • Quello che ho veramente bisogno è quello di permettere al visitatore di disegnare scatole e li etichetta in una web app. Non voglio essere di disegno con il codice, ma che permette all’utente di disegnare e quindi di dover memorizzare ogni elemento disegnato in un database con le coordinate per la ri-creazione di una applicazione mobile in futuro.
    • Vorrei sapere cosa si intende. Combinato con jQuery e un certo lavoro, è possibile utilizzare Raphaël per consentire agli utenti di disegnare “forme base” abbastanza facilmente. Come ho accennato nella mia risposta, ho potuto creare una piccola demo per voi. Per esempio, permettendo all’utente di disegnare rettangoli? Se questo suona troppo complesso, si potrebbe desiderare di provare una libreria che ha già tutta questa roba costruito nel. Purtroppo non ho esperienza con questo, quindi non so che di raccomandare. Attendere che un’altra risposta, o cerca su Google “javascript disegno” e termini simili.
  2. 4

    Dare un’occhiata a http://zwibbler.com

    • Zwibbler sembra essere esattamente quello che stai cercando. È altamente configurabile editor di grafica che si può solo cadere per la vostra applicazione.
  3. 2

    È possibile trarre alcune interessanti forme utilizzando puro CSS.

    Verifica del funzionamento esempio a http://jsfiddle.net/yFn6z/1/

    Anche più di un modo per disegnare CSS forme con bordi
    http://www.vanseodesign.com/css/creating-shapes-with-css-borders/
    http://www.sendesignz.com/index.php/css/68-how-to-draw-speech-bubble-and-shapes-with-css3
    http://net.tutsplus.com/articles/news/fun-with-css-shapes/

    Se si desidera disegnare forme vettoriali di tutti i tipi di utilizzo Raphaël libreria javascript.

    • Ho bisogno del visitatore per essere in grado di disegnare con il mouse, non a livello di programmazione di disegnare utilizzando il mio codice. Che senso ha?
  4. 1

    Se le sue linee e cerchi, È possibile utilizzare l’algoritmo di Bresenham (Leggi su google, un 1x1px div con il colore della vostra scelta rappresenta ogni punto di una linea o un cerchio) una volta che l’algoritmo è stato implementato, è possibile utilizzare setAttribute per assegnare gli attributi che si desidera per ogni linea o un cerchio che l’utente disegna e memorizzare tutti i dati separando ogni forma con una corretta delimitatori e salvarlo come un file di testo utilizzando UST. La memorizzati in file di testo può essere utilizzato come un mezzo per risparmiare gli utenti di avanzamento, ecc..

    • Io vado a guardare in questo…
    • Naturalmente è necessario avere onmousedown e onmouseup eventi dichiarati come avviare e interrompere la funzione di esecuzione dell’algoritmo. Fatemi sapere se funziona per voi. Ho implementato per alcuni dei miei lavori.

Lascia un commento