式从三个已知点计算D3“基础”曲线上的控制点(Formula to calculate the co

2019-10-18 03:32发布

我具有由产生的曲线D3.js与插值设置为“基础”线生成函数。 的问题是,只有所产生的线接触给定的进线生成函数的第一和最后点和不通过在之间的那些。 我知道,这些都是作为控制点来生成处理b-spline曲线,但我所寻找的是“项目” /计算控制点,使曲线不经过我的路径阵列的每一个点的方式。

这些在我的应用程序点之间是用户可以拖动操纵曲线“处理”之分。 如果我设置插值计算,以“大非”,则曲线不会经过的每一个点,但这不是我想要的曲线类型,我想用“基础”插值产生的平滑曲线。

这是我行产生的代码:

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

这里是说明该问题的图片。

换句话说,三个点我是在开始和曲线的末端,并在“顶点”点的点(不知道它叫什么......但曲线的“最高”点) 。 所以,在图中,红色圆点将代表顶点和曲线必须虽然这点运行。

我发现这个问题 ,与此相同的问题的交易,但与HTML 5画布,而不是D3.js. 我试图把这里给出的计算控制点的曲线的公式,但结束了这个结果:

“拖动点”(红点)现在是曲线之下而不是在其上和点和曲线之间的距离的增长作为曲线被拖动进一步进行。 我推测,链接到在问题公式没有工作的原因是因为为D3曲线式是b-spline ,并且因此从所产生的曲线不同quadraticCurveTo在这个问题中提到。 (我可能是错的这个虽然...我知道涉及的是危险的数学!)

所以我的问题是:有没有人知道由产生的曲线公式D3 “的基础上”插? 而且任何人都可以在推导公式计算控制点类似于在我挂的问题做了曲线帮助。

文章来源: Formula to calculate the control point from three known points on a D3 “basis” curve