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

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

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

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

ура

3 ответа

Решение

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

  • SproutCore
  • Капучино
  • ExtJS
  • школа дзюдо
  • JQuery UI

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

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

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

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

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

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

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

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

Другие вопросы по тегам