Cosa devo imparare per creare interfacce simili a LucidChart

Question

Here's a link to their demo. Fondamentalmente, è uno strumento online che implementa molte delle funzionalità di Visio.

Sto costruendo un app che richiederebbe simile tipo di interazione con l'utente, lasciando cadere, lo spostamento, l'editing, ridimensionamento degli oggetti, interagendo con le griglie e le guide, ecc

Dal momento che il progetto è per i miei scopi di apprendimento, mi chiedevo quali sono alcune delle cose che dovrebbero concentrarsi su o imparare a essere in grado di sviluppare tali interfacce di alta qualità

Acclamazioni

Answer 1

per costruire una tale ricca interfaccia utente è un grande compito. Che è il motivo per cui ci sono un sacco di framework e librerie che hanno già sviluppato ricca roba interfaccia utente come ad esempio:

• Sproutcore
• Cappuccino
• ExtJS
• Dojo
• jQuery UI

Sproutcore e Cappuccino sono per lo sviluppo di applicazioni di stile desktop per il web e includono molto bene noi componenti dell'interfaccia. Oltre a mantenere gli stati delle applicazioni e i modelli di dati. ExtJS ha molte di queste funzionalità e un bel toolkit UI, così come Dojo.

Lucidchart Nota che utilizza anche l'API di disegno Canvas, quindi è qualcosa che dovresti esaminare per manipolare la forma e creare connessioni flessibili. Mozilla Developer Center ha alcune cose buone sull'API canvas.

Answer 2

Vorrei iniziare dando un'occhiata allo Raphael library.

Consente di scrivere codice Javascript piuttosto semplice per disegnare elementi grafici nel browser, tra cui animazioni piuttosto semplici e interfacce trascinabili/selezionabili.

In tutta onestà, non sarà facile e veloce scrivere qualcosa di complesso come il sito a cui sei collegato, ma Raphael è il modo più veloce per iniziare con le basi.

E, soprattutto, Raphael è persino compatibile con le versioni precedenti di IE, quindi non devi preoccuparti di essere in grado di supportare solo i browser più recenti (anche se ovviamente potresti voler fare altre cose di cui hai bisogno altre nuove funzionalità).

Spero che questo aiuti.

Answer 3

C'è lo draw.io, uno strumento molto simile, ma con la fonte su github.