用于参数均衡器的画布贝塞尔曲线

Question

我正在尝试使用画布来模拟参数均衡器，其响应类似于下图的均衡器，使用频率、谐振和增益。

一条线上有 8 个点。每个点可以有多种曲线（低通、钟形、陷波、高通等）

我想知道如何在画布中模拟这个？

网上有很多生成器，就像这样 - https://canvature.appspot.com/ 但它们并没有真正向您展示如何沿一条线绘制多条曲线。 另外，例如我见过的大多数工具都无法实现高共振 - 我需要为这些使用额外的点吗？

我可以使用画布 bezierCurveTo 和 moveTo 函数，并将每个点的 XY 运动输入到这些函数中。

任何关于如何计算这些响应的指示都会很棒

干杯

K

编辑

我相信下面的用户是正确的，我需要 B 样条线才能在画布中实现这一点。到目前为止，我已经尝试了一条从右向左移动的简单低通曲线（没有任何共振）。我正在努力添加“共振”，它可以正确模拟低通曲线的共振（即在开始时有一个峰值，而不是在整个路径上）。例如http://www.audiomulch.com/images/blog/southpole-expedition-part-1-low-pass-filter-basics-resonant-low-pass-Frequency-response.png

我也在努力，我需要沿线有 8 个点，并且一个点可以穿过另一个点（从而影响 B 样条线）。我猜我需要为此使用

isPointInPath()

函数，但在如何在我的用例中实现它方面苦苦挣扎。

我猜这太难了，因为以前没有在 Canvas 中尝试过，并且网络上关于此的信息很少（我可以在 C 中找到很多示例）

这是我使用 B 样条曲线制作的低通曲线的示例（但共振还不够远，峰值应该进一步降低）

抱歉，编码风格很奇怪，这不是 javascript，而是集成了所有画布功能的基本脚本语言：

canvas_beginPath(c);
decl x0 = x[0] * 1000;
decl y0 = y[0] * 200;
decl x1 = x[1] * 200;
decl y1 = y[1] * 20;

canvas_lineTo(c,0, 10); 
canvas_moveTo(c,x0+10, 98);             
canvas_arcTo(c,x0+103, 200-y0, x0+173, 96, 73); 
canvas_lineTo(c,1000, 96);             
canvas_stroke(c);
canvas_fill(0);

canvas_beginPath(d);
canvas_moveTo(d,165, 98);            
canvas_arcTo(d,203, 95, 281, 96, 73); 
canvas_lineTo(d,1000, 96);             
canvas_stroke(d);
canvas_fill(0);

Answer 1

参数均衡器对信号进行滤波。您试图用曲线可视化的是滤波器的频率响应。

执行此操作的一个简单方法是计算许多不同频率的响应（例如，在可视化中的每个像素列计算一次），以获得可视化中的一堆点。然后，只需通过连续点绘制线段即可可视化滤波器的频率响应。

重点是，使用实际的频率响应函数沿曲线插值点进行渲染，而不是canvas内置对贝塞尔曲线的支持。

Answer 2

我还不太理解它，但是从我在另一种情况下所做的来看（我有固定点并且需要提供类似人类的识别曲线）。

这是我从你的问题中得到的信息：

频率频谱上有一定的振幅。由于频率是有序集（从数字空间继承自然顺序），因此您实际上有一个样本集，并且需要在它们之间进行插值以形成函数。

这个插值可以用线来完成：

*               ******    *
  *          ***       **   *
    *    ***                  *
      **                        *

所以最终这看起来不太好。

水平线还有另一种方式

****     *********             
                   ******          
                                   
     *****               ******

数字放大器使用它来可视化它。

你追求的是更圆润的东西：

**          ****  ****
  **      **    **    **
    *   **              *
     ***                 *

可以这样做，您只需使用具有四个点的 bspline

+        ***x
       **
      *
    **
x***        +

两个 x 点是该样条线经过的第一个和第四个点。这两点就是你代表数值的点。

+ 点是点 2 和点 3，它们实际上控制点 1 的圆度（点 2 执行此操作），而四点 4（点 3）执行此操作。如果将这些点放置在相同的 y 轴值上，您可以使用 x 访问控制圆度。

如果点 2 与点 4 具有相同的 x（请记住，2 控制 1 的圆度），则只要 3 与点 1 具有相同的 x 值，样条线就会穿过中间点。通过更改 2 和 3 的 x 值可以轻松移动该中点。玩它。

我使用 100% 和 100% 获得了非常令人愉快的结果，但最终让人们根据曲线调整这些结果。 （我使用 0 到 1 之间的值）。

您可以使用插画或徒手亲自查看效果，并使用 bspline 工具（路径编辑）并使用圆度点（拖出并在路径的每个点移动的点）并仅更改 x 值。

这正是您正在寻找的。

如果您需要帮助或需要真实图片（我知道 ascii 艺术不够好），请询问我会更新帖子。