Opis
Dzisiejszy lab rozpoczyna serię związaną z przygotowaniem JavaScriptowego edytora obrazków SVG.
Przypomnijmy:
Obrazek to grafika w formacie SVG, która składa się z dowolnej ilości dowolnych prostokątów (mogą różnić się położeniem, wielkości i kolorem wypełnienia).
Zadanie
Dzisiejsze zadanie polega na napisaniu programu w TypeScript, który będzie umożliwiał następujące funkcje:
- Dodawanie nowego prostokąta do obrazka
- kolor wypełnienia prostokąta powinien być wybierany na podstawie formularza, który jest wyświetlany poza obszarem obrazka
- dodawanie można zrobić dodawanie za pomocą “przeciągnij i upuść” czyli wybieramy pierwszy róg prostokąta, klikamy i przeciągamy do drugiego rogu, a następnie zwalniamy przycisk myszy
- dodawanie można też zrobić prościej, poprzez wpisanie wartości (x_1, y_1, x_2, y_2) w formularzu i kliknięcie przycisku “Dodaj”
- Usuwanie prostokąta z obrazka
- usuwanie odbywa się poprzez kliknięcie na prostokąt, który chcemy usunąć (w formularzu pojawia się informacja o usuwanym prostokącie) a następnie kliknięcie przycisku usuń
- Kod powinien być napisany w TypeScript
- Dobrze by było, gdyby stan (obrazek) był przechowywany w formie obiektu, który będzie mógł być łatwo serializowany do formatu JSON, bo na kolejnych zajęciach będziemy zapisywać obrazki na serwerze