javascript-查找三次贝塞尔曲线上给定点的系数/函数
javascript-查找三次贝塞尔曲线上给定点的系数/函数,javascript,math,svg,bezier,Javascript,Math,Svg,Bezier,我正在基于此信息图创建一个简单的d3图: 我现在正试图重现的是我的每个“节点”之间的立方贝塞尔线。 多亏了这个,我画了一条曲线。所以我知道每四个点的x和y坐标: (x0,y0)=(32,45)(x1,y1)=(32150)(x2,y2)=(190150)(x3,y3)=(190260) 但我真的不知道如何使用通用算法,并将其转换为javascript函数,以便我只能编写已知(x0,y0)和(x3,y3)坐标,以及pouf!获得漂亮的线条。 主要是因为我的代数不是很好。对不起。 我找到了这条线索:
我正在基于此信息图创建一个简单的d3图:
我现在正试图重现的是我的每个“节点”之间的立方贝塞尔线。
多亏了这个,我画了一条曲线。所以我知道每四个点的x和y坐标:
(x0,y0)=(32,45)
(x1,y1)=(32150)
(x2,y2)=(190150)
(x3,y3)=(190260)
但我真的不知道如何使用通用算法,并将其转换为javascript函数,以便我只能编写已知(x0,y0)和(x3,y3)坐标,以及pouf!获得漂亮的线条。
主要是因为我的代数不是很好。对不起。
我找到了这条线索:
这似乎是答案的一部分,但我不完全理解代码和说明。
现在我已经使用了这个函数:
function linkArc(d) {
var dx = d.source.x - d.target.x,
dy = d.source.y - d.target.y,
dr = Math.sqrt(dx * dx + dy * dy);
return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
}
这是一个简单的弧线,不是我想要的
(d.source.x,d.target.y):第一个点的坐标(x0,y0)(d.target.x,d.target.y):终点坐标(x3,y3)
谢谢。您需要的是端点处的垂直坡度。由于内部控制点决定坡度,因此必须将其直接设置在控制点的上方和下方。上下多少有两个自由度。例如,将它们放在高度差的三分之一处
x1 = x0; y1 = (2*y0+y3)/3;
x2 = x3; y2 = (2*y3+y0)/3;
总的方案是:
y1 = (a*y0+b*y3)/(a+b);
y2 = (a*y3+b*y0)/(a+b);
在哪里
因此b/(a+b)是第一个控制点位于第零个端点上方的高度分数
所以要得到2/3的分数,而不是上面的1/3,使用a=1和b=2来得到
y1=(y0+2*y3)/3;
y2=(y3+2*y0)/3;
就这么简单。它起作用了。非常感谢你!正如我所说的,您可以尝试垂直轴上的位置,以使曲线在点处更明显地垂直,例如,尝试y1=y3和y2=y0。好的。读起来有点难,但看起来也不错。再次感谢你。
y1=(y0+2*y3)/3;
y2=(y3+2*y0)/3;