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

标签 javascript svg

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

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

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

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

剩下多段线。我只能用折线做两件事——我可以选择线的长度(换句话说,我自动生成的点数),我可以禁用抗锯齿(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/

相关文章:

javascript - 刷新(重新发送)xmlhttp 请求在 IE 浏览器中不起作用

javascript - SVG 垂直展开线

javascript - 单击时替换 SVG 图像

javascript - D3.js 如何在使用函数时应用多个类

javascript - 搜索延迟加载 jQuery 幻灯片或 : hacking cross-slide

javascript - 当使用 ajax 方式进行登录状态检查时,Internet Explorer 会强制显示 304

javascript - 如果自动完成文本框中的数据很长,则添加滚动

javascript - 缩短条件语句?

javascript - 多个图表延迟问题,SVG 还是 HTML5 Canvas?

css - 在 svg 元素中设置 css