magenta.js Visualizer()呈现模糊注释

Question

我注意到，每当我使用magenta.js的内置Visualizer方法时，它都会呈现出略微模糊的效果(也许是抗锯齿问题？)笔记。我附上了一张图片：

​

​

在文档的许多示例中，我也可以看到不同的强度，比如https://piano-scribe.glitch.me/。有没有一种方法可以让我得到清晰的边缘，或者至少最小化模糊？我不确定这个问题是否已经在洋红色github中得到了解决或者是否合适，所以我在这里发帖。

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

​

Answer 1

这是magenta-js的可视化工具的一个bug (如果你这么说的话)。看一下它们的源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;

现在，当在画布上绘制时，如果您不是以整数绘制，浏览器将插入并尝试绘制一个接近的表示，从而导致您注意到的错误颜色的像素。

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

​

​

果不其然。x = 13.8和w = 15.35999。我已经提交了带有修复的magenta-js#238。