Шрифты и стили текста

В Paper.js текстовые объекты создаются с помощью класса PointText. Для его инициализации необходимо указать координаты начала текста через объект Point. Пример базового создания текста:

var text = new PointText(new Point(50, 100));
text.content = 'Пример текста';
text.fillColor = 'black';
  • content — текст, который будет отображаться.
  • fillColor — цвет текста, поддерживает CSS-форматы ('black', '#ff0000', 'rgb(255,0,0)').

Шрифты подключаются стандартными средствами CSS через свойства fontFamily:

text.fontFamily = 'Arial';
text.fontSize = 24;
text.fontWeight = 'bold'; // доступно 'normal', 'bold', 'lighter'
text.fontStyle = 'italic'; // доступно 'normal', 'italic', 'oblique'

Важно: Paper.js использует шрифты, уже подключённые к документу. Для кастомных шрифтов нужно подключать их через CSS.

Позиционирование текста и выравнивание

PointText располагается по точке anchor, которая задаётся свойством point при создании. Основные параметры выравнивания:

text.justification = 'center'; // 'left', 'right', 'center'
text.point = new Point(200, 150);
  • justification отвечает за горизонтальное выравнивание.
  • Вертикальное смещение контролируется координатой y в Point.

Особенность: позиция PointText всегда задаёт точку базовой линии текста, а не верхнего края.

Модификация стиля текста

TextItem поддерживает комплексные свойства стиля:

  • leading — интерлиньяж (расстояние между строками).
  • tracking — межсимвольный интервал (аналог letter-spacing).
  • applyMatrix — влияет на трансформации текста, например при масштабировании.

Пример настройки сложного текста:

var multiLine = new PointText(new Point(100, 200));
multiLine.content = 'Первая строка\nВторая строка';
multiLine.fontSize = 20;
multiLine.leading = 30;
multiLine.justification = 'right';
multiLine.fillColor = '#0066cc';

Анимация текста

Текстовые объекты можно анимировать так же, как и графические элементы. Свойства position, rotation, scaling изменяются в обработчике view.onFrame:

var animatedText = new PointText(new Point(50, 50));
animatedText.content = 'Двигающийся текст';
animatedText.fontSize = 18;

view.onFr ame = function(event) {
    animatedText.position.x += 1;
    animatedText.fillColor.hue += 1; // плавная смена цвета
}

Трансформация текста

PointText можно масштабировать, вращать и перемещать с помощью стандартных методов:

  • rotate(angle, point) — поворот на угол angle относительно точки point.
  • scale(factor) — масштабирование текста.
  • translate(delta) — смещение на вектор delta.
text.rotate(45, text.position);
text.scale(1.5);
text.translate(new Point(10, 20));

Совет: при анимации или трансформации лучше отключать applyMatrix, если нужно сохранить независимые свойства текста.

Динамическое изменение контента

Содержимое текста можно изменять в реальном времени:

var timer = 0;
var liveText = new PointText(new Point(150, 150));
liveText.fontSize = 20;
liveText.fillColor = 'green';

view.onFr ame = function(event) {
    timer += event.delta;
    liveText.content = 'Время: ' + timer.toFixed(2);
}

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

Интеграция с кривыми и графикой

TextItem может быть использован вместе с кривыми и фигурами:

var circle = new Path.Circle(new Point(200, 200), 50);
circle.strokeColor = 'black';

var curveText = new PointText(circle.position);
curveText.content = 'Текст на фоне круга';
curveText.justification = 'center';
curveText.fillColor = 'red';

Для более сложного эффекта можно расставлять несколько PointText вдоль кривой, вычисляя позицию каждой буквы через метод getPointAt(offset) кривой.

Работа с цветом и градиентами

Paper.js позволяет использовать не только сплошной цвет, но и градиенты:

var gradient = new Gradient(['red', 'yellow', 'green']);
var gradientColor = new GradientColor(gradient, new Point(0, 0), new Point(100, 0));

var gradText = new PointText(new Point(50, 300));
gradText.content = 'Градиентный текст';
gradText.fillColor = gradientColor;

Такой подход открывает возможности для визуально выразительных заголовков и надписей в интерактивной графике.

Оглавление