贝塞尔曲线弧长

问题描述 投票：0回答：4

我有一些计算贝塞尔曲线长度的代码。我正在尝试为其编写单元测试。但除了微不足道的情况（直线贝塞尔曲线）之外，我不知道长度的任何实际正确值。我在网上查了一下，没有找到。

有人有这个信息吗？我正在寻找一个指向一个表格的链接，其中有几行包含四个贝塞尔曲线控制点，然后是一个长度，或者可能在计算长度的绘图程序中创建几个贝塞尔曲线（我尝试使用搅拌机和 inkscape 来获得这些信息非常复杂）。

解决方案。从这里下载pomax的贝塞尔曲线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>
math geometry bezier
4个回答
3
投票

如果您想要测试实际弧长，您必须通过执行类似这样的操作来实现您自己的贝塞尔长度代码，基于计算勒让德-高斯求积计算任意精确的数字（您不必了解它是如何工作的，尽管视频链接显示它实际上非常简单。因此，庆幸的是，实现它非常容易）。

另一种选择是依靠 wolframalpha.com 或 Mathematica（如果您拥有 Raspberri PI 则免费）：设置一条随机曲线，让它们“正确”计算长度，然后使用该结果作为单元测试中的参考值。

3
投票

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

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

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

1) 从贝塞尔曲线中采样一些点（假设为 100 个），并根据采样点计算多边形的长度。该值始终小于曲线的实际弧长。
2) 计算控制多边形的长度。这将始终大于曲线的实际弧长。

1
投票

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

1
投票

意识到这是一个老问题，但另一个解决方案是使用 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 似乎开箱即用不太可靠

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.