Введение в Fabric.js: забавные вещи

высота линии

Еще одно свойство, которое может быть знакомо по CSS — это lineHeight . Это позволяет изменять вертикальный интервал между строками текста в многострочном тексте. В следующем примере для первого фрагмента текста lineHeight установлено значение 3, а для второго — 1. Результаты, которые вы видите, показаны на рисунке 16 .

  var lineHeight3 = new fabric.Text ('Lorem ipsum ...', {
	 lineHeight: 3
	 });
	 var lineHeight1 = new fabric.Text ('Lorem ipsum ...', {
	 lineHeight: 1
	 }); 

Рисунок 16. Примеры высоты линии

фоновый цвет

Наконец, backgroundColor — это то, что позволяет дать тексту фон. Обратите внимание, что фон заполняет только пространство, занимаемое символами текста, а не весь ограничивающий прямоугольник, как вы можете видеть на рисунке 17 . Это означает, что выравнивание текста изменяет способ отображения фона текста, как и высота строки, поскольку фон учитывает вертикальный интервал между строками, созданными lineHeight .

  var text = 'this is multilinentextnwithn custom lineheightn & background';
	 var textWithBackground = new fabric.Text (text, {
	 backgroundColor: 'rgb (0,200,0)'
	 }); 

Рисунок 17. Фоновые эффекты текста

События

Архитектура, управляемая событиями, является основой для удивительной мощи и гибкости в рамках. Fabric не является исключением и предоставляет обширную систему событий, начиная с низкоуровневых событий мыши и заканчивая объектными событиями высокого уровня.

Эти события позволяют вам использовать различные моменты различных действий, происходящих на холсте. Хотите знать, когда была нажата мышь? Просто наблюдайте за mouse:down событие mouse:down . Как насчет того, когда объект был добавлен на холст? В этом случае object:added для вас. А как насчет того, когда весь холст перерисовывается? Просто используйте after:render .

API события очень прост и напоминает API jQuery, Underscore.js или других популярных библиотек JS. Есть метод on для инициализации прослушивателя событий и метод off для его удаления.

Вот пример:

  var canvas = new fabric.Canvas ('...');
	 canvas.on ('mouse: down', function (options) {
	 console.log (options.e.clientX, options.e.clientY);
	 }); 

В этом коде я добавляю слушатель события mouse:down на холст и назначаю ему обработчик событий, который будет записывать координаты того, где произошло событие. Другими словами, обработчик будет регистрировать, где именно на холсте была нажата мышь. Обработчик событий получает объект параметров, который имеет два свойства: e , которое является исходным событием, и target , которая является объектом щелчка на холсте, если таковой имеется. Событие присутствует всегда, но цель существует, только если пользователь действительно щелкает объект на холсте. Кроме того, цель передается обработчикам событий только там, где это имеет смысл — например, для mouse:down но не для after:render (что означает, что весь холст был перерисован).

  canvas.on ('mouse: down', function (options) {
	 if (options.target) {
	 console.log («объект был нажат!», options.target.type);
	 }
	 }); 

В этом примере будет записано «объект был нажат!», Если щелкнуть объект. Это также добавит тип объекта, по которому щелкнули.

Некоторыми из других событий уровня мыши, доступных в Fabric, являются mouse:move и mouse:up . Общие события включают after:render , а также есть связанные с выбором события: before:selection:created , selection:created , selection:cleared . И, наконец, события объекта включают в себя object:modified , object:selected , object:moving , object:scaling , object:rotating и object:added .

События, подобные object:moving (или object:scaling ), запускаются непрерывно каждый раз, когда объект перемещается (или масштабируется) даже на пиксель. С другой стороны, такие события, как object:modified или selection:created , запускаются только в конце действия (изменение объекта или создание выделения).

Обратите внимание, как события прикрепляются прямо на холст ( canvas.on('mouse:down', ...) ). Как вы можете себе представить, это означает, что все события ограничены экземплярами canvas. Если у вас есть несколько холстов на странице, вы можете прикрепить к каждому из них разных слушателей событий. Все они независимы и уважают только те события, которые им назначены.

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

  var rect = new fabric.Rect ({width: 100, height: 50, fill: 'green'});
	 rect.on ('selected', function () {
	 console.log ('выделен прямоугольник');
	 });
	 var circle = new fabric.Circle ({радиус: 75, заливка: «синий»});
	 circle.on ('selected', function () {
	 console.log («выбрал круг»);
	 }); 

Здесь я присоединяю слушателей событий непосредственно к экземплярам прямоугольника и круга. Вместо object:selected , я использую выбранное событие. Точно так же я мог бы использовать измененное событие ( object:modified при присоединении к холсту), событие поворота (object:rotating при прикреплении к холсту) и так далее.

Посмотрите эту демонстрацию событий для более подробного изучения системы событий Fabric.

В следующей статье я перейду к более продвинутым функциям: группам, сериализации (и десериализации) и классам.

Эта статья была первоначально опубликована по адресу http://msdn.microsoft.com/en-us/magazine/jj856929.aspx и воспроизводится здесь с разрешения.