绘制数学函数而不会出现伪像

Question

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

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

问题是，我无法做到这一点，没有各种各样的文物。

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

这留下了折线。只有两件事我可以用多段线做 - 我可以选择线的长度（换句话说，我自动生成的点的数量），我可以禁用反锯齿（setAttributeNS（null，“shape-rendering”， “crisp-edges”）

如果我生成了很多点，那么我得到了各处的锯齿，并且结果是无法使用的，它看起来很像它的摆动，这使得它显示我错误地计算了这个功能，抗锯齿没有任何区别，因为它不能跨越点边界操作

我唯一的解决方法是画更少点，所以很明显我的' m画段，不再平滑，但至少没有锯齿或振荡离子。我用默认的抗锯齿绘制这个。

任何想法？

编辑： 看起来这个的唯一答案是实际上是贝塞尔曲线拟合。您必须预处理才能找到所需段的参数，然后绘制结果。谷歌在曲线拟合贝齐尔时出现了许多点击。

Answer 1

您有数学函数，因此可以根据需要生成尽可能多的点。

我认为问题在于，因为您不知道输出分辨率（SVG与设备无关），所以您不知道要生成多少个点。否则，您可以创建一条折线，每条线约1个像素长。

将你的数学函数拟合到贝塞尔曲线上（可能）不会得到完美的匹配 - 就像一个圆不能完全匹配三次贝塞尔曲线一样。我认为将函数拟合到贝塞尔曲线的任务并不是微不足道的（我从来没有这样做过）。

难道你宁愿输出你的数学函数到画布元素？然后，您可以编写一些JavaScript代码来绘制依赖于输出分辨率的数学函数。类似于图形系统呈现贝塞尔曲线的方式。

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

Answer 2

我想要绘制Y = F（x）的在一定区间[a，b]上

一个经典的解决方案是取N点均匀分布在[A，B]，以计算˚F在这些点和画线（或多边形）。

它当然不适用于你的情况，因为y在某些区域几乎是垂直的。但是，为什么你不在这些方面多加点（并且功能几乎是水平的点少）呢？你可以计算你的函数的导数（或者用（f（x + h）-f（x））/ h和h小近似这个导数）并且用这个导数确定两个连续点之间的间隔