magenta.js Visualizer () отображает размытые заметки

Question

Я заметил, что всякий раз, когда я использую встроенный в Visualizer метод magenta.js, он делает очень размытые заметки (возможно, проблему сглаживания?).Я приложил изображение:

Я могу видеть это с различной интенсивностью также во многих примерах документации, таких как https://piano -scribe.glitch.me / .Есть ли способ, которым я могу получить острые края или, по крайней мере, минимизировать размытость?Я не уверен, была ли эта проблема решена или подходит для magenta github, поэтому я публикую здесь.

Редактировать: с image-rendering: pixelated на элементе canvas, увеличенным.

Answer 1

Это ошибка (если вы так ее называете) в визуализаторе magenta-js.Взглянув на метод 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 не являются целыми числами.Я загрузил демонстрационную страницу, открыл соответствующий файл js на вкладке источников, искал эту строку и установил точку останова.

Конечно.x = 13.8 и w = 15.35999.Я отправил magenta-js # 238 с исправлением.