Czego potrzebuję, aby nauczyć się budować interfejsy podobne do LucidChart

Question

Here's a link to their demo. Zasadniczo jest to narzędzie online, które implementuje wiele funkcji visio.

buduję app, który musiałby otrzymać podobny typ interakcji użytkownika, upuszczenie, przenoszenie, edycja, zmiana rozmiaru obiektów, interakcji z siatki i prowadnic itp

Ponieważ projekt jest dla własnych celów edukacyjnych, zastanawiałem się, co to tylko niektóre z rzeczy, muszę skupić się na lub nauczyć się być w stanie opracować takie interfejsy wysokiej jakości

Cheers

Answer 1

zbudować taki bogaty interfejs użytkownika jest wielkim zadaniem. Dlatego istnieje wiele ram i bibliotek, które zostały już opracowane bogatym interfejsem użytkownika rzeczy takie jak:

• sproutcore
• Cappuccino
• ExtJS
• Dojo
• jQuery UI

Sproutcore i Cappuccino są przeznaczone do tworzenia aplikacji na komputery stacjonarne i obejmują bardzo dobre er składniki interfejsu. Oprócz utrzymywania stanów aplikacji i modeli danych. ExtJS ma wiele tych funkcji i bardzo ładny zestaw narzędzi do interfejsu użytkownika, podobnie jak Dojo.

Lucidchart I notice korzysta z API rysowania na płótnie, a więc jest to coś, czego trzeba by szukać w celu manipulowania kształtem i tworzenia elastycznych połączeń. Mozilla Developer Center ma kilka dobrych rzeczy na kanwie API.

Answer 2

Zacznę od przyjrzenia się Raphael library.

Pozwala na napisanie całkiem prostego kodu Javascript w celu narysowania elementów graficznych w przeglądarce, w tym całkiem prostych animacji i interfejsów możliwych do przeciągnięcia/kliknięcia.

Szczerze mówiąc, nie będzie łatwo i szybko napisać coś tak skomplikowanego, jak strona, z którą się łączysz, ale Raphael jest najszybszym sposobem na rozpoczęcie nauki od podstaw.

A co najlepsze, Raphael jest kompatybilny ze starszymi wersjami IE, więc nie musisz się martwić, że możesz tylko obsługiwać najnowsze przeglądarki (choć oczywiście możesz robić inne rzeczy, które wymagają inne nowe funkcje).

Nadzieję, że pomaga.

Answer 3

Jest draw.io, bardzo podobne narzędzie, ale ze źródłem na github.