Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/399.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
javascript-查找三次贝塞尔曲线上给定点的系数/函数_Javascript_Math_Svg_Bezier - Fatal编程技术网

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;