原文链接：https://blog.sklambert.com/finding-the-control-points-of-a-bezier-curve/
I had an interesting problem while working on a web application using the Canvas to draw Bezier Curves. I had to find the two control points required to draw the curve when I only knew the start point, end point, and one other point on the curve. I couldn’t find anything on the internet so I thought I’d write an article on my findings.
Update September 16, 2014: While working on another project, I ran into the definitive way for finding the control points of a curve. I was looking into Chart.js and noticed that they used bezier curves between their data points in their line graph. I took at a look at their source code and found that they use a function to determine the curve between two points. They reference an article by Rob Spencer at scaled innovation for figuring out how to spline (curve) between points. My technique may have worked for my case, but this technique should work in most, if not all, cases.
This article is probably now deprecated in favor of this technique, but I’ll leave it’s content here for historical purposes.
Bezier Curves are very common in programming. They are used in graphics to create scalable vector graphics of curves, allowing the curve to remain smooth when scaled. When using the HTML5 Canvas, they are commonly used to draw ellipses. This was exactly what I was trying to do.
I needed to draw a curve that started and stopped at fixed points, and which passed through a fixed midpoint The problem was that to draw a Bezier Curve, you must know four points: the start point, the end point, and two other points called the control points.
In the above image, P0 is the start point of the curve, P3 is the end point, and points P1 and P2 are the control points. As you can see, the curve does not pass through the control points. Instead, the control points are used to control the curve. By adjusting P1 and P2, you can change how much the curve, well, curves.
To see a working example of this, check out this online demo.
Before I get to the solution to the problem, I need to mention how the curve is calculated. There’s a great YouTube video about it which I recommend watching. A word of warning: The remainder of this tutorial uses some math concepts. You have been warned
