Formula to calculate the control point from three

2019-08-09 09:23发布

问题:

I have a curve generated by a D3.js line generating function with interpolate set as "basis". The problem is that the line generated only touches the first and last point given into the line generating function and does not pass through the ones in between. I am aware that these are treated as control points to generate the b-spline curve, but what I am looking for is a way to "project"/calculate the control points so that the curve does go through every point in my path array.

These in between points in my application are "handle" points which the user can drag to manipulate the curve. If I set interpolate to "cardinal" then the curve does go through every point, but this is not the type of curve that I want, I want the smoother curve produced by the "basis" interpolation.

Here is my line generator code:

 this.lineGenerator =  d3.svg.line()
                             .tension(0.5)
                             .x(function(d) { return d.x; })
                             .y(function(d) { return d.y; })
                             .interpolate("basis");

And here is a picture that illustrates the problem.

In other words the three points that I have are the points at the start and end of the curve and the point at the "apex" (don't know what it is called... but the "highest" point of the curve). So in the diagram, the red dot will represent the apex and the curve must run though this point.

I found this question which deals with this same issue, but with HTML 5 Canvas rather than D3.js. I tried to apply the formula given here to calculate the control points for the curve, but ended up with this result:

The "drag point" (red dot) is now below the curve rather than on it and the distance between the dot and the curve grows as the curve is dragged further out. I speculate that the reason that the formula in the question linked to did not work is because the formula for the D3 curve is a b-spline and therefore different from curve generated by quadraticCurveTo mentioned in that question. (I may be wrong about this though... what I know about the maths involved is dangerous!)

So my questions are: does anyone know the formula for the curve generated by the D3 "basis" interpolation? And can anyone help in deriving the formula for calculating the control points for the curve similar to what is done in the question that I linked to.