Что, если вы хотите отображать на холсте не только изображения и векторные фигуры, но и текст? Ткань тебя прикроет! Встречайте ткань.Текстовые объекты.
Есть две причины, по которым мы предоставляем текстовую абстракцию в Fabric. Во-первых, это позволить работать с текстом объектно-ориентированным способом. Нативные методы холста, как обычно, позволяют заполнять или обводить текст только на очень низком уровне. Создавая экземпляры Fabric.Text, мы можем работать с текстом так же, как с любым другим объектом Fabric — перемещать его, масштабировать, изменять его свойства и т. д.
Вторая причина — предоставить гораздо более богатую функциональность, чем то, что дает нам Canvas. Некоторые из дополнений Fabric включают в себя:
- Поддержка многострочного текста. К сожалению, собственные текстовые методы просто игнорируют новые строки.
- Выравнивание текста По левому краю, по центру, по правому краю. Полезно при работе с многострочным текстом.
- Фон текста Фон также учитывает выравнивание текста.
- Оформление текста Подчеркивание, надчеркивание, зачеркивание.
- Высота строки. Полезно при работе с многострочным текстом.
- Интервал между символами Делает текст более компактным или более разнесенным.
- Поддиапазоны применяют цвета и свойства к поддиапазонам вашего текстового объекта.
- Многобайтовая поддержка смайлов!
- При редактировании холста с помощью интерактивного класса вы можете вводить текст прямо поверх холста.
Как насчет примера «Привет, мир»?
var text = new fabric.Text('hello world', { left: 100, top: 100 });
canvas.add(text);Это верно! Отобразить текст на холсте так же просто, как добавить экземпляр Fabric.Text в нужном месте. Как видите, единственным обязательным первым параметром является фактическая текстовая строка. Второй аргумент — это обычный объект параметров, который может иметь любые обычные свойства left, top, fill, opacity и т. д.
Но, конечно, текстовые объекты также имеют свои собственные уникальные свойства, связанные с текстом. Давайте посмотрим на некоторые из них:
семейство шрифтов
По умолчанию это свойство установлено как «Times New Roman». Это свойство позволяет нам изменять семейство шрифтов, используемых для визуализации текстового объекта. Изменение этого значения немедленно приведет к тому, что текст будет отображаться новым шрифтом.
var comicSansText = new fabric.Text("I'm in Comic Sans", {
fontFamily: 'Comic Sans'
});
размер шрифта
Размер шрифта управляет размером отображаемого текста. Обратите внимание: в отличие от других объектов в Fabric, вы не можете напрямую изменять свойства ширины/высоты текста. Вместо этого вам нужно будет изменить значение «fontSize», чтобы увеличить или уменьшить текстовые объекты. Либо так, либо вы всегда можете использовать свойства ScaleX/scaleY.
var text40 = new fabric.Text("I'm at fontSize 40", {
fontSize: 40
});
var text20 = new fabric.Text("I'm at fontSize 20", {
fontSize: 20
});
шрифтВес
Вес шрифта позволяет сделать текст толще или тоньше. Как и в CSS, вы можете использовать либо ключевые слова («обычный», «жирный»), либо цифры (100, 200, 400, 600, 800). Обратите внимание: можете ли вы использовать определенный вес, зависит от наличия этого веса для выбранного шрифта. Если вы используете удаленный шрифт, вам необходимо убедиться, что вы предоставили определения шрифта как обычного, так и полужирного (а также любой другой необходимой толщины).
var normalText = new fabric.Text("I'm a normal text", {
fontWeight: 'normal'
});
var boldText = new fabric.Text("I'm at bold text", {
fontWeight: 'bold'
});
текстУкрашение
Оформление текста позволяет добавлять к тексту подчеркивание, перечеркивание или зачеркивание. Это похоже на CSS, но Fabric идет немного дальше и позволяет использовать любую комбинацию вышеперечисленного. Таким образом, вы можете иметь текст, который одновременно подчеркнут и надчеркнут, или подчеркнут и зачеркнут, и так далее.
var underlineText = new fabric.Text("I'm an underlined text", {
underline; true
});
var strokeThroughText = new fabric.Text("I'm a stroke-through text", {
linethrough: true
});
var overlineText = new fabric.Text("I'm an overline text", {
overline: true
});
тень
До версии 1.3.0 это свойство называлось «textShadow».
Тень текста состоит из 4 компонентов: цвета, горизонтального смещения, вертикального смещения и размера размытия. Это может показаться очень знакомым, если вы работали с тенями в CSS. При изменении этих значений возможно множество комбинаций.
var shadowText1 = new fabric.Text("I'm a text with shadow", {
shadow: 'rgba(0,0,0,0.3) 5px 5px 5px'
});
var shadowText2 = new fabric.Text("And another shadow", {
shadow: 'rgba(0,0,0,0.2) 0 0 5px'
});
var shadowText3 = new fabric.Text("Lorem ipsum dolor sit", {
shadow: 'green -5px -5px 3px'
});
стиль шрифта
Стиль шрифта может иметь одно из двух значений: обычный или курсив. Это похоже на одноименное свойство CSS.
var italicText = new fabric.Text("A very fancy italic text", {
fontStyle: 'italic',
fontFamily: 'Delicious'
});
var anotherItalicText = new fabric.Text("another italic text", {
fontStyle: 'italic',
fontFamily: 'Hoefler Text'
});
ход и ширина хода
Комбинируя Stroke (цвет обводки) и StrokeWidth (ее ширину), вы можете добиться некоторых интересных эффектов в своем тексте. Вот несколько примеров:
var textWithStroke = new fabric.Text("Text with a stroke", {
stroke: '#ff1318',
strokeWidth: 1
});
var loremIpsumDolor = new fabric.Text("Lorem ipsum dolor", {
fontFamily: 'Impact',
stroke: '#c3bfbf',
strokeWidth: 3
});
textAlign
Выравнивание текста полезно при работе с многострочным текстом. При однострочном тексте ширина ограничительной рамки всегда точно соответствует ширине этой линии, поэтому выравнивать нечего.
Допустимые значения: «слева», «центра» и «справа».
var text = 'this is\na multiline\ntext\naligned right!';
var alignedRightText = new fabric.Text(text, {
textAlign: 'right'
});
высота линии
Еще одно свойство, знакомое по CSS, — это lineHeight. Это позволяет нам изменять расстояние по вертикали между текстовыми строками в многострочном тексте. В следующем примере первый фрагмент текста имеет lineHeight, равный 3, а второй — 1.
var lineHeight3 = new fabric.Text('Lorem ipsum ...', {
lineHeight: 3
});
var lineHeight1 = new fabric.Text('Lorem ipsum ...', {
lineHeight: 1
});
текстФонЦвет
Наконец, textBackgroundColor позволяет задать фон для текста. Обратите внимание, что фон заполняет только пространство, занимаемое текстовыми символами, а не всю ограничивающую рамку. Это означает, что выравнивание текста меняет способ отображения фона текста. То же самое относится и к высоте строки, поскольку фон учитывает это вертикальное пространство между строками, созданное с помощью lineHeight.
var text = 'this is\na multiline\ntext\nwith\ncustom lineheight\n&background';
var textWithBackground = new fabric.Text(text, {
textBackgroundColor: 'rgb(0,200,0)'
});