Как сделать интерактивную 2d сетку в браузере - PullRequest
Новая
       14

Как сделать интерактивную 2d сетку в браузере

0 голосов
/ 11 ноября 2019

Я пытаюсь создать программу, которая позволяет мне писать MIDI в браузере. У меня возникают проблемы с выяснением того, как реализовать интерактивный рояль, где пользователи могут писать и редактировать заметки, а также увеличивать и уменьшать масштаб с помощью движения «щипок». Рулон пианино - это просто двумерная сетка, как миллиметровка. Ось X - это время, а ось Y - это шаг. Музыкальная нота - это просто активная ячейка на графике, представляющая высоту, которую нужно воспроизвести в определенное время в течение определенной продолжительности.

Требования:

  • Чрезвычайно быстро (без заметных задержек при взаимодействии с роялем фортепиано)
  • Увеличение и уменьшение: динамическое изменение фортепианопрокрутите ширину и высоту ячейки при помощи трекпада / колеса мыши.
  • Перетащите, отпустите и настройте ноты MIDI на сетке.

То, что я пробовал:

  • Рулон статического пианино: я изначально создал рулон пианино, используя сетки CSS. Это работало, но рояль пианино был статическим (без увеличения / уменьшения, не может регулировать ширину / высоту ячейки сетки)
  • Добавить динамику: я добавил прослушиватель событий колеса мыши и использовал переменные CSS для динамического изменения шириныи высота дочерних элементов сетки. Поэтому, когда я ущипнул, чтобы увеличить масштаб моего трекпада, сработала функция Javascript, которая масштабировала мою переменную CSS, определяющую ширину 'piano-grid-cell'. Это сработало в теории, но на практике это не только не соответствовало чрезвычайно быстрому требованию, оно было необычайно медленным и обычно зависало в браузере от одной попытки «зажать, чтобы увеличить» рояль рояля.

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

Я рассмотрел использование 2D WebGL-рендеринга, но это кажется излишним для этой проблемы. Я знаю, что интерактивная 2-мерная сетка на основе сети возможна и, возможно, даже не так сложна, но я не вижу решения - поэтому, если у вас есть какие-либо идеи, которыми вы хотели бы поделиться со мной относительно того, как я могу подойти к реализации этого, я бывысоко ценю ваш совет.

...