Рендеринг большого pianoroll с HTML / Javascript

Question

Я работаю над аудио-приложением html5 с использованием нового веб-аудио API, мне для этого нужен «пианоролл», сетка клавиатуры, где пользователь может рисовать заметки, используемые в большинстве программ для производства музыки, о которых я думал два способа создать это.

1. Создание большой HTML-таблицы и создание тегов внутри ячеек для рисования заметок
   • PRO манипулирование примечаниями легко, потому что мы работаем с html-элементом и можем использовать их события и методы.
   • CON Я выполнил несколько проектов с использованием огромных таблиц, и мои опытные браузеры, как правило, работают медленнее при работе с таким количеством элементов.
2. Создание холста для рендеринга сетки и заметок
   • PRO Рендеринг может быть быстрее по сравнению с огромной таблицей с некоторым умным кэшированием
   • CON Для работы с заметками потребуется больше усилий.
   • CON Все еще прокручивая огромное изображение.

Мне нужно использовать метод, который наиболее дружествен к ресурсам, потому что на рендеринг аудио не должен влиять медленно реагирующий интерфейс, пользователи должны иметь возможность прокручивать внутри пианино без каких-либо сбоев.

Я мог бы создать холст с размером области просмотра и позволить ему рендериться, когда пользователь прокручивает, я не знаю, будет ли это быстрее, есть меньший холст, но ему нужно больше визуализировать. Для таблицы я мог бы использовать фиксированные ячейки, в которые вставляются заметки (addChild, innerHTML), когда они должны быть показаны, но плавной прокрутки не будет, потому что она могла бы прокручиваться только по размеру сетки (не очень большая проблема, если достаточно быстро), а также потребует большего повторного рендеринга, чем статическая таблица.

Есть ли что-то, что я упустил, и какое решение наиболее подходящее для ресурсов?

Answer 1

Я бы не стал прикасаться к таблицам здесь по обеим причинам, о которых вы упомянули, а также было бы нехорошо получить красиво вставленные черные клавиши.

Я бы склонялся к холсту, потому что он действительно быстрый и ваш ресурсиспользование фиксировано: только пиксели для пианино рулона.Клавиши пианино также имеют прямоугольную форму, поэтому логика выбора не будет слишком плохой.

Однако, если вы предпочитаете использовать ключи в качестве объектов с событиями, тогда, как уже упоминалось, векторная графика - это путь.d3.js mbostock.github.com / d3 / - это хорошая библиотека JS для визуализации на основе DOM, которая может помочь в создании броска, назначении событий клавишам и плавной анимации прокрутки.Вы можете использовать его для визуализации HTML (скажем, DIV) или SVG.