Question

我有一些代码可以计算贝塞尔曲线的长度。我正在尝试为它编写单元测试。但除了琐碎的情况（直线贝塞尔曲线）之外，我不知道长度的任何实际正确值。我已经在线查看，但一直找不到。

有人有此信息吗？我正在寻找一个带有几行的表格的链接，其中包含四个贝塞尔控制点，然后是一个长度，或者可能在绘图程序中创建一些贝塞尔数来计算长度（我尝试使用blender和inkscape来获取这个信息，他们很复杂）。

解决方案。从here下载pomax的bezier javascript代码，然后在网络浏览器中打开此html：

<html>
<head>
<script src="bezier.js"></script>
</head>
<body>
<script>
curve = new Bezier([4.0, 0.0,  4.0, 
                    4.0, 0.0,  12.0,
                   16.0, 0.0,  12.0,
                   16.0, 0.0,  4.0]);

document.write(curve.length());
</script>
</body>
</html>

Answer 1

您可以尝试以下方法对您的代码进行单元测试：

1）使用De Casteljau算法将贝塞尔曲线分成多条贝塞尔曲线 2）计算每条贝塞尔曲线的弧长，然后计算它们的总和 3）计算原始贝塞尔曲线的弧长 4）比较步骤2和3的结果。如果您的代码正确，它们应该只是一个非常小的数字错误。

验证弧长的另一种方法是检查它是否总是在下面计算的两个值之间：

1）从Bezier曲线中取样一些点（比如100）并从采样点计算多边形的长度。该值始终小于曲线的实际弧长。
2）计算控制多边形的长度。这将始终大于曲线的实际弧长。

Answer 2

如果您希望测试实际弧长，请实施https://github.com/Pomax/bezierjs/blob/gh-pages/lib/bezier.js#L602-604 - 这将根据Legendre-Gauss quadrature评估（您没有）获得任意准确的数字要理解它是如何工作的，虽然视频链接告诉你它实际上非常简单。因此，实现它真的很容易。）

另一种选择是依赖wolframalpha.com或Mathematica（which is free if you own a Raspberri PI）之类的东西：设置随机曲线，让它们计算长度＆＃34;正确＆＃34;然后使用结果作为单元测试中的参考值。

Answer 3

您可以通过在此页面上摆弄js小部件来获取一些值 http://pomax.github.io/bezierinfo/#arclengthapprox

Answer 4

意识到这是一个老问题，但另一个解决方案是使用SVG路径元素和getTotalLength方法。不需要库或复杂的方程式，让浏览器完成繁重的工作。

最简单的形式：

var a = {x: 0, y: 0},  // from
    b = {x: 4, y: 4},  // to
    c1 = {x: 2, y: 0}, // curve 1
    c2 = {x: 2, y: 4}, // curve 2

    // output the curve in SVG bezier syntax
    svgBezier = `M${a.x} ${a.y} C ${c1.x} ${c1.y}, ${c2.x} ${c2.y}, ${b.x} ${b.y}`,

    // create a new <path> element
    path = document.createElementNS("http://www.w3.org/2000/svg", "path");

// add the curve
path.setAttribute('d', svgBezier);

// get the length using browser power
console.log(path.getTotalLength());  // 5.981128692626953

注意：以上内容在chrome和safari中返回可靠的结果.. firefox似乎不太可靠开箱即用

贝塞尔曲线弧长

4 个答案: