如何找到贝塞尔曲线的中点？

Question

我想创建一个“命名”的贝塞尔曲线。我希望它是一个单词名称，这样我就不必担心换行问题。

我通过 P5 的 bezier(sx,sy,c1x,c1y,c2x,c2y,ex,ey) 函数绘制贝塞尔曲线，并希望在贝塞尔曲线的中间显示字符串。但我不知道如何找到曲线的“中心”。

目前我的结果看起来像这样（我不知道从哪里开始解决这个问题，所以我选择了更简单的方法，只是在曲线的起点打印文本）： 但我希望它看起来像这样： 这意味着我需要 P1 和 P2 坐标： 抱歉使用画图，但我还没有我的代码。一旦我手头有了代码，我会在这里添加它。

以下是绘制曲线的代码：

let
b = dest.inTriangle.middle, // destination triangle
g = this.outTriangle.p3,    // tip of out triangle
c = {x:b.x-g.x,y:b.y-g.y},  // distance between objects
r1 = {},                    // bezier point 1
r2 = {};                    // bezier point 2
if(c.x > 0){
    // b is on left
    r1 = {
        x: g.x + c.x/2,
        y: g.y
    };
    r2 = {
        x: b.x - c.x/2,
        y: b.y
    };
    }
else {
    // b is on right
    r1 = {
        x: g.x - c.x/2,
        y: g.y + c.y
    };
    r2 = {
        x: b.x + c.x/2,
        y: b.y - c.y
    };
}
noFill();
stroke(0);
bezier(
    g.x, g.y,
    r1.x, r1.y,
    r2.x, r2.y,
    b.x, b.y
);
noStroke();
fill(0);
text(this.name, g.x, (g.y-this.h/2))

- SkillGG

---

曲线会始终对称吗？或者至少几乎对称？ - Thomas

因为我使用了对称的c1和c2，所以我认为曲线将始终保持对称。 - SkillGG

如果始终对称，则指向1/2的点将是中间点。如果不对称，则无法简单地计算“中间”点，遗憾。 - Jean-Baptiste Yunès

是的！我没有想到。我对曲线有点陌生，一开始就被它击垮了。抱歉。 - SkillGG

Answer 1

你可以使用P5.js中提供的bezierPoint()函数。

引用自参考文献：

noFill();
var x1 = 85,
 x2 = 10,
 x3 = 90,
 x4 = 15;
var y1 = 20,
 y2 = 10,
 y3 = 90,
 y4 = 80;
bezier(x1, y1, x2, y2, x3, y3, x4, y4);
fill(255);
var steps = 10;
for (var i = 0; i <= steps; i++) {
  var t = i / steps;
  var x = bezierPoint(x1, x2, x3, x4, t);
  var y = bezierPoint(y1, y2, y3, y4, t);
  ellipse(x, y, 5, 5);
}

如果要得到中点，您可能需要使用0.5作为t的值。

- Kevin Workman

---

谢谢！我不确定这是否存在。现在我知道它确实存在！我检查了两次参考资料，但我认为我可能是盲眼了什么的 :) 感谢您的帮助。 - SkillGG

Answer 2

因此，将函数在时间上转换为4个点的公式如下（图片来自维基百科）：

由于您想要中间部分，而t的范围是从0到1，因此您只需要将t = 1/2即可。

所以

B(1/2) = 1/8 P0 + 3/8 P1 + 3/8 P2 + 1/8 P3

- Christian Vincenzo Traina

---

当曲线由非线性参数化（其中t在[0,1]范围内变化）给出时，弧长中点通常不是出现在t = 1/2的点。我认为你的答案是错误的。另一方面，这可能是OP问题的一个合理启发式方法，因此我认为它具有一定的价值。 - John Coleman

@JohnColeman 这是真的，但我想用户只是希望所有标签都在同一列上，并且可能像许多cubic-bezier生成器一样随时间动画位置。 在这种情况下，x坐标已知，y坐标可以使用该公式找到。 如果他想要曲线的确切中心，则问题并不那么简单，但我认为它仍然可以通过分析解决。 - Christian Vincenzo Traina

由于OP似乎有对称的想法，所以这应该可以工作，所以(+1)。即使在非对称情况下，如果您只想定位文本（不需要数学精度），这也可能是一个合理的方法。 - John Coleman