Lekcja 5. path, część 3: łuki

A — siedem argumentów i dwie flagi, które psują wszystkim życie

To ostatnia lekcja o path i zarazem najtrudniejsza komenda w całym SVG. Nie dlatego, że robi coś skomplikowanego — robi jedną prostą rzecz. Trudność bierze się stąd, że opisuje ją w sposób, który wydaje się kompletnie niepotrzebny, dopóki nie zrozumiesz, dlaczego musi taki być.

Poprzednia lekcja skończyła się na tym, że krzywą Béziera nie da się narysować dokładnego okręgu. A jest odpowiedzią na ten brak: rysuje wycinek elipsy, matematycznie ścisły.

Siedem argumentów

A rx ry obrót large-arc-flag sweep-flag x y

Konkretnie:

A 80 45 0 0 1 180 140

• rx ry — promienie elipsy, poziomy i pionowy
• obrót — o ile stopni przekręcona jest sama elipsa
• dwie flagi — o nich za chwilę, to jest sedno
• x y — punkt, w którym łuk się kończy

Pobaw się promieniami. Zwróć uwagę na dwie rzeczy. Po pierwsze, obrót nic nie robi, dopóki rx i ry są sobie równe — obróconego koła nie da się odróżnić od nieobróconego. Po drugie, gdy promienie zrobią się za małe, żeby połączyć oba punkty, łuk nie znika ani nie zgłasza błędu: przeglądarka po cichu powiększa je tyle, ile trzeba.

To ostatnie jest częstym źródłem zdziwienia. Zmniejszasz rx poniżej pewnej wartości i nic się już nie zmienia, bo od tego momentu SVG ignoruje Twoją liczbę i używa minimalnej, która w ogóle pozwala domknąć łuk.

Dlaczego to takie dziwne

Popatrz jeszcze raz na tę składnię i zauważ, czego w niej nie ma: nie ma środka okręgu ani kąta początkowego i końcowego. A przecież tak właśnie opisuje się łuk w każdym normalnym API do rysowania.

Powód jest taki, że A musi pasować do reszty path. Każda komenda ścieżki mówi „dojedź stąd tam" — pióro zawsze wie, gdzie stoi, i dostaje punkt docelowy. Gdyby łuk podawał środek i kąty, wypadłby z tego schematu i nie dałoby się go sensownie doklejać do reszty ścieżki.

Cena jest taka, że sam punkt startu, punkt końca i promienie nie wystarczają, żeby jednoznacznie określić łuk. Przez dwa punkty na płaszczyźnie można poprowadzić cztery różne łuki o tych samych promieniach: krótszy i dłuższy, każdy z nich po jednej albo po drugiej stronie.

I stąd biorą się dwie flagi. Nie są kaprysem — są koniecznym rozstrzygnięciem, które z tych czterech rozwiązań masz na myśli.

Dwie flagi

• large-arc-flag — 0 to krótszy łuk, 1 to dłuższy
• sweep-flag — 0 to obrót przeciwnie do wskazówek zegara, 1 to zgodnie

Szare linie to wszystkie cztery możliwe łuki przez te same dwa punkty. Pomarańczowy to ten, który wybierają aktualne flagi. Przełącz jedną i drugą, żeby zobaczyć, że każda kombinacja trafia w inny szary łuk — i że nie ma piątej opcji.

To jest cała tajemnica. Gdy następnym razem łuk wyjdzie „w drugą stronę" albo „za długi", nie licz nic od nowa. Zmień jedną z dwóch flag i sprawdź, czy to nie ta.

Pułapka: pełne koło

Częsty przypadek: chcesz narysować okrąg jednym path, na przykład jako obwódkę wykresu kołowego. Wpisujesz łuk z tego samego punktu do tego samego punktu i nie dostajesz nic.

To nie błąd. Skoro A prowadzi od bieżącej pozycji do punktu docelowego, a oba są tym samym miejscem, to droga ma długość zero i przeglądarka słusznie nic nie rysuje.

Pełne koło z łuków składa się więc z dwóch połówek:

M 100 40
A 60 60 0 1 1 100 160
A 60 60 0 1 1 100 40

W praktyce, jeśli po prostu potrzebujesz okręgu, użyj <circle> z lekcji drugiej. A sięgaj wtedy, gdy łuk jest fragmentem większej ścieżki — wycinkiem koła w wykresie, zaokrągleniem wskaźnika, obrysem, który przechodzi z prostej w łuk i z powrotem.

Kiedy w ogóle tego użyjesz

Szczerze: rzadziej, niż się wydaje. Zaokrąglone narożniki załatwia rx w <rect>. Miękkie przejścia załatwia C. Koło załatwia <circle>.

A przydaje się w trzech konkretnych sytuacjach: wycinki wykresu kołowego, łuki wskaźników i pierścieni postępuoraz kształty, które muszą mieć dokładny promień — bo klient poprosił o obrys o promieniu 12 jednostek, a nie o coś, co tak wygląda.

Warto ją znać także dlatego, że pojawia się w cudzych plikach i w eksporcie z programów graficznych. Gdy zobaczysz ciąg siedmiu liczb po literze A, będziesz wiedział, że pięć pierwszych opisuje elipsę, a dwie ostatnie mówią, dokąd zmierzasz.

Podsumowanie

• A rysuje wycinek elipsy — dokładny, w przeciwieństwie do przybliżeń z krzywych Béziera.
• Siedem argumentów: dwa promienie, obrót elipsy, dwie flagi, punkt docelowy.
• Obrót ma znaczenie tylko przy różnych promieniach.
• Za małe promienie są po cichu powiększane, bez ostrzeżenia.
• Flagi istnieją dlatego, że przez dwa punkty przechodzą cztery łuki o tych samych promieniach. Wybierają jeden z nich.
• Łuk z punktu do tego samego punktu nie rysuje nic. Pełne koło to dwie połówki.

To koniec path. Umiesz już wszystko, co potrzebne, żeby przeczytać dowolną ścieżkę w dowolnym pliku SVG. W następnym bloku zajmiemy się tym, jak te kształty wyglądają — zaczynając od wypełnienia i obrysu, które do tej pory wpisywaliśmy bez zastanowienia.

Do wypróbowania: w presecie path · flagi zmień oba punkty tak, żeby leżały bliżej siebie niż średnica — na przykład końcowy na 100 110. Potem zwiększaj promienie i patrz, jak cztery łuki rozjeżdżają się coraz bardziej. Przy dużych promieniach krótszy łuk robi się prawie prosty, a dłuższy obiega prawie cały okrąg.