Krzywe Béziera w SVG: usuń załamanie bez dodawania węzłów

Aby usunąć niezamierzone załamanie w miejscu, w którym łączą się dwa zwykłe segmenty krzywych Béziera trzeciego stopnia, pozostaw ich wspólny punkt kotwiczący na miejscu i ustaw przylegające do niego uchwyty na jednej prostej, po przeciwnych stronach tego punktu. Uchwyty mogą mieć różne długości, a krzywe nadal mogą mieć wspólny kierunek stycznej. Równe uchwyty odbite symetrycznie narzucają dodatkowy warunek; nie są wymagane dla każdego połączenia, które wizualnie wygląda gładko.

Zanim wprowadzisz tę zmianę, sprawdź kształt źródłowy. Ostry czubek liścia, wcięcie lub narożnik litery mogą być zamierzone. Poniższa naprawa dotyczy jednej niepożądanej zmiany kierunku, przy zachowaniu położenia początku, połączenia i końca oraz liczby segmentów.

Znajdź dwa uchwyty, które kontrolują połączenie

Polecenie SVG dla krzywej trzeciego stopnia zawiera dwa punkty kontrolne i punkt końcowy:

C firstControlX firstControlY secondControlX secondControlY endX endY

Segment zaczyna się w bieżącym punkcie. Jego pierwszy punkt kontrolny wyznacza kierunek wyjścia z początku, a drugi — kierunek dojścia do punktu końcowego. MDN paths tutorial ilustruje te punkty kontrolne i składnię krzywej trzeciego stopnia. W przypadku par współrzędnych w poleceniach zapisanych małymi literami skorzystaj z poradnika względnych poleceń ścieżek SVG, aby przed zmianą uchwytów ustalić punkt odniesienia.

Przy wspólnym punkcie kotwiczącym sprawdź ostatni punkt kontrolny poprzedniego segmentu i pierwszy punkt kontrolny następnego segmentu. Jeśli te uchwyty wskazują kierunki wzdłuż różnych prostych, połączenie zmienia kierunek. Samo dodanie kolejnego węzła w pobliżu nie rozwiązuje tego problemu.

Napraw oryginalny przykład z dwoma segmentami

Zapisz ten kompletny plik SVG jako join-example.svg i otwórz go w przeglądarce. To autorski zakrzywiony znak z celowo wprowadzonym załamaniem w punkcie (150, 100).

<svg xmlns="http://www.w3.org/2000/svg" width="900" height="600"
     viewBox="0 0 300 200">
  <path fill="none" stroke="#137f74" stroke-width="5"
    d="M30 150 C60 150 100 100 150 100
       C170 50 240 50 270 50"/>
</svg>

Wejściowy punkt kontrolny to (100, 100), bezpośrednio na lewo od połączenia. Wyjściowy punkt kontrolny to (170, 50), powyżej połączenia i na prawo od niego. Krzywa dochodzi do połączenia poziomo, a wychodzi z niego w innym kierunku.

Zmień tylko pierwszy punkt kontrolny drugiego segmentu na (175, 100):

<path fill="none" stroke="#137f74" stroke-width="5"
  d="M30 150 C60 150 100 100 150 100
     C175 100 240 50 270 50"/>

Oba przylegające uchwyty leżą teraz na poziomej prostej przechodzącej przez połączenie. Uchwyt wejściowy ma długość 50 jednostek, a wyjściowy — 25. Kierunek stycznej jest zgodny mimo różnicy długości.

Aby uzyskać parę odbitą symetrycznie, zmień ten punkt kontrolny na (200, 100). Oba uchwyty będą wtedy miały długość 50 jednostek, mierzoną od wspólnego punktu kotwiczącego. Ta zmiana wpływa na kształt drugiego segmentu bardziej niż edycja z uchwytami o różnej długości, więc porównaj obie wersje z konturem, który chcesz zachować.

Każda wersja ma dwa segmenty krzywych trzeciego stopnia i trzy punkty kotwiczące leżące na krzywej: początek, połączenie i koniec. Punkty kontrolne mają osobne współrzędne. Porównanie jest autorskim renderem wykonanym w przeglądarce, a nie wynikiem wektoryzacji w PerfectVector ani zrzutem ekranu narzędzia do edycji węzłów.

Sprawdzaj kierunek niezależnie od długości uchwytów

Dla krzywej trzeciego stopnia kończącej się w punkcie połączenia J, której ostatni punkt kontrolny to A, pochodna w punkcie końcowym wynosi 3 × (J − A). Następna krzywa trzeciego stopnia, zaczynająca się w J i mająca pierwszy punkt kontrolny B, ma pochodną początkową 3 × (B − J).

W naszym przykładzie pochodna wejściowa wynosi (150, 0) na każdym panelu:

Zgodność kierunków stycznych nazywa się ciągłością G1. Zgodność pierwszych pochodnych to ciągłość C1, przy zastosowaniu zwykłego przedziału parametru od zera do jednego dla każdej z tych dwóch krzywych trzeciego stopnia. Materiał Michigan Tech Bézier derivative notes przedstawia wyprowadzenie tych warunków dla punktów końcowych.

Test kierunku zakłada niezerowe pochodne w punktach końcowych. Uchwyt o zerowej długości, którego punkt kontrolny pokrywa się z punktem kotwiczącym, wymaga osobnego sprawdzenia, ponieważ jego pierwsza pochodna wynosi zero. Sama współliniowość również nie wystarcza, jeśli oba uchwyty znajdują się po tej samej stronie połączenia: kierunek przebiegu krzywej może się odwrócić.

Żaden z przykładów z wyrównanymi uchwytami nie gwarantuje zgodnej krzywizny po obu stronach połączenia. Krzywa może nie mieć załamania stycznej, a mimo to wymagać zmiany kształtu, aby odpowiadać zamierzonej sylwetce logo. Sprawdź całe wygięcie, a nie tylko wybrany węzeł.

Używaj S tylko wtedy, gdy chcesz uzyskać kształt wynikający z odbicia symetrycznego

Wersję z odbiciem symetrycznym można zapisać krócej:

<path fill="none" stroke="#137f74" stroke-width="5"
  d="M30 150 C60 150 100 100 150 100
     S240 50 270 50"/>

Tutaj S wyznacza pierwszy punkt kontrolny przez odbicie symetryczne ostatniego punktu kontrolnego poprzedniej krzywej trzeciego stopnia względem bieżącego punktu:

reflectedX = 2 × 150 − 100 = 200
reflectedY = 2 × 100 − 100 = 100

Pozostałe pary w S240 50 270 50 określają drugi punkt kontrolny i punkt końcowy. Jest to wersja z uchwytami odbitymi symetrycznie o długościach 50/50. Nie można nią zastąpić wersji 50/25 bez zmiany krzywej.

SVG cubic-command specification ogranicza tę regułę odbicia do sytuacji, w których poprzednim poleceniem jest C, c, S lub s. Jeśli poprzednie polecenie opisuje linię albo krzywą drugiego stopnia, domyślnym pierwszym punktem kontrolnym jest zamiast tego bieżący punkt.

Na przykład:

M30 150 L150 100 S240 50 270 50

Po linii ten ostatni segment zachowuje się jak C150 100 240 50 270 50. Jego pierwszy uchwyt ma zerową długość i pokrywa się z początkiem. Segment nadal może się wyginać, ponieważ pozostała geometria punktów kontrolnych nie jest współliniowa; S po linii nie wymusza prostego segmentu.

W naszym sprawdzeniu w przeglądarce porównaliśmy ścieżkę z odbiciem symetrycznym zapisaną za pomocą S z jej jawnym odpowiednikiem używającym C, a następnie sprawdziliśmy ten przykład z linią i następującym po niej S względem jego własnego jawnego rozwinięcia. Oba porównania dały zgodne wyniki w próbkowanych pozycjach. Potwierdza to te przykłady, natomiast ogólną regułę określa specyfikacja.

Wykonaj tę samą naprawę w edytorze węzłów

Pracuj na kopii, zaznacz ścieżkę i pokaż uchwyty wokół podejrzanego połączenia. Upewnij się, że jest tam jeden wspólny punkt kotwiczący. Dwa osobne punkty końcowe, które jedynie się nakładają, mogą wymagać naprawy topologii przed zmianą kierunków uchwytów.

Poradnik Inkscape node-type guide rozróżnia węzły gładkie, których uchwyty leżą na jednej prostej, oraz węzły symetryczne, których uchwyty dodatkowo zachowują równą długość. Użyj typu węzła pasującego do konturu, zamiast wymuszać symetrię każdego połączenia.

Podczas zmiany kierunku uchwytu pozostaw punkt kotwiczący na miejscu. Następnie skróć lub wydłuż uchwyty, aby przywrócić zamierzony kształt wokół połączenia. Porównaj wynik zarówno przy dużym powiększeniu, jak i w normalnym rozmiarze wyświetlania, a następnie ponownie otwórz zapisany plik SVG, aby sprawdzić wyeksportowaną ścieżkę.

Jeśli punkty kotwiczące są gęsto rozmieszczone na całym wygięciu ścieżki, lokalna edycja uchwytów może nie wystarczyć. Poradnik dotyczący liczby węzłów w SVG omawia upraszczanie, a przewodnik po edycji SVG — szerszy zakres zmian. Podczas obu operacji zachowaj zamierzone narożniki.

Porównaj naprawiony kształt ze źródłem

Gładkie połączenie to jeden z elementów kontroli jakości. Nie dowodzi, że zwektoryzowane logo odpowiada oryginałowi. Porównaj jego sylwetkę, prześwity i zamierzone narożniki, korzystając z listy kontrolnej jakości wektoryzacji.

Jeśli masz tylko plik PNG lub JPG ze znakiem, narzędzie PerfectVector do wektoryzacji logo może przygotować wstępną, edytowalną wersję SVG. Sprawdź jej kontury, a następnie lokalnie popraw uchwyty tam, gdzie pozostało niezamierzone załamanie. Trzymaj rastrowy obraz odniesienia obok edytowanej ścieżki, aby wygładzanie nie usunęło cechy, którą chcesz zachować.

Jeśli masz dostęp do istniejącego wzorcowego pliku wektorowego, użyj go. Konieczność wiernego odtworzenia geometrii znaku marki lub mocno uszkodzony materiał źródłowy mogą wymagać ręcznej rekonstrukcji; poradnik wektoryzacji logo wyjaśnia ten wybór. Korekta jednego połączenia jest przydatna, gdy reszta konturu jest już odpowiednia.

Często zadawane pytania

Czy oba uchwyty krzywej Béziera muszą mieć tę samą długość, aby połączenie było gładkie? Nie. Niezerowe uchwyty mogą mieć różne długości i jednocześnie wyznaczać ten sam kierunek stycznej. Przy wspólnym punkcie kotwiczącym powinny leżeć na jednej prostej, po przeciwnych stronach. Równe uchwyty odbite symetrycznie zapewniają dodatkowo zgodność pierwszych pochodnych dla dwóch segmentów krzywych trzeciego stopnia użytych tutaj.

Dlaczego polecenie SVG S zmienia moją krzywą? S wyznacza swój pierwszy punkt kontrolny. Po C lub S odbija symetrycznie ostatni punkt kontrolny poprzedniej krzywej trzeciego stopnia; po innych typach poleceń używa bieżącego punktu. Tak wyznaczony punkt może różnić się od jawnego punktu kontrolnego, którego chcesz użyć.

Czy wygładzić każdy węzeł w zwektoryzowanym logo? Nie. Zachowaj zamierzone narożniki, czubki i wcięcia. Napraw niezamierzone załamanie lokalnie, a następnie porównaj całą sylwetkę ze źródłem. Samo połączenie z ciągłością stycznej nie potwierdza dokładności rekonstrukcji.

Źródła

1. MDN — SVG paths — Wyjaśnia punkty kontrolne krzywych trzeciego stopnia i składnię poleceń ścieżek.
2. Michigan Tech — Bézier derivatives — Przedstawia wyprowadzenie stycznych w punktach końcowych i warunków łączenia krzywych.
3. W3C — SVG cubic Bézier commands — Definiuje regułę odbicia symetrycznego i zastępczy punkt kontrolny dla S.
4. Inkscape — Node types — Rozróżnia zachowanie węzłów ostrych, gładkich, symetrycznych i automatycznych.

Jeśli Twoje logo ma początkowo postać obrazu rastrowego, przygotuj wstępną wersję SVG w PerfectVector, sprawdź połączenia i sylwetkę, a następnie popraw tylko te krzywe, które tego wymagają, zachowując zamierzone narożniki.