magenta.js Visualizer() 呈现模糊笔记

Question

我注意到，每当我使用 magenta.js 的内置 Visualizer 方法时，它会呈现出非常模糊的注释（也许是抗锯齿问题？）。我附上了一张图片：

我也可以在许多文档示例中看到这种强度不同的情况，例如 https://piano-scribe.glitch.me/。有什么办法可以得到锐利的边缘或至少将模糊度降到最低？我不确定这个问题是否已经解决或是否适合洋红色 github，所以我在这里发帖。

编辑：在 canvas 元素上使用 image-rendering: pixelated，放大。

Answer 1

这是 magenta-js 可视化工具的一个错误（如果你这么称呼它的话）。查看源代码 reveals 中的 redraw 方法，每个音符的 x 位置和 w(idth) 由以下几行确定。

const x = (this.getNoteStartTime(note) * this.config.pixelsPerTimeStep) +
    offset;
const w = (this.getNoteEndTime(note) - this.getNoteStartTime(note)) *
    this.config.pixelsPerTimeStep;

现在，在 canvas 上绘制时，如果您不绘制整数，浏览器将进行插值并尝试绘制接近的表示，从而导致您注意到的像素颜色错误。

剩下要做的就是确认 x and/or w 不是整数。我加载了演示页面，在源选项卡中打开了相关的js文件，搜索了这一行并设置了一个断点。

果然。 x = 13.8 和 w = 15.35999。我已提交 magenta-js#238 修复。

magenta.js Visualizer() 呈现模糊笔记

magenta.js Visualizer() renders blurry notes

css

magenta

tensorflow.js