Jak ustawić uchwyty krzywych Béziera za pomocą dokładnych współrzędnych w Inkscape

Pola współrzędnych narzędzia Węzły zmieniają położenie zaznaczonego węzła. Uchwyt Béziera to osobny punkt kontrolny, który kształtuje krzywą obok tego węzła. Wpisanie zamierzonych współrzędnych uchwytu na pasku narzędzi zmienia więc niewłaściwy element geometrii. W przewodniku dla początkujących Inkscape wyraźnie opisano te pola jako współrzędne zaznaczonego węzła. Opcje narzędzia Węzły

Użyj narzędzia Węzły, aby wizualnie rozpoznać krzywą: naciśnij N, zaznacz ścieżkę i wybierz węzeł. Jego uchwyty są widoczne jako małe kółka połączone z węzłem cienkimi liniami. To właśnie te kółka wskazują punkty, których położenie liczbowe będziesz edytować. Edycja ścieżek za pomocą narzędzia Węzły

Segment sześcienny Béziera ma węzeł początkowy, dwa punkty kontrolne i węzeł końcowy. W danych ścieżki SVG węzeł początkowy pochodzi z poprzedniego polecenia. Następująca po nim wielka litera C podaje kolejno oba punkty kontrolne i punkt końcowy. W3C: Polecenia krzywej sześciennej Béziera

Rozważ tę przykładową wartość atrybutu d:

M 40 120 C 40 40 200 40 200 120

Odczytaj liczby w następujący sposób:

Część	Współrzędne	Znaczenie
M 40 120	(40, 120)	Węzeł początkowy
Pierwsza para po C	(40, 40)	Uchwyt wychodzący z węzła początkowego
Druga para po C	(200, 40)	Uchwyt wchodzący do węzła końcowego
Trzecia para po C	(200, 120)	Węzeł końcowy

Praktyczna zasada: przed edycją podziel sześć wartości po C na trzy pary. Aby przesunąć jeden uchwyt bez zmiany położenia obu węzłów, zmień tylko jego parę. W samouczku SVG serwisu MDN opisano tę samą kolejność i wyjaśniono, jak punkty kontrolne określają kierunek krzywej przy każdym z jej końców. MDN: Ścieżki

Na pierwszą, kontrolowaną próbę użyj tego kompletnego dokumentu SVG. Zapisz go w edytorze zwykłego tekstu jako exact-curve.svg, a następnie otwórz w Inkscape. Zawiera jedną zwykłą ścieżkę, bez grup, transformacji i efektów ścieżki.

<svg xmlns="http://www.w3.org/2000/svg"
     width="240" height="160"
     viewBox="0 0 240 160">
  <path id="curve"
        d="M 40 120 C 40 40 200 40 200 120"
        fill="none"
        stroke="black"
        stroke-width="2" />
</svg>

Strukturę XML przykładu i poniższe obliczenia współrzędnych sprawdzono za pomocą Pythona. Nie wykonano samych czynności w aplikacji.

1. Zaznacz krzywą w Inkscape.
2. Otwórz Edytor XML skrótem Ctrl+Shift+X, który jest domyślnym, udokumentowanym skrótem.
3. W drzewie XML zaznacz element ścieżki oznaczony jako id="curve".
4. Zaznacz jego atrybut d i edytuj jego wartość.
5. Zastosuj wartość skrótem Ctrl+Enter lub przyciskiem Ustaw atrybut w oknie dialogowym. Polecenia te opisano w dokumentacji skrótów Inkscape. Dokumentacja skrótów klawiaturowych i myszy w Inkscape

Na przykład zmień położenie pierwszego uchwytu z (40, 40) na (70, 30), wpisując tę wartość atrybutu:

M 40 120 C 70 30 200 40 200 120

Wklej do pola wartości tylko ciąg danych ścieżki — bez d=, cudzysłowów ani całego elementu <path>. Pozostaw bez zmian parę początkową, parę drugiego punktu kontrolnego i parę końcową. Dzięki temu edytujesz tylko jeden uchwyt, co łatwo sprawdzić.

Wróć do narzędzia Węzły i zaznacz węzeł początkowy. Sprawdź wzrokowo nowy kierunek uchwytu, a następnie ponownie obejrzyj wartość d, aby zweryfikować ją liczbowo. W istniejącym konturze z wieloma segmentami zachowaj sąsiadujące polecenia i edytuj tylko odpowiednią parę punktów kontrolnych. Zastąpienie całego atrybutu tym krótkim przykładem spowodowałoby zastąpienie całego konturu.

Współrzędne danych ścieżki są wyrażone w jednostkach użytkownika SVG. Atrybut viewBox dokumentu i jego transformacje określają, jak te jednostki przekładają się na widoczny rysunek. Początek początkowego układu współrzędnych SVG znajduje się w lewym górnym rogu; wartości X rosną w prawo, a Y — w dół. W3C: Układy współrzędnych, transformacje i jednostki

W podanym przykładzie obszar widoku o wymiarach 240 × 160 oraz viewBox="0 0 240 160" zapewniają proste odwzorowanie. Przesunięcie z (40, 40) do (70, 30) umieszcza punkt kontrolny o 30 jednostek dalej w prawo i o 10 jednostek wyżej. To przykładowe współrzędne projektowe, a nie zalecenie dotyczące konkretnego kształtu postaci.

W istniejącym dokumencie sprawdź ścieżkę i jej grupy nadrzędne pod kątem atrybutów transform, zanim uznasz lokalne współrzędne za położenie na stronie. Przykładowo pojedyncza transformacja translate(30,20) odwzorowuje lokalny uchwyt w położeniu (70,30) na położenie (100,50) w układzie współrzędnych elementu nadrzędnego. Aby w wyniku tej translacji uzyskać (100,50), wpisz lokalnie (70,30). W przypadku skalowania, obrotu i dodatkowych transformacji elementów nadrzędnych trzeba uwzględnić całe odwzorowanie. W3C: Układy współrzędnych i transformacje

Mała litera c zapisuje przesunięcia względem punktu początkowego segmentu. Wszystkie trzy pary odnoszą się do tego samego punktu początkowego; nie są to kolejne przesunięcia liczone od jednego punktu kontrolnego do następnego. Wielka litera C zapisuje współrzędne bezwzględne w bieżącym układzie współrzędnych użytkownika. W3C: Polecenia krzywej sześciennej Béziera

W pierwotnym przykładzie odejmij węzeł początkowy (40,120) od każdego kolejnego punktu:

Punkt	Położenie bezwzględne	Przesunięcie względne
Pierwszy uchwyt	(40,40)	(0,-80)
Drugi uchwyt	(200,40)	(160,-80)
Punkt końcowy	(200,120)	(160,0)

Równoważna wartość atrybutu wygląda więc tak:

M 40 120 c 0 -80 160 -80 160 0

Nie zmieniaj samej wielkości litery w c, pozostawiając te liczby: zmieniłoby to ich znaczenie. Podczas edycji dłuższej ścieżki względnej najpierw oblicz punkt początkowy bieżącego segmentu.

Segment S pomija pierwszy punkt kontrolny. Po segmencie sześciennym SVG wyznacza ten punkt przez odbicie ostatniego punktu kontrolnego poprzedniego segmentu względem wspólnego węzła. Aby niezależnie określić oba punkty kontrolne, rozwiń skrócone polecenie do jawnego segmentu C, początkowo zachowując obliczony pierwszy punkt kontrolny. MDN: Ścieżki

Typy węzłów w Inkscape ograniczają późniejszą edycję za pomocą myszy. Węzły narożne pozwalają niezależnie przesuwać uchwyty. W węzłach gładkich oba uchwyty i węzeł leżą na jednej linii. Węzły symetryczne dodatkowo utrzymują równe odległości między węzłem a uchwytami. Węzły automatycznie wygładzane automatycznie dostosowują długości uchwytów, gdy przesuwasz węzeł. Informacje o typach węzłów

Przed ostatecznym numerycznym ustawieniem uchwytów wybierz zamierzone zachowanie węzła. Jeśli chcesz niezależnie określić położenie punktów kontrolnych, przydatnym wyborem jest węzeł narożny. W przypadku płynnego połączenia zaplanuj zgodne współrzędne po obu stronach wspólnego węzła, a po zmianie typu węzła sprawdź wartości końcowe.

Załóżmy na przykład, że wspólny węzeł znajduje się w położeniu (200,120), a przychodzący punkt kontrolny — w (200,40). Wychodzący punkt kontrolny w położeniu (200,200) jest jego odbiciem względem tego węzła: 2 × (200,120) − (200,40). To przykładowe obliczenie daje równe, przeciwne wektory uchwytów. Pozwala konkretnie sprawdzić współrzędne symetrycznego połączenia.

Wykonaj kolejno następujące czynności kontrolne:

1. Sprawdź element. Przed zmianą atrybutu sprawdź identyfikator zaznaczonej ścieżki.
2. Wskaż parę. W razie potrzeby zaznacz na papierze węzeł początkowy, pierwszy punkt kontrolny, drugi punkt kontrolny i punkt końcowy.
3. Odczytaj literę polecenia. Ustal, czy jego liczby oznaczają współrzędne bezwzględne, względne czy skrócone polecenie.
4. Sprawdź odwzorowanie współrzędnych. Sprawdź viewBox, transformację ścieżki i transformacje jej elementów nadrzędnych.
5. Sprawdź późniejszą edycję. Ponownie sprawdź współrzędne po przeciągnięciu uchwytów lub zmianie typów węzłów.
6. Zachowaj pierwotną wartość. Skopiuj cały ciąg d, aby móc go przywrócić, jeśli edycja zmieni niezamierzone segmenty.

Podczas precyzyjnego dopracowywania konturu postaci na koniec sprawdź zarówno widoczny kontur, jak i zapisane współrzędne punktów kontrolnych. Gdy znasz już typ polecenia i układ współrzędnych, dokładne ustawienie uchwytu staje się niewielką, łatwą do prześledzenia zmianą: wskaż segment, zmień zamierzoną parę i sprawdź wynik.

• Opcje narzędzia Węzły — przewodnik dla początkujących Inkscape
• Edycja ścieżek za pomocą narzędzia Węzły — przewodnik dla początkujących Inkscape
• Informacje o typach węzłów — przewodnik dla początkujących Inkscape
• Dokumentacja skrótów klawiaturowych i myszy w Inkscape — źródło dokumentacji
• Ścieżki — SVG 2, W3C
• Układy współrzędnych, transformacje i jednostki — SVG 2, W3C
• Ścieżki — MDN Web Docs