代码之家 › 专栏 › 技术社区 › Kevin

洋红.js可视化工具()呈现模糊的注释

magenta tensorflow.js css

4

Kevin · 技术社区 · 6 年前

我注意到,每当我使用magenta.js的内置可视化工具方法时,它都会呈现出非常模糊的效果(可能是消除混叠的问题?)笔记。我附上了一张图片:

我也可以在文档的许多示例中看到不同强度的这种情况,例如 https://piano-scribe.glitch.me/ . 有什么方法可以让我得到锐利的边缘,或者至少最小化模糊度?我不确定这个问题是否已经被解决,或是适合在品红色的Github,所以我在这里张贴。

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

1 回复 | 直到 6 年前

1

Gerrit0 6 年前

这是一个使用品红色JS可视化工具的bug(如果你这么叫的话)。看看 redraw 方法的来源 reveals 那 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 不是整数。我加载了演示页面,在“源”选项卡中打开了相关的JS文件,搜索了此行并放置了一个断点。

果然。 x = 13.8 和 w = 15.35999 . 我已经提交了 magenta-js#238 修理好了。