Что мне нужно научиться создавать интерфейсы, похожие на LucidChart

Question

Вот ссылка на их демо . По сути, это онлайн-инструмент, который реализует множество функций Visio.

Я создаю приложение, которое потребует аналогичного типа взаимодействия с пользователем, удаления, перемещения, редактирования, изменения размеров объектов, взаимодействия с сетками и направляющими и т. Д.

Поскольку проект предназначен для моих собственных учебных целей, мне было интересно, на каких вещах я должен сосредоточиться или научиться разрабатывать такие высококачественные интерфейсы

Приветствия

Answer 1

Существует draw.io , очень похожий инструмент, но с источником на github .

Answer 2

Создать такой богатый пользовательский интерфейс - большая задача.Вот почему есть много фреймворков и библиотек, которые уже разработали богатый пользовательский интерфейс, такой как:

• Sproutcore
• Cappuccino
• ExtJS
• Dojo
• jQuery UI

Sproutcore и Cappuccino предназначены для разработки приложений для настольных компьютеров в Интернете и включают очень хорошие компоненты пользовательского интерфейса.А также поддержание состояний приложений и моделей данных.ExtJS обладает множеством этих функций и очень приятным инструментарием пользовательского интерфейса, как и Dojo.

Lucidchart, который я заметил, использует также API-интерфейс рисования Canvas, так что это то, что вам нужно изучить для манипулирования фигурами и создания гибких соединений.,В Mozilla Developer Center есть несколько полезных вещей в API Canvas.

Answer 3

Я бы начал с изучения библиотеки Рафаэля .

Он позволяет вам писать довольно простой код Javascript для рисования графических элементов в браузере, включая довольно простые анимации и перетаскиваемые / кликабельные интерфейсы.

Честно говоря, не так просто и быстро написать что-нибудь столь же сложное, как сайт, на который вы ссылаетесь, но Рафаэль - самый быстрый способ начать работу с основами.

И, что лучше всего, Raphael даже совместим со старыми версиями IE, поэтому вам не нужно беспокоиться только о возможности поддержки новейших браузеров (хотя, конечно, вы можете захотеть заняться другими вещами, которые действительно нуждаются в других новые функции).

Надеюсь, это поможет.