css – magenta.js Visualizer()呈现模糊的音符

2023年1月7日 266次阅读

我注意到每当我使用magenta.js内置的Visualizer方法时,它会呈现出如此轻微的模糊(可能是一个消除锯齿的问题？).我附上了一张图片：

《css – magenta.js Visualizer()呈现模糊的音符》

我可以在许多文档的例子中以不同的强度看到这一点,例如https://piano-scribe.glitch.me/.有没有办法可以获得锐利边缘或至少最小化模糊度？我不确定这个问题是否已经解决或者是否适合洋红色github,所以我在这里发帖.

编辑：使用图像渲染：在canvas元素上进行像素化,放大.
《css – magenta.js Visualizer()呈现模糊的音符》

最佳答案 这是一个使用magenta-js的可视化工具的错误(如果你称之为).看一下源
reveals中的重绘方法,用以下几行确定每个音符的x位置和w(宽度).

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

现在,当在画布上绘图时,如果不绘制整数,浏览器将进行插值并尝试绘制近似表示,从而导致您注意到的色彩错误.

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

《css – magenta.js Visualizer()呈现模糊的音符》

果然. x = 13.8且w = 15.35999.我已经提交了magenta-js#238修复程序.

点赞