Question

这个伟大的音频可视化工具库名为wavesurfer：https://github.com/katspaugh/wavesurfer.js/

我需要可视化（波形渲染）看起来更像是心音图，所以我编辑了初始代码。

更具体地说，我更改了drawWave方法中的代码

    cc.beginPath();
    cc.moveTo($, halfH);

    for (var i = 0; i < length; i++) {
        var h = Math.round(peaks[i] * coef);
        cc.lineTo(i * scale + $, halfH + h);
    }

    cc.lineTo(this.width + $, halfH);
    cc.moveTo($, halfH);

    for (var i = 0; i < length; i++) {
        var h = Math.round(peaks[i] * coef);
        cc.lineTo(i * scale + $, halfH - h);
    }

    cc.lineTo(this.width + $, halfH);
    cc.fill();

    // Always draw a median line
    cc.fillRect(0, halfH - $, this.width, $);
}, this);

到

    cc.beginPath();
    cc.moveTo($, halfH);

    for (var i = 0; i < length; i++) {
        var h = Math.round(peaks[i] * coef);
        cc.lineTo(i * scale + $, halfH - h);
    }

    cc.stroke();

    // Always draw a median line
    cc.fillRect(0, halfH - $, this.width, $);
}, this);

我的目的是删除镜像效果并将其从fill（）更改为stroke（），因此它只是一行。然而，效果是不稳定和奇怪的。

这可能与这个人的问题（Canvas drawing with lineTo after clearRect() shows spotty lines）有关，在调用clearRect之后他的线条很不稳定，但他没有显示图像或代码来源所以我无法确定。在waveurfer代码中也没有引用clearRect（）所以也许我正在抓住吸管。 编辑 - 实际上有一个对clearRect的引用，但它似乎没有相关性;更新2中的更多deets

我已经向可视化工具的作者询问了建议，以防这与影响drawWave方法的另一种方法有关，但是我想在这里发帖，看看是否有一些明显我遗漏的东西。如果你有一个想法，请随意给我一个大致的研究方向;我已经玩了几个小时了，除了试图在一个不包含这个库的简单示例中重新创建问题之外我没有想法。到目前为止，没有骰子。

下面是我的小提琴，其中包括修改过的waveurfer库。

https://jsfiddle.net/morgwild/5sm3momk/

更新一次：

这绝对是代码与我的变化相互作用的一点点;我把原来的小提琴缩小到我写的部分，看起来很棒。

https://jsfiddle.net/morgwild/7x3wyhxh/

所以，现在我正在挖掘原始代码，看看之后会发生什么，并摧毁我想要的图像。

更新两个

哎呀，代码中有一个clearRect（）。

this.waveCc.clearRect(0, 0, this.width, this.height), this.progressCc && this.progressCc.clearRect(0, 0, this.width, this.height)

但是，我更新了更新一中提到的小提琴，但线条看起来还不错。因此，仍然没有在更简单的背景下重新创建问题。

Answer 1

波形库附带像素比率选项。它没有100％解决问题，但它解决了大部分问题。

Wavesurfer：使用lineTo（）和Stroke（）的斑点画布图

1 个答案: