Konva.js — HTML5 2d canvas framework

Konva.js — HTML5 2d canvas framework

1131
ПОДЕЛИТЬСЯ

Приветствую. Представляю обществу проект Konva.js.

Konva.js — это фреймворк , который дозволяет работать c canvas 2d в объектном стиле с поддержкой событий.

Коротко перечень особенностей смотрится так:
Объектное API
Вложенные объекты и «всплытие» событий
Поддержка пары слоёв (пары canvas частей)
Кэширование объектов
Поддержка анимаций
Настраиваемый drag&drop
Фильтры
Готовые к использованию объекты, включая прямоугольник, круг, изображение, текст, линия, SVG путь, ..
Обычное создание собственных фигур
Событийная архитектура, которая дозволяет разрабам подписываться на действия конфигураций аттрибутов, отрисовки, и так дальше
Сериализация и десериализация
Продвинутый поиск с помощью селекторов stage.get(‘#foo’) и layer.get(‘.bar’)
Рабочий стол и мобильные действия
Интегрированная подержка HDPI устройств
и еще много различного

Дальше подробней разглядим способности фреймворка с примерами кода.

Введение
Всё начинается со Stage, который объеденяет в для себя пользовательские слои (Layer).
Каждый слой (Layer) представляет из себя один canvas элемент на страничке и может содержать в для себя фигуры, группы фигур либо группы групп.

Каждый элемент может быть стилизован и трансформирован.

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

Малый пример кода [Итог]:

// поначалу создаём контейнер
var stage = new Konva.Stage({
container: ‘container’, // индификатор div контейнера
width: 500,
height: 500
});

// дальше создаём слой
var layer = new Konva.Layer();

// создаём фигуру
var circle = new Konva.Circle({
x: stage.width() / 2,
y: stage.height() / 2,
radius: 70,
fill: ‘red’,
stroke: ‘black’,
strokeWidth: 4
});

// добавляем круг на слой
layer.add(circle);

// добавляем слой
stage.add(layer);

Базисные фигуры
Konva.js поддерживает последующие фигуры: прямоугольник (Rect), круг (Circle), овал (Ellipse), линия (Line), изображение (Image), текст (Text), текстовый путь (TextPath), звезда (Star), ярлычек (Label), svg путь (Path), верный многоугольник (RegularPolygon). Так же вы сможете сделать свою фигуру:

var triangle = new Konva.Shape({
drawFunc: function(context) {
context.beginPath();
context.moveTo(20, 50);
context.lineTo(220, 80);
context.quadraticCurveTo(150, 100, 260, 170);
context.closePath();

// особый способ KonvaJS
context.fillStrokeShape(this);
},
fill: ‘#00D2FF’,
stroke: ‘black’,
strokeWidth: 4
});

Стили
Любая фигура поддерживает последующие характеристики стилей:

Закрашивание (fill) — поддерживается сплошной цвет, градиенты и изображения
Контур (stroke, strokeWidth)
Тень (shadowColor, shadowOffset, shadowOpacity, shadowBlur)
Прозрачность (opacity)

var pentagon = new Konva.RegularPolygon({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
sides: 5,
radius: 70,
fill: ‘red’,
stroke: ‘black’,
strokeWidth: 4,
shadowOffsetX : 20,
shadowOffsetY : 25,
shadowBlur : 40,
opacity : 0.5
});

Итог:

Действия
Используя Konva.js, вы просто сможете подписываться на действия ввода (click, dblclick, mouseover, tap, dbltap, touchstart и так дальше), на действия конфигурации аттрибутов (scaleXChange, fillChange), и на действия drag&drop (dragstart, dragmove, dragend).

circle.on(‘mouseout touchend’, function() {
console.log(‘user input’);
});

circle.on(‘xChange’, function() {
console.log(‘position change’);
});

circle.on(‘dragend’, function() {
console.log(‘drag stopped’);
});

Рабочий код + демо

DRAG AND DROP
На данный момент нет поддержки drop событий (drop, dragenter, dragleave, dragover), но они довольно просто реализуются средствами фреймворка. Фреймоворк имеет встоенную поддержку drag.

Чтоб элемент можно было перетаскивать, довольно поставить характеристики draggable = true.

shape.draggable(‘true’);

При этом вы можете подписываться на drag&drop действия и настраивать ограничения по перемещению. [Демо].

Фильтры
Полный перечень доступных фильтров можно поглядеть в API документации по фильтрам. Konva.js включает в себя множество фильтров: размытие, инверсия, сепия, шум и так дальше.

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

image.cache();
image.filters([Konva.Filters.Invert]);

Анимация
Создавать анимацию можно 2-мя методами:

Через объект «Animation»: 1.

var anim = new Konva.Animation(function(frame) {
var time = frame.time,
timeDiff = frame.timeDiff,
frameRate = frame.frameRate;
// update stuff
}, layer);
anim.start();
[Демо]

2. Через объект «Tween»:

var tween = new Konva.Tween({
node: rect,
duration: 1,
x: 140,
rotation: Math.PI * 2,
opacity: 1,
strokeWidth: 6
});
tween.play();
[Демо]

Селекторы
Konva.js дозволяет находить объекты с помощью селекторов, используя способы find (возвращает коллекцию) и findOne (возвращает 1-ый элемент коллекции): При построении большого приложения, очень комфортно применять поиск по сделанным элементам.

var circle = new Konva.Circle({
radius: 10,
fill: ‘red’,
id : ‘face’,
name : ‘red circle’
});
layer.add(circle);
// дальше производим поиск

// поиск по типу фигуры
layer.find(‘Circle’); // все круги

// поиск по id
layer.findOne(‘#face’);

// поиск по имени (аналогия с css классами)
layer.find(‘.red’)

Сериализация и десериализация
Все сделанные объекты вы сможете сохранить в JSON формат, чтоб, к примеру, сохранить на сервер либо локальное хранилище:

var json = stage.toJSON();
А так же сделать элементы из JSON:
var json = ‘{"attrs":{"width":578,"height":200},"className":"Stage","children":[{"attrs":{},"className":"Layer","children":[{"attrs":{"x":100,"y":100,"sides":6,"radius":70,"fill":"red","stroke":"black","strokeWidth":4},"className":"RegularPolygon"}]}]}’;

var stage = Konva.Node.create(json, ‘container’);

Производительность
Konva.js имеет множество инструментов, для значимого увеличения производительности.

1. Это может существенно повысить производительность отрисовки сложных объектов как, к примеру, текст либо объекты с тенями и контурами. Кеширование дозволяет отрисовать некий элемент в буфферный canvas и позже рисовать его оттуда.

shape.cache();
[Демо]

Допустим, приложение состоит из сложного фона с тектом и пары передвигаемый фигур. Так как фреймворк поддерживает несколько canvas частей, вы сможете распределять объекты на ваше усмотрение. Работа со слоями. Разумно будет фон и текст перенести на один слой, а фигуры на иной. 2. При этом при обновлении положения фигур, фоновый слой можно не перерисовывать.

[Демо]

Наиболее подробный перечень советов по увеличению производительности доступен тут: http://konvajs.github.io/docs/performance/All_Performance_Tips.html

Заключение
GitHub: https://github.com/konvajs/konva
Домашняя страничка: http://konvajs.github.io/
Документация с примерами: http://konvajs.github.io/docs/
Полное API: http://konvajs.github.io/api/Konva.html

Данный проект является форком известной библиотеки KineticJS, которая создателем уже не поддерживается.
habrahabr.ru Перечень конфигураций от крайней официальной версии KineticJS можно узреть тут.