javascript - 在不渲染人工制品的情况下绘制数学函数

Question

我不认为对此有一个很好的答案，但我想知道是否有更好的方法来做到这一点。

我需要绘制一个数学函数，它在显示器的一端几乎是平坦的，而在另一端几乎是垂直的。圆圈的左下象限将是一个很好的模型。我可以根据需要自动生成尽可能多的点数。

问题是，如果没有各种人工制品，我无法做到这一点。

我还没有试过贝塞尔曲线拟合；我不认为这会很接近。我的理解是，贝塞尔曲线是为了一次性手工构建的漂亮图形，而不是真正的曲线拟合。

剩下多段线。我只能用折线做两件事——我可以选择线的长度(换句话说，我自动生成的点数)，我可以禁用抗锯齿(setAttributeNS(null，“shape-rendering”， “脆边”)。

如果我生成很多点，那么到处都会出现锯齿，结果无法使用。它也可能看起来非常像在振荡，这使我似乎错误地计算了函数。抗锯齿没有任何区别，因为它不跨点边界运行。

我得到的唯一解决方案是绘制更少 点，这样很明显我正在绘制线段。它不再平滑，但至少没有锯齿或振荡。我用默认的抗锯齿画这个。

有什么想法吗？

编辑:看起来这个问题的唯一答案是实际上是贝塞尔曲线拟合。您必须进行预处理以找到所需段的参数，然后绘制结果。 Google 在使用贝塞尔曲线拟合曲线方面取得了一些成功。

Answer 1

您拥有数学函数，因此可以根据需要生成任意数量的点。

我假设问题是因为您不知道输出分辨率(SVG 与设备无关)，所以您不知道要生成多少个点。否则，您可以只创建一条多段线，其中每条线的长度大约为 1 个像素。

将您的数学函数拟合到贝塞尔曲线(可能)不会得到完美匹配 - 就像圆不能与三次贝塞尔曲线完美匹配一样。而且我认为将您的函数拟合到贝塞尔曲线的任务并非微不足道(我从未这样做过)。

您是否愿意将您的数学函数输出到 Canvas 元素？然后你可以编写一些 javascript 代码来根据输出分辨率绘制你的数学函数。类似于图形系统呈现贝塞尔曲线的方式。

您知道图形系统如何渲染贝塞尔曲线吗？他们用折线逼近贝塞尔曲线，然后测量折线和贝塞尔曲线之间的误差差异。如果差异大于某个公差 - 其中公差由输出分辨率决定 - 将分割贝塞尔曲线并为每条贝塞尔曲线重复该过程。当贝塞尔曲线和多段线之间的差异低于公差时，将绘制多段线。 http://en.wikipedia.org/wiki/B%C3%A9zier_curve#Computer_graphics