我不认为对此有一个很好的答案,但我想知道是否有更好的方法来做到这一点。
我需要绘制一个数学函数,它在显示器的一端几乎是平坦的,而在另一端几乎是垂直的。圆圈的左下象限将是一个很好的模型。我可以根据需要自动生成尽可能多的点数。
问题是,如果没有各种人工制品,我无法做到这一点。
我还没有试过贝塞尔曲线拟合;我不认为这会很接近。我的理解是,贝塞尔曲线是为了一次性手工构建的漂亮图形,而不是真正的曲线拟合。
剩下多段线。我只能用折线做两件事——我可以选择线的长度(换句话说,我自动生成的点数),我可以禁用抗锯齿(setAttributeNS(null,“shape-rendering”, “脆边”)。
如果我生成很多点,那么到处都会出现锯齿,结果无法使用。它也可能看起来非常像在振荡,这使我似乎错误地计算了函数。抗锯齿没有任何区别,因为它不跨点边界运行。
我得到的唯一解决方案是绘制更少 点,这样很明显我正在绘制线段。它不再平滑,但至少没有锯齿或振荡。我用默认的抗锯齿画这个。
有什么想法吗?
编辑: 看起来这个问题的唯一答案是实际上是贝塞尔曲线拟合。您必须进行预处理以找到所需段的参数,然后绘制结果。 Google 在使用贝塞尔曲线拟合曲线方面取得了一些成功。
最佳答案
您拥有数学函数,因此可以根据需要生成任意数量的点。
我假设问题是因为您不知道输出分辨率(SVG 与设备无关),所以您不知道要生成多少个点。否则,您可以只创建一条多段线,其中每条线的长度大约为 1 个像素。
将您的数学函数拟合到贝塞尔曲线(可能)不会得到完美匹配 - 就像圆不能与三次贝塞尔曲线完美匹配一样。而且我认为将您的函数拟合到贝塞尔曲线的任务并非微不足道(我从未这样做过)。
您是否愿意将您的数学函数输出到 Canvas 元素?然后你可以编写一些 javascript 代码来根据输出分辨率绘制你的数学函数。类似于图形系统呈现贝塞尔曲线的方式。
您知道图形系统如何渲染贝塞尔曲线吗?他们用折线逼近贝塞尔曲线,然后测量折线和贝塞尔曲线之间的误差差异。如果差异大于某个公差 - 其中公差由输出分辨率决定 - 将分割贝塞尔曲线并为每条贝塞尔曲线重复该过程。当贝塞尔曲线和多段线之间的差异低于公差时,将绘制多段线。 http://en.wikipedia.org/wiki/B%C3%A9zier_curve#Computer_graphics
关于javascript - 在不渲染人工制品的情况下绘制数学函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6369141/