Полный список утилит

Библиотека Vex предоставляет ряд утилит, которые значительно упрощают работу с векторной графикой и визуализацией на основе HTML5 Canvas. Эти утилиты разработаны для того, чтобы ускорить процесс создания и работы с графическими объектами, такими как линии, фигуры и текст, а также для работы с событиями. Данный список утилит включает в себя все основные функции, доступные в библиотеке Vex, и подробно описывает их использование.

Основные утилиты

1. Vex.Flow

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

Ключевые методы:

  • Vex.Flow.Renderer: используется для рендеринга и отображения графики в выбранном контейнере HTML.
  • Vex.Flow.Stave: утилита для создания и управления стовами (горизонтальными линиями для написания нот).
  • Vex.Flow.StaveNote: создаёт объект ноты, который можно поместить на стов.
  • Vex.Flow.Tie: создаёт связь между нотами, показывая, что они принадлежат к одной группе.

2. Vex.Flow.Renderer

Компонент, отвечающий за отрисовку графики на холсте (Canvas). Используется для визуализации музыкальных объектов, таких как ноты и аккорды, а также других графических элементов.

Пример использования:

var renderer = new Vex.Flow.Renderer(canvasElement, Vex.Flow.Renderer.Backends.CANVAS);
renderer.resize(500, 500);
var context = renderer.getContext();

В данном примере создаётся рендерер для холста, который позволяет рисовать музыкальные объекты.

3. Vex.Flow.Stave

Стевы (или пятки) — это горизонтальные линии, на которых размещаются ноты. Библиотека предоставляет множество методов для создания и конфигурирования стов.

Ключевые методы:

  • setClef: задаёт тип ключа на стве.
  • setTimeSignature: задаёт размер такта.
  • setContext: привязывает контекст рендерера к стве.
  • addClef: добавляет ключ к стве.

Пример использования:

var stave = new Vex.Flow.Stave(10, 40, 400);
stave.addClef("treble").addTimeSignature("4/4");
stave.setContext(context).draw();

В данном примере создаётся ства с размером 4/4 и добавляется ключ, после чего она рисуется.

4. Vex.Flow.StaveNote

Используется для добавления нот на ствы. Каждый объект ноты может быть настроен на использование различных типов нот (целая, половинная, четвертная и т. д.).

Ключевые методы:

  • addAccidental: добавляет знак (например, диез или бемоль) к ноте.
  • addDot: добавляет точку, удлиняя длительность ноты.
  • setDuration: задаёт длительность ноты.

Пример использования:

var note = new Vex.Flow.StaveNote({
  keys: ["c/4"], // нота до в 4 октаве
  duration: "q"  // четвертная нота
});
note.addAccidental(0, new Vex.Flow.Accidental("#")); // добавление диеза

5. Vex.Flow.Accidental

Утилита для работы с акцидентами — дополнительными знаками на нотах (диез, бемоль, и т. д.). Эти знаки изменяют высоту нот.

Пример использования:

var accidental = new Vex.Flow.Accidental("#");
note.addAccidental(0, accidental);

6. Vex.Flow.Tie

Tie — это связка между двумя нотами, показывающая, что ноты исполняются как одна длительная нота.

Пример использования:

var tie = new Vex.Flow.Tie(note1, note2);

7. Vex.Flow.TimeSignature

Утилита для работы с размером такта. Эта утилита позволяет задать числовое представление времени в музыкальной композиции.

Пример использования:

var timeSignature = new Vex.Flow.TimeSignature("4/4");

8. Vex.Flow.Clef

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

Пример использования:

var clef = new Vex.Flow.Clef("treble");
stave.addClef(clef);

Вспомогательные утилиты

9. Vex.Flow.NoteGroup

Группа нот, которая позволяет объединить несколько нот в одну логическую единицу. Эта утилита часто используется в комплексных аранжировках.

Пример использования:

var noteGroup = new Vex.Flow.NoteGroup([note1, note2]);

10. Vex.Flow.Formatter

Утилита для автоматической расстановки и выравнивания объектов на музыкальной партитуре. Позволяет корректно размещать ноты и другие элементы на стве.

Пример использования:

var formatter = new Vex.Flow.Formatter();
formatter.joinNotes([note1, note2]).format([note1, note2], 300);

Дополнительные утилиты для работы с событиями

11. Vex.Flow.Event

Механизм для обработки событий. Используется для добавления интерактивности на музыкальную партитуру, например, для обработки кликов на ноты или другие элементы.

Пример использования:

note.on("click", function() {
  console.log("Note clicked!");
});

12. Vex.Flow.MouseEvent

Для работы с событиями мыши на элементами, такими как ноты, можно использовать утилиту MouseEvent. Она поддерживает такие события, как mouseover, mouseout, click, и другие.

Пример использования:

note.on("mouseover", function() {
  note.setStyle({ fillStyle: "#ff0000" });
});

Заключение

Vex предоставляет удобные и мощные инструменты для работы с музыкальными партитурами и векторной графикой. Каждая утилита предназначена для конкретной задачи и может быть использована в рамках более сложных музыкальных приложений. Умение правильно применять эти утилиты значительно ускоряет процесс создания и визуализации музыкальных произведений.

Оглавление