Strona główna » Poradniki » Grafika SVG » Grafika wektorowa i JavaScript
 

Grafika wektorowa i JavaScript

https://mattomatti.com/gr10

Wstęp

Artykuł ma za zadanie wyjaśnić w jaki sposób można tworzyć grafikę SVG przy pomocy popularnego języka skryptowe JavaScript. Połączenie grafiki wektorowej razem z skryptami pozwala tworzyć wiele różnych ciekawych projektów, które dzięki skalowalności będą od razu dostosowane zarówno dla użytkowników komputerów stacjonarnych jak i urządzeń mobilnych. Na stronie takie połączenie jest wykorzystywane przede wszystkim do tworzenie gier planszowych.

Szybki start

Jak wiadomo SVG jest to określony zapis XML. Chociaż SVG można wstawiać bezpośrednio do kodu przeglądarki i ma podobną strukturę do HTMLa to obiekty SVG tworzy się w trochę inny sposób. Podczas tworzenia elementu należy dodatkowo podać adres, który zawiera specyfikację SVG. Tylko w ten sposób utworzonemu obiektowi będzie można przypisać odpowiednie atrybuty oraz zdarzenia. Dokładny opis co i dlaczego nie jest w tej chwili ważny.

Obiekt SVG

Co należy zapamiętać to jest fakt, że zamiast polecenia createElement należy użyć polecenia createElementNS. Dwa niemalże identyczne polecenia różnią się faktem, że do drugiej funkcji można podać argument, który będzie zawierał adres do dokumentu przestrzeni nazw. Przykładowo w celu utworzeniu dokumentu należy wpisać:

  1. var obj = document.createElementNS("http://www.w3.org/2000/svg", "svg");

W tym momencie do obiektu obj został przypisany nowy obiekt svg utworzony na podstawie dokumentu http:/www.w3.org/2000/svg. Powyższa linijka utworzyła na razie całkowicie pusty obiekt (tj. utworzyć pusty obiekt div).

Ustalanie atrybutów

Kolejny krok polega teraz na nadaniu obiektowi atrybutów. Najważniejsze z nich to: xmlns, aby przeglądarka wyświetlała SVG prawidłowo, width i height - rozmiar obiektu oraz viewBox, która część płótna ma być widoczna. Atrybuty są dodawane do obiektu przy pomocy funkcji setAttribute, która przyjmuje dwa argumenty: (kolejno) nazwę argumentu oraz jego wartość.

  1. obj.setAttribute("xmlns", "http://www.w3.org/2000/svg");
  2. obj.setAttribute("width", "300px");
  3. obj.setAttribute("height", "200px");
  4. obj.setAttribute("viewBox", "0 0 300 200");

Dodawanie elementów

Dotychczas utworzony obiekt ma określoną przestrzeń nazw, wymiary, a nawet, którą część dokumentu ma wyświetlać. Jedyne co teraz pozostaje to dodać jakiś obiekt. Załóżmy, że dodany obiekt to będzie kółko. Tak samo jak w przypadku tworzenia obiektu SVG należy pamiętać, aby skorzystać z funkcji createElementNS.

  1. var svg_circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
  2. svg_circle.setAttribute("cx", 100);
  3. svg_circle.setAttribute("cy", 100);
  4. svg_circle.setAttribute("r", 40);

(1.) Utworzenie obiektu circle i (2. - 3.) ustalenie środka koła oraz (4.) jego promienia.

Wyświetlanie

Do utworzonego obiektu SVG należy dodać teraz koło, następnie utworzony obiekt obj dołączyć do dokumentu. W tym przypadku zostanie od dołączony do specjalnie utworzonego obiektu.

  1. obj.appendChild(svg_circle);
  2. document.getElementById("example1").appendChild(obj);

Po wywołaniu w całości dotychczas utworzonego kodu na ekranie powinien pojawić się utworzony rysunek:

Interaktywność

Jak można się spodziewać do tworzonych obiektów można dodawać różnego rodzaju zdarzenia. W ten sposób przykładowo można rozpocząć komunikację pomiędzy obiektem SVG, a JavaScript. Jednym z najprostszych przykładów jest dodanie zdarzenia onclick(), które zmieni kolor obiektu.

Zmiana koloru

Przed przystąpieniem do tworzenia rysunku utwórzmy funkcję randomFill(), która będzie przyjmowała tylko jeden argument el. Argument ten będzie klikniętym obiektem, dla którego następnie (2. - 4.) zostaną wylosowane losowe wartości RGB, a (5.) później wylosowany kolor zostanie przypisany do klikniętego obiektu.

  1. function randomFill(el){
  2.   var R = Math.floor(Math.random() * 255);
  3.   var G = Math.floor(Math.random() * 255);
  4.   var B = Math.floor(Math.random() * 255);
  5.   el.setAttribute("fill", "rgb("+R+","+G+","+B+")");
  6. }

Tworzenie rysunku

Poniższy kod przedstawia tworzenie nowego obiektu SVG i dodaje do niego kwadrat.

  1. var obj2 = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  2. obj2.setAttribute("xmlns", "http://www.w3.org/2000/svg");
  3. obj2.setAttribute("width", "200px");
  4. obj2.setAttribute("height", "200px");
  5. obj2.setAttribute("viewBox", "0 0 300 200");
  6.  
  7. var btn = document.createElementNS("http://www.w3.org/2000/svg", "rect");
  8. btn.setAttribute("x", 10);
  9. btn.setAttribute("y", 10);
  10. btn.setAttribute("width", "180");
  11. btn.setAttribute("height", "180");
  12. btn.setAttribute("stroke", "black");
  13. btn.setAttribute("stroke-width", "2px");
  14. btn.setAttribute("fill", "black");
  15. btn.setAttribute("onclick", "randomFill(this);");

Warto zauważyć, że (7.) tworzenie obiektu rect odbywa się tak samo jak svg i circle. Ustalenie (8. - 9.) pozycji, (10. - 11.) rozmiaru, (12. - 13.) stylu obramowania oraz (14.) domyślne wypełnienie. (15.) Zdarzenie na kliknięcie również można ustalić poprzez funkcję setAttribute z atrybutem onlick. Jako wartość podaje się funkcję randomFill i przekazuje się jej kliknięty element this.

Wyświetlanie

Poniższy kod odpowiednio dodaje elementy i (3.) losuje początkowy kolor przycisku:

  1. obj2.appendChild(btn);
  2. document.getElementById("example2").appendChild(obj2);
  3. randomFill(btn);

Poniżej znajduje się efekt powyższego kodu:

Zadania

Zadanie 1

Napisz program, który po kliknięciu w obiekt skasuje go, a następnie utworzy dwa nowe obiekty, które będą 20% mniejsze i losowo rozłożone. Poniżej znajduje się demo zadania: