Berechnen der Punkte für ein shorthand/smooth SVG-Pfad Bézier-Kurve

Ihrem ersten Punkt ist der Letzte Punkt der vorherigen Kurve. In diesem Fall wäre es (x3, y3). Dann Ihren zweiten Punkt in der kurzen hand ist die abschließende Punkt für die Länge der Kurve das Kürzel repräsentiert.

Wenn wir übersetzen Ihre Pfade in voller Länge Versionen, die wir haben würde:

M X0, Y0 C X1, Y1 X2, Y2 X3, Y3 
M X3, Y3 C XR, YR X4, Y4 X5, Y5 

Wobei XR, YR ist das Spiegelbild des letzten Kontrollpunkt von der vorherigen Kurve über den ersten Punkt der aktuellen Kurve.

XR, YR ist nur die Reflexion von P2 zu P3 so:

XR = 2*X3 - X2 and 
YR = 2*Y3 - Y2

Fand ich diese. Die kürzeste Antwort, die ich zitieren kann, ist es:

Begleiten wir die Ankerpunkte rund um die start-und Ende-Anker-Punkte mit einer Linie (nennen wir diese die opposed-lines):

Für die Linie zu glatt sein, die position jeder Kontrollpunkt hat
sein Verhältnis zu seiner opposed-line:

• Der Kontrollpunkt befindet sich auf einer Linie parallel zu der opposed-line und tangential zu den aktuellen Ankerpunkt.
• Auf dieser Linie, der Abstand von dem Ankerpunkt, den Steuerpunkt, hängt von der Länge der opposed-line und eine beliebige smoothing - Verhältnis.
• Die start-control-point geht in die gleiche Richtung wie die opposed-line, während die end-Kontrolle Punkt geht rückwärts.

//When 'current' is the first or last point of the array
//'previous' or 'next' don't exist.
//Replace with 'current'
const p = previous || current
const n = next || current

Meine interpretation:

• Berechnen Sie die 2 Punkte für jedes paar der "Anker" (ist-Kurve) Punkte.
• Wenn die Punkte 1 (start/end - 1) und 2 (start + 1/end) berechnet wird:
  • Dem ersten Kontrollpunkt verläuft von Punkt 1 (start) parallel zu { die Linie, die vom Punkt 0 (start - 1) zu Punkt 2 (start + 1) }.
  • Dem zweiten Kontrollpunkt nach hinten verläuft von Punkt 2 (end) parallel zu { der Linie von Punkt 1 (end - 1) zu Punkt 3 (end + 1) }.
• Die Entfernung von dem Punkt 1 oder 2 auf den entsprechenden control-point ist ein Verhältnis von der gewünschten Feinheit variable (0.0 - 1.0) der Kurve um die Länge der parallelen Linien. (Sie können verwenden Sie basic-trig, D. H. cos() und sin() für den Winkel.)
• Im Fall der end-Punkte (die haben keinen Punkt vor/nach Ihnen), ersetzen start - 1 mit start oder end + 1 mit end.