Bézier-handgrepen met exacte coördinaten positioneren in Inkscape

De coördinatenvelden van het knooppuntgereedschap wijzigen de positie van een geselecteerd knooppunt. Een Bézier-handgreep is een afzonderlijk controlepunt dat de curve naast dat knooppunt vormgeeft. Als u de gewenste coördinaten van de handgreep in de werkbalk invoert, wijzigt u dus het verkeerde deel van de geometrie. De Inkscape Beginners’ Guide beschrijft deze velden expliciet als coördinaten van het geselecteerde knooppunt. Opties van het knooppuntgereedschap

Gebruik het knooppuntgereedschap om de curve visueel te identificeren: druk op N, selecteer het pad en selecteer een knooppunt. De handgrepen verschijnen als kleine cirkels die met dunne lijnen aan het knooppunt zijn verbonden. Dit zijn de punten waarvan u de numerieke posities gaat bewerken. Paden bewerken met het knooppuntgereedschap

Een kubisch Bézier-segment heeft een beginknooppunt, twee controlepunten en een eindknooppunt. In SVG-padgegevens komt het beginknooppunt uit de voorgaande opdracht. Een hoofdletter C geeft vervolgens de twee controlepunten en het eindpunt op, in die volgorde. W3C: Kubische Bézier-curveopdrachten

Neem deze illustratieve waarde van het d-attribuut:

M 40 120 C 40 40 200 40 200 120

Lees de getallen als volgt:

Onderdeel	Coördinaten	Betekenis
M 40 120	(40, 120)	Beginknooppunt
Eerste paar na C	(40, 40)	Uitgaande handgreep van het beginknooppunt
Tweede paar na C	(200, 40)	Inkomende handgreep van het eindknooppunt
Derde paar na C	(200, 120)	Eindknooppunt

De praktische vuistregel is om de zes waarden na C in drie paren te verdelen voordat u iets bewerkt. Als u één handgreep wilt verplaatsen en beide knooppunten wilt behouden, wijzigt u alleen het bijbehorende paar. De SVG-tutorial van MDN documenteert dezelfde volgorde en legt uit hoe de controlepunten de richting van de curve bij elk eindpunt bepalen. MDN: Paden

Gebruik voor een gecontroleerde eerste poging dit volledige SVG-document. Sla het in een editor voor platte tekst op als exact-curve.svg en open het vervolgens in Inkscape. Het bevat één gewoon pad zonder groepen, transformaties of padeffecten.

<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>

De XML-structuur van het voorbeeld en de coördinaatberekeningen hieronder zijn gecontroleerd met Python. De interactie in de desktopapplicatie is niet uitgevoerd.

1. Selecteer de curve in Inkscape.
2. Open de XML-editor met Ctrl+Shift+X, de gedocumenteerde standaardsneltoets.
3. Selecteer het padelement met de ID id="curve" in de XML-structuur.
4. Selecteer het d-attribuut en bewerk de waarde ervan.
5. Pas de waarde toe met Ctrl+Enter of met de knop Attribuut instellen in het dialoogvenster. Deze opdrachten staan in Inkscapes eigen sneltoetsreferentie. Sneltoets- en muisreferentie van Inkscape

Wijzig bijvoorbeeld de eerste handgreep van (40, 40) in (70, 30) door deze attribuutwaarde in te voeren:

M 40 120 C 70 30 200 40 200 120

Plak alleen de padgegevensreeks in het waardevak, niet d=, aanhalingstekens of een volledig <path>-element. Laat het beginknooppuntpaar, het tweede controlepuntpaar en het eindpuntpaar ongewijzigd. Zo kunt u deze bewerking van één handgreep eenvoudig controleren.

Schakel terug naar het knooppuntgereedschap en selecteer het beginknooppunt. Controleer visueel de nieuwe richting van de handgreep en bekijk daarna opnieuw de waarde d om de getallen te controleren. Behoud bij een bestaande contour met meerdere segmenten de omliggende opdrachten en bewerk alleen het relevante controlepuntpaar; als u het hele attribuut door dit korte voorbeeld vervangt, wordt de volledige contour vervangen.

Coördinaten in padgegevens gebruiken SVG-gebruikerseenheden. Het viewBox en de transformaties van een document bepalen hoe deze eenheden worden omgezet naar de zichtbare tekening. Het oorspronkelijke SVG-coördinatenstelsel heeft de oorsprong linksboven, waarbij X naar rechts toeneemt en Y naar beneden. W3C: Coördinatenstelsels, transformaties en eenheden

In het meegeleverde voorbeeld zorgen het venster van 240 × 160 en viewBox="0 0 240 160" voor een eenvoudige omzetting. De verplaatsing van (40, 40) naar (70, 30) plaatst het controlepunt 30 eenheden verder naar rechts en 10 eenheden hoger. Dit zijn illustratieve ontwerpcoördinaten, geen voorschrift voor een specifieke vorm van een personage.

Controleer bij een bestaand document de transform-attributen van het pad en de bovenliggende groepen voordat u de lokale coördinaten als paginaposities beschouwt. Ter illustratie: één losse translate(30,20) zet een lokale handgreep op (70,30) om naar (100,50) in het coördinatenstelsel van het bovenliggende element. Als u onder die translatie (100,50) wilt bereiken, voert u lokaal (70,30) in. Bij schalen, roteren en aanvullende transformaties van voorouders moet u rekening houden met de volledige omzetting. W3C: Coördinatenstelsels en transformaties

Kleine letters c slaan verschuivingen op ten opzichte van het beginpunt van het segment. Alle drie de paren gebruiken hetzelfde beginpunt; het zijn geen opeenvolgende verplaatsingen van het ene controlepunt naar het volgende. Hoofdletters C slaan absolute coördinaten op in het huidige gebruikerscoördinatenstelsel. W3C: Kubische Bézier-curveopdrachten

Trek voor het oorspronkelijke voorbeeld het beginknooppunt (40,120) af van elk volgend punt:

Punt	Absolute positie	Relatieve verschuiving
Eerste handgreep	(40,40)	(0,-80)
Tweede handgreep	(200,40)	(160,-80)
Eindpunt	(200,120)	(160,0)

De equivalente attribuutwaarde is dus:

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

Maak niet simpelweg van c een hoofdletter terwijl u deze getallen behoudt: daarmee verandert hun betekenis. Bereken bij het bewerken van een langer relatief pad eerst het beginpunt van het huidige segment.

Bij een S-segment ontbreekt het eerste controlepunt. Na een kubisch segment leidt SVG dit controlepunt af door het laatste controlepunt van het voorgaande segment te spiegelen over hun gedeelde knooppunt. Als u beide controlepunten afzonderlijk wilt opgeven, zet u de verkorte opdracht om in een expliciete C-opdracht, waarbij u het berekende eerste controlepunt aanvankelijk behoudt. MDN: Paden

De knooppunttypen van Inkscape leggen beperkingen op aan latere interactieve bewerkingen. Bij hoekige knooppunten kunnen de handgrepen onafhankelijk worden verplaatst. Bij vloeiende knooppunten liggen beide handgrepen en het knooppunt op één lijn. Bij symmetrische knooppunten zijn de handgrepen bovendien even lang. Automatisch vloeiende knooppunten passen de lengte van hun handgrepen automatisch aan wanneer het knooppunt wordt verplaatst. Over knooppunttypen

Kies het gewenste gedrag van het knooppunt voordat u de definitieve numerieke plaatsing bepaalt. Voor onafhankelijk opgegeven controlepunten is een hoekig knooppunt een handige keuze. Plan voor een vloeiende aansluiting compatibele coördinaten aan beide kanten van het gedeelde knooppunt en controleer daarna de uiteindelijke waarden nadat u het knooppunttype hebt gewijzigd.

Stel bijvoorbeeld dat een gedeeld knooppunt op (200,120) ligt en het inkomende controlepunt op (200,40). Een uitgaand controlepunt op (200,200) is de spiegeling daarvan over dat knooppunt: 2 × (200,120) − (200,40). Deze illustratieve berekening geeft even lange, tegengestelde handgreepvectoren. Zo kunt u de coördinaten van een symmetrische aansluiting concreet controleren.

Voer deze controles in deze volgorde uit:

1. Controleer het element. Controleer de ID van het geselecteerde pad voordat u het attribuut wijzigt.
2. Identificeer het paar. Noteer indien nodig op papier het beginknooppunt, het eerste controlepunt, het tweede controlepunt en het eindpunt.
3. Lees de opdrachtletter. Bepaal of de getallen absoluut, relatief of verkort zijn.
4. Controleer de coördinatenomzetting. Bekijk het viewBox, de padtransformatie en de transformaties van bovenliggende elementen.
5. Controleer latere bewerkingen. Bekijk de coördinaten opnieuw nadat u handgrepen hebt versleept of knooppunttypen hebt gewijzigd.
6. Bewaar de oorspronkelijke waarde. Bewaar een kopie van de volledige d-reeks, zodat u die kunt terugzetten als een bewerking onbedoelde segmenten wijzigt.

Controleer bij nauwkeurig werk aan de contour van een personage tot slot zowel de zichtbare contour als de opgeslagen coördinaten van de controlepunten. Zodra het opdrachttype en het coördinatenstelsel duidelijk zijn, is het exact plaatsen van een handgreep een kleine, controleerbare bewerking: identificeer het segment, wijzig het gewenste paar en controleer het resultaat.

• Opties van het knooppuntgereedschap — Inkscape Beginners’ Guide
• Paden bewerken met het knooppuntgereedschap — Inkscape Beginners’ Guide
• Over knooppunttypen — Inkscape Beginners’ Guide
• Sneltoets- en muisreferentie van Inkscape — documentatiebron
• Paden — SVG 2, W3C
• Coördinatenstelsels, transformaties en eenheden — SVG 2, W3C
• Paden — MDN Web Docs