¿Qué debo aprender para construir interfaces similares a LucidChart

Question

Here's a link to their demo. Básicamente, es una herramienta en línea que implementa mucha de la funcionalidad de Visio.

Estoy construyendo una aplicación que requeriría un tipo similar de interacción con el usuario, dejando caer, mover, editar, cambiar el tamaño de los objetos, interactuar con cuadrículas y guías, etc.

Dado que el proyecto es para mis propios fines de aprendizaje, me preguntaba ¿cuáles son algunas de las cosas que deben centrarse en aprender o para poder desarrollar este tipo de interfaces de alta calidad

Saludos

Answer 1

para construir una interfaz de usuario tan rica es una gran tarea. Razón por la cual hay un montón de marcos y bibliotecas que ya han desarrollado ricos cosas interfaz de usuario, tales como:

• SproutCore
• Cappuccino
• ExtJS
• Dojo
• jQuery UI

Sproutcore y Cappuccino son para el desarrollo de aplicaciones de escritorio para la web y nos incluyen muy bien er componentes de la interfaz. Además de mantener los estados de aplicación y los modelos de datos. ExtJS tiene muchas de estas características y un kit de herramientas de interfaz de usuario muy agradable, al igual que Dojo.

Lucidchart Me doy cuenta de que utiliza la API de dibujo Canvas también, así que eso es algo que deberías estudiar para la manipulación de formas y la creación de conexiones flexibles. El Centro de desarrollo de Mozilla tiene algunas cosas buenas en la API de lienzo.

Answer 2

Comenzaría echando un vistazo al Raphael library.

Le permite escribir código Javascript bastante simple para dibujar elementos gráficos en el navegador, incluidas animaciones bastante sencillas e interfaces que se pueden arrastrar/hacer clic.

Honestamente, no va a ser fácil y rápido escribir algo tan complejo como el sitio al que se ha vinculado, pero Raphael es la forma más rápida de comenzar con lo básico.

Y lo mejor de todo, Raphael es incluso compatible con las versiones anteriores de IE, por lo que no tiene que preocuparse por solo poder admitir los últimos navegadores (aunque, por supuesto, es posible que desee hacer otras cosas que no necesita otras nuevas características).

Espero que ayude.

Answer 3

Hay draw.io, una herramienta muy similar, pero con la fuente en github.