Szkicownik w JavaScript

Kiedyś pisałem na mikroblogu o tworzonej przeze mnie aplikacji Szkicownik działającej w przeglądarce WWW dzięki napsaniu jej w JavaScript z wykorzystaniem Canvas'u. Dokończyłem ją wtedy, ale dopiero teraz przypomniałem sobie, że jeszcze nie udostępniłem jej ukończonej wersji. Dzisiaj utworzyłem więc repozytorium na GitHubie: https://github.com/Jan-Mleczko/Sketchpad-JS-app/

Funkcjonalności to rysowanie i zmazywanie odręczne w różnych kolorach wybieranych z palety, ale także rysowanie figur geometrycznych: odcinków, prostokątów i kół. Istotną zaletą, której nie widać na pierwszy rzut oka jest konfigurowalność. Można łatwo zmienić wymiary obszaru rysowania, rozmiar ikon oraz zestaw dostępnych barw, a wszysko się do siebie dostosuje. Wszystko dzieje się na jednym elemencie Canvas tworzonym dynamicznie przez skrypt. W dokumencie HTML, w którym chcemy osadzić edytor nie trzeba nic specjalnie przygotowywać poza wskazaniem miejsca dla aplikacji odpowiednim identyfikatorem.

Ogólnie ok, fajnie to działa, ale:

1. Współczesny JS pozwala na modularność i zarządzanie zasięgiem zmiennych. Nie wszystko musi być w jednym pliku, nie wszystko musi być var'em (zwłaszcza, że masz dużo "stałych", które teraz są stałe jedynie przez uppercase, czyli w Twojej głowie o ile o tym pamiętasz) i deklaracji nie trzeba trzymać na początku pliku, to chyba jakieś przyzwyczajenie z Pascala (?)
2. Trochę dziwna jest paleta kolorów: 5 podstawowych i losowy #C0C000.
3. Przydałaby się responsywność przy wyliczaniu rozmiarów wszystkiego + obsługa zdarzeń dla mobilek.

Inquis1t0r napisał(a):

Ogólnie ok, fajnie to działa, ale:

1. Współczesny JS pozwala na modularność i zarządzanie zasięgiem zmiennych. Nie wszystko musi być w jednym pliku, nie wszystko musi być var'em (zwłaszcza, że masz dużo "stałych", które teraz są stałe jedynie przez uppercase, czyli w Twojej głowie o ile o tym pamiętasz) i deklaracji nie trzeba trzymać na początku pliku, to chyba jakieś przyzwyczajenie z Pascala (?)

Celem tego wielkiego bloku stałych na samej górze jest zgromadzenie w jednym miejscu wszystkich parametrów konfiguracyjnych, które ktoś może chcieć zmienić, takich jak rozmiar obszaru rysowania, paleta barw, skala ikon, wielkość gumki do mazania. Wiele zmiennych jest definiowanych niżej. Zdarzyło mi się programować w Pascalu przez pewien (krótki) okres wczesnej nauki programowania, ale nie pisałem w nim nic większego, już dawno przeszedłem na C.

Rozważę uczynienie tych wszystkich stałych const.

1. Trochę dziwna jest paleta kolorów: 5 podstawowych i losowy #C0C000.

To #C0C000 rzeczywiście wygląda dziwnie, ale wzięło się stąd, że chciałem dać żółty, ale podstawowy yellow był prawie niewidoczny przy rysowaniu nim "ołówkiem" na białym tle, więc wobec tego ustawiłem odpowiednio ciemny żółty.

1. Przydałaby się responsywność przy wyliczaniu rozmiarów wszystkiego + obsługa zdarzeń dla mobilek.

Masz na myśli, żeby rozmiary nie były ustalane w kodzie, ale dynamicznie zależnie od rozmiaru ekranu?

Nie testowałem tego na żadnym urządzeniu z wyświetlaczem dotykowym ponieważ założyłem, że zdarzenia dotyku są tam traktowane tak samo, jak zdarzenia myszy. Ale w takim razie sprawdzę, jak to się zachowa.