求出三次贝塞尔曲线上给定点的系数/函数

find coefficient/function for given points on cubic bezier curve

本文关键字：函数 曲线 三次      更新时间：2023-09-26


我在这个信息图的基础上创建了一个简单的d3图：http://bit.ly/1o4iGfK

我现在想复制的是每个"节点"之间的三次贝塞尔线
多亏了这个网站，我画了一条曲线。所以我知道每四个点的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);

其中

y1-y0 = b/(a+b)*(y3-y0)

使得b/(a+b(是第一控制点在第零端点之上的高度分数。

所以要得到2/3的分数，而不是上面的1/3，使用a=1和b=2得到

y1=(y0+2*y3)/3;
y2=(y3+2*y0)/3;
相关文章：