środa, 2022-12-21

SVG: Choinka z krzywych Béziera

Przedmiotem omawianego projektu jest choinka utworzona za pomocą ścieżki (path) zawierającej kilka połączonych kwadratowych krzywych Béziera. Ścieżki, a zwłaszcza krzywe Béziera, to dość złożone zagadnienie, przedstawiono je skrótowo w zakresie potrzebnym do wykonania projektu.rym wprowadzeniem do tworzenia ścieżek.

W pierwszym kroku należy wyznaczyć współrzędne kluczowych punktów. Za pomocą ścieżki narysowano kilka odcinków składających się na linię prostą. Najważniejszym atrybutem elementu  path> jest d, zawiera on komendy i argumenty. Do narysowania odcinka potrzebne są dwie komendy: M (ustawia punkt rysowania) oraz L (rysuje linię od bieżącego miejsca do zadanego punktu). Deklaracja „M100,10 L100,20”, oznacza, że narysowany zostanie odcinek wyznaczony punktami o współrzędnych (100,10) oraz (100,20). Na dołączonym do przykładu rysunku (rys. 1) oznaczono wszystkie punkty, są one w równych odległościach, ale oczywiście dążąc do uzyskania mniej typowego efektu, można to zmienić.

Kolejny etap to przekształcenie odcinków na kwadratowe krzywe Béziera. Kwadratowa krzywa jest najprostszą krzywą Béziera. Określa się dla niej trzy punkty: początek, koniec i punkt kontrolny. W projekcie będzie to początek i koniec odcinka oraz dodatkowy utworzony punkt kontrolny – odcinek będzie „przeciągany” w jego stronę. Współrzędną y każdego punktu kontrolnego przyjęto od współrzędnej środka właściwego odcinka, współrzędne x wskazują na punkty położone naprzemiennie po lewej i prawej stronie linii. Komenda odpowiedzialna za rysowanie kwadratowej krzywej Béziera to Q. Deklaracja „M100,10 Q90,15 100,20” oznacza, że początkiem i końcem krzywej są punkty o współrzędnych (100,10) oraz (100,20), a punkt kontrolny ma współrzędne (90,15).

Osoby z pewnym doświadczeniem w kodowaniu plików SVG raczej pomijają pierwszy krok (tworzenie odcinków) i od razu tworzą ścieżki, przedstawiono go, aby ułatwić zrozumienie przykładu początkującym.

Poniżej znajdują się kody źródłowe przykładów.

Rysowanie odcinków

<svg width="200" height="180"  xmlns="http://www.w3.org/2000/svg"
  style="background:#a00;">
  <path d="
    M100,10
    L100,20
    L100,30
    L100,40
    L100,50
    L100,60
    L100,70
    L100,80
    L100,90
    L100,100
    L100,110
    L100,120
    L100,130
    L100,140"
    fill="none" stroke="#fc0"
    stroke-width="5" stroke-linecap="round"
  />
</svg>

Choinka z krzywych Béziera

<svg width="200" height="180"  xmlns="http://www.w3.org/2000/svg"
  style="background:#a00;">
    <path d="
    M100,10
    Q90,15 100,20
    Q120,25 100,30
    Q70,35 100,40
    Q140,45 100,50
    Q50,55 100,60
    Q160,65 100,70
    Q30,75 100,80
    Q180,85 100,90
    Q10,95 100,100
    Q200,105 100,110
    Q-10,115 100,120
    Q220,125 100,130
    Q-30,135 100,140
    L100,160"
    fill="none" stroke="#fc0"
    stroke-width="5" stroke-linecap="round" />
</svg>