Fabric.js дополнение для HTML5 canvas

Fabric.js дополняет HTML5 canvas

Разработчик JavaScript Юрий Зайцев и создатель библиотеки Fabric.js на блоге microsoft опубликовал три статьи, в которых он подробно описал работу библиотеки Fabric.js с элементом HTML5 canvas . Тем кто впервые слышит о HTML5 canvas или нужно напомнить, рекомендую прочитать статью Руководство по HTML5 Canvas .

Fabric добавляет недостающие модели объектов для HTML5 canvas, а так же как и анализатор SVG, слой интерактивности, и целого набора других обязательных инструментов. Это проект open-source, под лицензией MIT, с поддержкой в течении многих лет.

Почему Fabric?

В статье Руководство по HTML5 Canvas описаны возможности HTML5 canvas, но одно дело, когда вы сделали несколько основных форм на холсте и забыть о них. А когда вам нужно сделать более сложные формы, для этого и нужен Fabric.js.

Основные методы canvas позволяют нам, только, выполнение простых графических команд, не видя изменения всего изображения холста. Что бы нарисовать прямоугольник fillRect(left, top, width, height) , нужно нарисовать линию, комбинация moveTo(left, top) и lineTo(x, y) . Это, как если бы вы рисовали на холсте с помощью кисти, слои краски все больше и больше, и очень мало контроля.

На примере ниже, видно разницу.

Прямоугольник с корневыми API canvas:



// Ссылка на элемент холста (id="c")
var canvasEl = document.getElementById('c');
// Получить 2D контекст для рисования на ("bitmap" упомянутые ранее)
var ctx = canvasEl.getContext('2d');
// Установить цвет заливки контекста
ctx.fillStyle = 'red';
// Создаем прямоугольник в точке 100 100, с размерами 20x20
ctx.fillRect(100, 100, 20, 20);


Прямоугольник с Fabric:



// Создать оболочку вокруг корневого API canvas (id="c")
  var canvas = new fabric.Canvas('c');
  // Создаем объект прямоугольника
  var rect = new fabric.Rect({
  left: 100,
  top: 100,
  fill: 'red',
  width: 20,
  height: 20
  });
  // добавили прямоугольник на холст
canvas.add(rect);


Из примера видно, какая разница в подходах с работой canvas

Прямоугольник с Fabric
Прямоугольник с Fabric

Давайте попробуем повернуть его на 45 градусов с помощью Fabric



var canvas = new fabric.Canvas('c');
// создание прямоугольника с angle=45
var rect = new fabric.Rect({
  left: 100,
  top: 100,
  fill: 'red',
  width: 20,
  height: 20,
  angle: 45
});
canvas.add(rect);


Для перемещения прямоугольника, вам нужно сначала стереть все ранее сделанное содержание, а затем нарисуйте прямоугольник на новое место.



var canvas = new fabric.Canvas('c');
...
canvas.add(rect);
...
rect.set({ left: 20, top: 50 });
canvas.renderAll();


В статье описаны и другие фигуры Fabric, круги, треугольники, эллипсы и т.д. Материал содержит семь основных форм:

  1. fabric.Circle
  2. fabric.Ellipse
  3. fabric.Line
  4. fabric.Polygon
  5. fabric.Polyline
  6. fabric.Rect
  7. fabric.Triangle

Чтобы нарисовать круг, просто создайте объект circle и добавьте его на холст.



var circle = new fabric.Circle({
  radius: 20, fill: 'green', left: 100, top: 100
});
var triangle = new fabric.Triangle({
  width: 20, height: 30, fill: 'blue', left: 50, top: 50
});
canvas.add(circle, triangle);


Фигуры Fabric
Фигуры Fabric

Управление объектами

Создание геометрических фигур с Fabric это далеко не всё. Есть возможность, изменять свойства объекта (цвет, прозрачность, размер, положение) о некоторые взаимодействие с мышью.

В примере ранее, демонстрация метода set с вызовом set({ left: 20, top: 50 }) расположили объект в другом месте. Подобным же образом, вы можете изменить любое другое свойство объекта.

Объекты Fabric имеют свойства, связанные с позиционированием (left, top), размеры (width, height), визуализации (fill, opacity, stroke, strokeWidth), масштабирования и вращения (scaleX, scaleY, angle), и перелистывать (flipX, flipY).

Вот пример того, как изменить некоторые свойства прямоугольника:



var canvas = new fabric.Canvas('c');
  ...
  canvas.add(rect);
  rect.set('fill', 'red');
  rect.set({ strokeWidth: 5, stroke: 'rgba(100,200,200,0.5)' });
  rect.set('angle', 15).set('flipY', true);


Cвойства прямоугольника
Управление объектами

Сначала значение установим в red . Следующий значение strokeWidth и stroke , добавляет прямоугольнику 5px светло-зеленого цвета. И в конце, код изменяет угол, свойством flipY . Обратите внимание, как каждое свойство использует немного другой синтаксис.

Существует общий метод get , а также ряд спецификаций. Объекты со свойством width , используют get('width') или getWidth() . Чтобы получить scaleX значение, вы должны использовать get('scaleX') , getScaleX() и так далее. Есть метод, как getWidth или getScaleX для каждого общего свойства объекта (stroke, strokeWidth, angle, угол и т.д.).

Возможно, вы, заметили, что в предыдущем примере, объекты были созданы с той же конфигурацией хэша, как только что мы использовали в наборе методов. Позже Вы можете настроить объект, на момент создания или использования метода set :



var rect = new fabric.Rect({ width: 10, height: 20, fill: '#f55', opacity: 0.7 });
// или функционально идентичны
var rect = new fabric.Rect();
rect.set({ width: 10, height: 20, fill: '#f55', opacity: 0.7 });


Параметры по умолчанию

Если не указывать конкретные параметры в процессе создания объектов, в Fabric есть свой набор свойств по умолчанию. Используйте следующий код, что бы убедиться в этом:



var rect = new fabric.Rect(); // не замечают никаких опции для передчи
rect.getWidth(); // 0
rect.getHeight(); // 0
rect.getLeft(); // 0
rect.getTop(); // 0
rect.getFill(); // rgb(0,0,0)
rect.getStroke(); // null
rect.getOpacity(); // 1


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

  • Расположение 0,0,
  • Цвет — черный, непрозрачный
  • Нет размера (ширина и высота равна 0)

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

Параметры по умолчанию
Параметры по умолчанию

Иерархии и наследования

Объекты Fabric не существуют независимых друг от друга. Они образуют очень точное иерархии. Большинство объекты наследники корня fabric.Object . В fabric.Object корневой объект представляет собой что то вроде двумерной фигуры, расположена на двумерной плоскости холста, имеющее свойства слева/вверху, ширина/высота, и с другими графическими характеристиками. Свойства, перечисляемые для objects—fill , stroke , angle , opacity , flip , и так далее-являются общими для всех объектов Fabric, которые наследуются от fabric.Object .

Это наследование позволяет определить методы fabric.Object и часть их среди всех дочерний классы. Например, если вам нужно метод getAngleInRadians для всех объектов, нужно создать fabric.Object.prototype , следующим образом:



fabric.Object.prototype.getAngleInRadians = function() {
  return this.getAngle() / 180 * Math.PI;
};
var rect = new fabric.Rect({ angle: 45 });
rect.getAngleInRadians(); // 0.785...
var circle = new fabric.Circle({ angle: 30, radius: 10 });
circle.getAngleInRadians(); // 0.523...
circle instanceof fabric.Circle; // true
circle instanceof fabric.Object; // true


Этот метод доступен для всех случаев.

Даже если дочерний классы наследуют от fabric.Object , они также часто определяют свои собственные методы и свойства. Например, fabric.Circle нуждается в radius свойства fabric.Image — которые мы рассмотрим позже в этой статье, и методы GetElement SetElement для элемента HTML <img> .

Canvas

После того, как вы разобрались с объектами, давайте вернемся к сanvas.

На всех примерах Fabric создание новых объектов холста fabric.Canvas('...') . В fabric.Canvas объекты работает как оболочка для элементов <canvas> и отвечает за управление всеми объектами Fabric для холста. Он принимает ID элемента и возвращает экземпляр fabric.Canvas .

Вы можете добавить к нему объекты, упоминание для документа, или удалить их, как показано здесь:



var canvas = new fabric.Canvas('c');
var rect = new fabric.Rect();
canvas.add(rect); // добавить обьект
canvas.item(0); // упоминание fabric.Rect сначала (первый объект)
canvas.getObjects(); // получить все объекты на холсте (rect будет первый и единственный)
canvas.remove(rect); // удаление добавленного fabric.Rect


Управление объектами является основной целью fabric.Canvas , но он также служит для конфигурации хоста. Вам нужно установить цвет фона или изображение для canvas, закрепить все содержимое в определенной области, расположенный с разной шириной и высотой, а также указать, является ли интерактивным холст или нет? Все эти варианты (и другие) могут быть установлены на fabric.Canvas , в момент создания или позже. Код ниже показывает пример:



var canvas = new fabric.Canvas('c', {
  backgroundColor: 'rgb(100,100,200)',
  selectionColor: 'blue',
  selectionLineWidth: 2
  // ...
});
// или
var canvas = new fabric.Canvas('c');
canvas.backgroundImage = 'http://...';
canvas.onFpsUpdate = function(){ /* ... */ };
// ...


Интерактивность

В Fabric встроенная уникальная функция, которая позволяет манипулировать объектами на холсте с помощью мыши (или через сенсорные устройства touch). Как только вы инициализируете холст, через новый вызов fabric.Canvas('...') , выбираем объект что бы изменять размер и поворачивать его.

Изменять размер и поварачивать объект
Изменять размер и поварачивать объект
Изменять размер и поварачивать группу обьектов

Изменять размер и поворачивать группу объектов

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

Для управления этой интерактивностью, используйте свойства Fabric с выбором Boolean на объект canvas в сочетании с выбором логических свойств отдельных объектов:



var canvas = new fabric.Canvas('c');
...
canvas.selection = false; // отключение выбора группы
rect.set('selectable', false); // создать невыбираемый объект


Если вы не хотите разрешить интерактивность для всех слоев. Вы всегда можете заменить fabric.Canvas на fabric.StaticCanvas . Синтаксис инициализации абсолютно одинаковый:



var staticCanvas = new fabric.StaticCanvas('c');
staticCanvas.add(
  new fabric.Rect({
  width: 10, height: 20,
  left: 100, top: 100,
  fill: 'yellow',
  angle: 30
  }));


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

Изображения

Добавление геометрических фигур на холсте это весело, но Fabric может легко работать с изображениями. Вот как можно создать экземпляр объект fabric.Image и добавить его на холсте, сначала в HTML, а потом в JavaScript:

HTML


<canvas id="c"></canvas>
<img src=
http://pixelcom.crimea.ua/"my_image.png" id="my-image">


JavaScript


var canvas = new fabric.Canvas('c');
var imgElement = document.getElementById('my-img');
var imgInstance = new fabric.Image(imgElement, {
  left: 100,
  top: 100,
  angle: 30,
  opacity: 0.85
});
canvas.add(imgInstance);


Заметьте, что элементом изображения управляет конструктор fabric.Image . Изображение, выглядит без изменений. Но если установить значения слева/вверху до 100/100, угол до 30, и непрозрачность до 0,85. Результат на рисунке ниже:

конструктор fabric.Image
Результат установок конструктора fabric.Image

Если вдруг изображение не отобразилось, а вместо его только адрес URL изображения, можете использовать fabric.Image.fromURL:



fabric.Image.fromURL('my_image.png', function(oImg) {
  canvas.add(oImg);
});


Нужно просто вызвать fabric.Image.fromURL , где после URL адрес изображения, и дать ему обратный вызова, чтобы вызвать один раз загрузку изображение. Функция обратного вызова получает уже созданный объект fabric.Image в качестве своего первого аргумента. В этот момент, вы можете добавить его в ваш холст или, если нужно сначала изменить его, а потом добавить его, как показано здесь:



fabric.Image.fromURL('my_image.png', function(oImg) {
  // уменьшать изображения, и перевернуть его, перед тем как добавить его на холст
  oImg.scale(0.5).setFlipX(true);
  canvas.add(oImg);
});


Path и PathGroup

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

Path в Fabric представляют собой контур фигуры, которые можно залить, размыть и изменить. Path состоят из последовательности команд, которые, по сути, имитируют перо переходя от одной точки к другой. С помощью таких команд, move , line , curve , и другие, Path делает форму фигуры невероятно сложной. И с помощью группы сторон (PathGroup), возможностей еще больше.

Path в Fabric напоминают элементы SVG <path> . Они используют тот же самый набор команд, могут быть созданы элементы from <path> , и может быть последовательность в них. Но об этом позже, а пока создадим Path в ручную. Вместо этого, мы будем использовать Fabric встроенный в SVG parser. Но, чтобы понять объекты Path, давайте создадим простой пример:



var canvas = new fabric.Canvas('c');
var path = new fabric.Path('M 0 0 L 200 100 L 170 200 z');
path.set({ left: 120, top: 120 });
canvas.add(path);


Простой пример объекта Path
Простой пример объекта Path

Здесь создан пример объекта fabric.Path и передан в строку path. Это не сложно понять. М — команда перемещения и указывает невидимому перу двигаться в точку 0, 0 . L — заставляет перо чертить линию в точке, 200, 100 . Затем, другой L создает линию до 170, 200 . И, наконец, z закрывает текущий путь и заканчивает форму.

С fabric.Path просто, как и любой другой объект в Fabric, вы можете также изменить некоторые его свойства, как показано на рисунке:



...
var path = new fabric.Path('M 0 0 L 300 100 L 200 300 z');
...
path.set({ fill: 'red', stroke: 'green', opacity: 0.5 });
canvas.add(path);


Изменить свойства fabric.Path
Изменить свойства fabric.Path

Из любопытства, давайте рассмотрим чуть более сложный синтаксис путей пера Path. Вы увидите, почему создать Path со сторонами, может быть, не лучшая идеей:



...
var path = new fabric.Path('M121.32,0L44.58,0C36.67,0,29.5,3.22,24.31,8.41\
c-5.19,5.19-8.41,12.37-8.41,20.28c0,15.82,12.87,28.69,28.69,28.69c0,0,4.4,\
0,7.48,0C36.66,72.78,8.4,101.04,8.4,101.04C2.98,106.45,0,113.66,0,121.32\
c0,7.66,2.98,14.87,8.4,20.29l0,0c5.42,5.42,12.62,8.4,20.28,8.4c7.66,0,14.87\
-2.98,20.29-8.4c0,0,28.26-28.25,43.66-43.66c0,3.08,0,7.48,0,7.48c0,15.82,\
12.87,28.69,28.69,28.69c7.66,0,14.87-2.99,20.29-8.4c5.42-5.42,8.4-12.62,8.4\
-20.28l0-76.74c0-7.66-2.98-14.87-8.4-20.29C136.19,2.98,128.98,0,121.32,0z');
canvas.add(path.set({ left: 100, top: 200 }));


Здесь перо начинает рисовать с точки 121.32, 0 . То есть L (линия) команда, которая переносит перо до 44.58, 0 . Пока все идёт хорошо. Сейчас выполняется команда C , что означает “cubic bezier” (кубическое кривое Безье). Эта команда заставляет перо нарисовать кривую Безье от текущей точки до 36.67, 0 . Он использует 29,5, 3,22, как контрольную точку в начале строки и 24,31, 8,41 качестве контрольной точки в конце линии. Вся эта операция затем выполняет команды десятки других Безье, которые, наконец, создать красивую форму стрелки, как показано на рисунке:

Cложный синтаксис путей пера Path
Cложный синтаксис путей пера Path

Скорее всего, вы не будете работать с такими зверями непосредственно. Вместо этого, можно использовать методы что-то вроде fabric.loadSVGFromString или fabric.loadSVGFromURL для загрузки всего файла SVG, и пусть анализатор Fabric SVG делать свою работу.

Объекты Path,fabric.PathGroup наследуется от fabric.Object , его можно добавить на холст, как и любые другие объекты и так же манипулировать им.

В заключение

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

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

Демо

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *


9 + = 16

Можно использовать следующие HTML -теги и атрибуты: <a href= http://pixelcom.crimea.ua/"" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>