贝塞尔曲线的长度始终相同

Question

我正在 HTML5 画布上开发游戏。

我想要的是在两点之间绘制一条S形三次贝塞尔曲线，但我正在寻找一种方法来计算控制点的坐标，以便无论这些点有多近，曲线本身总是相同的长度，直到它到达曲线变成直线的点。

Answer 1

这是可以数值求解的。我假设你有一个带有 4 个控制点的三次贝塞尔曲线。
在每一步中，您都有第一个 (P0) 和最后一个 (P3) 点，并且您想要计算 P1 和 P2 以使总长度恒定。

添加此约束会删除一个自由度，因此我们还剩下 1 个自由度（从 4 开始，确定终点 (-2)，恒定长度是另一个 -1）。所以你需要对此做出决定。

贝塞尔曲线是定义在 0 和 1 之间的多项式，您需要对元素总和 (2d?) 的平方根进行积分。对于三次贝塞尔曲线，这意味着 6 次多项式的 sqrt，wolfram 不知道如何求解。但是，如果您知道所有其他控制点（或已知对某些其他约束的依赖），您可以保存该约束的预先计算值的表。

Answer 2

曲线真的有必要是贝塞尔曲线吗？ 拟合两个总长度恒定的圆弧要容易得多。而且你总是会得到一个S形。

拟合两个圆弧：

让 D 为端点之间的欧氏距离。令 C 为我们想要的恒定长度。我得到了以下 b 表达式（在图像中绘制）：

b = sqrt(D*sin(C/4)/4 - (D^2)/16)

我还没有检查它是否正确，所以如果有人得到不同的结果，请发表评论。

编辑：您也应该考虑我在求解方程时获得的负解，并检查哪一个是正确的。

b = -sqrt(D*sin(C/4)/4 - (D^2)/16)

Answer 3

以下是 SVG 中的一个工作示例，接近需要更正：
http://phrogz.net/svg/constant-length-bezier.xhtml

我通过实验确定，当端点彼此重叠时，句柄应该是
所需长度 × cos(30°)
远离手柄； （当然）当端点处于最大距离时，手柄应该彼此叠置。绘制所有理想点看起来有点像一个椭圆：

">

这是相关的 JavaScript 代码：

// M is the MoveTo command in SVG (the first point on the path)
// C is the CurveTo command in SVG:
//   C.x is the end point of the path
//   C.x1 is the first control point
//   C.x2 is the second control point
function makeFixedLengthSCurve(path,length){
  var dx   = C.x - M.x, dy = C.y - M.y;
  var len  = Math.sqrt(dx*dx+dy*dy);
  var angle = Math.atan2(dy,dx);
  if (len >= length){
    C.x  = M.x + 100 * Math.cos(angle);
    C.y  = M.y + 100 * Math.sin(angle);
    C.x1 = M.x; C.y1 = M.y;
    C.x2 = C.x; C.y2 = C.y;
  }else{
    // Ellipse of major axis length and minor axis length*cos(30°)
    var a = length, b = length*Math.cos(30*Math.PI/180);
    var handleDistance = Math.sqrt( b*b * ( 1 - len*len / (a*a) ) ); 
    C.x1 = M.x + handleDistance * Math.sin(angle);
    C.y1 = M.y - handleDistance * Math.cos(angle);
    C.x2 = C.x - handleDistance * Math.sin(angle);
    C.y2 = C.y + handleDistance * Math.cos(angle);
  }
}