18

Link: Official SVG Reference

Hello men and women, I am having some trouble with shorthand (defined by S or s in pathdata) bezier curves defined as SVG paths. Specifically, how to calculate the first control point.

Say we have one curveto command with control points (X1, Y1) and (X2, Y2), endpoint (X3, Y3) and starting point (X0, Y0).

Next comes a shorthand/smooth curve command with a first control point (X4, Y4) and second control point (X5, Y5). Assume everything is in absolute coordinates for simplicity.

How would one calculate the unknown first control point (X4, Y4) from the other known points?

Adam S
  • 8,665
  • 17
  • 63
  • 98
  • possible duplicate of [How to find control points for a BezierSegment given Start, End, and 2 Intersection Pts in C# - AKA Cubic Bezier 4-point Interpolation](http://stackoverflow.com/questions/2315432/how-to-find-control-points-for-a-beziersegment-given-start-end-and-2-intersecti) – Gabe Mar 13 '11 at 05:22

3 Answers3

22

Your first point is the last point of the previous curve. In this case it would be (x3, y3). Then your second point in the short hand is the terminating point for the length of the curve the shorthand represents.

If we are to translate your paths into both full length versions we would have:

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

Where XR, YR is the reflection of the last control point of the previous curve about the first point of the current curve.

XR, YR is just the reflection of P2 about P3 so:

XR = 2*X3 - X2 and 
YR = 2*Y3 - Y2
KeatsKelleher
  • 9,572
  • 4
  • 42
  • 50
  • There's no misunderstanding, I just called my first control point for the second curve (X4,Y4) and you called it (XR,YR) instead. – Adam S Mar 13 '11 at 18:13
2

you can treat the last control point from the last curve and the end point of the last curve( which is the first point in the new curve) as a line, and the mirrored control point should lie on that line at a distance equal to the distance from the last control point to the last end point

zeacuss
  • 2,523
  • 2
  • 28
  • 32
0

I found this. The shortest answer I can cite from it is:

We join the anchor points surrounding the start and the end anchor points with a line (let’s call these the opposed-lines):

opposed-lines

For the line to be smooth, the position of each control point has to be relative to its opposed-line:

  • The control point is on a line parallel to the opposed-line, and tangent to the current anchor point.
  • On this tangent line, the distance from the anchor point to the control point depends on the length of the opposed-line and an arbitrary smoothing ratio.
  • The start control point goes in the same direction as the opposed-line, while the end control point goes backward.
// 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

My interpretation:

  • Calculate the 2 control points for each pair of "anchor" (actual curve) points.
  • If points 1 (start/end - 1) and 2 (start + 1/end) are being calculated:
    • The first control point runs from point 1 (start) parallel to { the line going from point 0 (start - 1) to point 2 (start + 1) }.
    • The second control point runs backwards from point 2 (end) parallel to { the line going from point 1 (end - 1) to point 3 (end + 1) }.
  • The distance from the point 1 or 2 to the corresponding control point is a ratio of the desired smoothness variable (0.0 - 1.0) of the curve to the length of the parallel lines. (You can use basic trig, i.e. cos() and sin() for the angles.)
  • In the case of the end points (which have no point before/after them), replace start - 1 with start or end + 1 with end.
Andrew
  • 4,757
  • 1
  • 43
  • 62