Getting the boundary of a Bezier curve

Question

I have points list and control points list to draw a Bezier curve. Please let me know how to calculate the boundary rectangle of the Bezier curve.

var pointsList = [CGPoint(34, 23), ... , CGPoint(23, 85)]
var controlPoints = [CGPoint(45, 34), ..., CGPoint(55, 99)]

Answer 1

Normally not really a hard problem, covered over on http://pomax.github.io/bezierinfo/#boundingbox:

1. Compute the x and y derivatives, which is super easy to do,
2. Find all roots (derivative=0) for both derivatives, let's call those the sets r{x} and r{y}, then
3. Compute the corresponding value sets bezier{x} and bezier{y} for those roots. Then,
4. Your bounding box has corners defined by the lowest and highest values min/max values in those sets.

In this, only step 2 might be a bit tricky if you're using high order bezier curves. Once your curve consists of more than four points, you can't use symbolic maths to find the roots and it's far easier to just run through the derivative curve and see where the resulting coordinates have a value close enough to zero to treat them as approximate root.

Your graphic looks like it's simply a series of connected cubic Bezier curves, in which case the root finding is easy (the derivatives will be quadratic curves, you learn how to find the roots for those in high school using the quadratic equation), and the box procedure is simply "compute the bounding box for each cubic curve section, and when you're done, the full bounding box simply uses the min/max values across all individual boxes".