Что такое конва?
Во-первых, краткое введение в Canvas.
Холст изначально пустой. Чтобы что-то отобразить, скрипту сначала нужно получить доступ к rendering context и нарисовать на нем. Элемент <canvas> имеет метод getContext(), используемый для получения контекста визуализации и его функций рисования. getContext() принимает один параметр, тип контекста. Для 2D-графики, такой как та, что описана в этом руководстве, вы указываете 2d.
const canvas = document.getElementById('container');
const ctx = canvas.getContext('2d');Исходя из этого, Konva - это фреймворк HTML5 Canvas, расширяющий 2d-контекст. Вы можете использовать Konva для рисования настраиваемых форм, линий, изображений и текста, а также обеспечивает высокопроизводительную анимацию, переходы и обработку событий как для настольных, так и для мобильных приложений.
Структура
Konva имеет три типа классов. Stage, Layer и Shape. Все начинается со сцены. Этап определяет диапазон вашего рисования, как в блокноте.
Этап содержит несколько пользовательских слоев, и каждый слой имеет два <canvas> средства визуализации: средство визуализации сцены и средство визуализации графа попаданий. Средство визуализации сцены - это то, что вы можете видеть, а средство визуализации графика попаданий - это специальный скрытый холст, который используется для высокопроизводительного обнаружения событий.
Каждый слой может содержать несколько фигур и группу фигур. Stage, Layer и Shape похожи на узлы DOM на HTML-странице.
Stage
|
_______
| |
Layer Layer
| |
______ Shape
| |
Group Shape
|
_____
| |
Shape Group
Пример: инструмент аннотации
Чтобы создать инструмент аннотации, я сосредотачиваюсь на трех компонентах: ограничивающая рамка, изображение и преобразователь. Ограничивающая рамка предназначена для выбора области, на которой я хочу сфокусироваться. Изображение - это изображение, которое я хочу добавить ограничивающий прямоугольник для аннотации, а трансформатор должен управлять размером ограничивающего прямоугольника.
Для интеграции с React Konva предоставляет библиотеку HTML5 Canvas, работающую с React, под названием React Konva. React Konva - это библиотека JavaScript для рисования сложной графики на холсте с помощью React. Он обеспечивает декларативную и реактивную привязку к Konva Framework.
Демо
Конва Перформанс
batchdraw()Метод
Например, при событии onMouseMove, если я использую метод draw(), он может запускаться сотни раз в секунду.
Но при использовании batchdraw() Konva автоматически ограничивает количество перерисовок в секунду на основе максимального количества кадров в секунду, которое браузер может обработать в любой момент времени.
Если состояние прямоугольников изменилось, вы можете выбрать метод обновления. По сравнению с двухсторонним движением мыши, он немного отличается.
- Управление слоями
Konva создает отдельные слои, каждый слой имеет свои элементы холста. Это означает, что при переходе или обновлении чего-то мне не нужно перерисовывать все элементы холста.
Я разделяю Retangele и Image. При обновлении холста слой изображения не перерисовывается.
- Кэширование формы
Форма Cache Konva может значительно улучшить производительность. Этого можно добиться, используя метод cache() для преобразования узла в объект изображения.
- Перерисовка формы
Обычно, когда вам нужно обновить свои формы с помощью layer.draw(), но в небольшом случае вам не нужно заново перерисовывать весь слой, вы можете вместо этого использовать метод shape.draw(). Но у этого случая есть недостаток. То есть, если ваш узел должен быть размещен под другими узлами, shape.draw() переопределит предыдущую форму наверху.
Если я использую перерисовку формы, мой трансформатор будет покрыт моим новым прямоугольником.
Обсуждение
- Интегрируйте с CSS
