PointText

В Paper.js для отображения текста на холсте используется класс PointText. Этот объект позволяет размещать текст в заданной точке и управлять его внешним видом с помощью различных свойств. Объект PointText создаётся с указанием позиции в виде объекта Point или массива координат [x, y]:

var text = new PointText(new Point(100, 100));
text.content = 'Привет, Paper.js!';
text.fillColor = 'black';
text.fontSize = 24;

Здесь content задаёт текст, fillColor определяет цвет, а fontSize — размер шрифта. Позиция Point(100, 100) указывает координаты, где начинается отрисовка текста.

Основные свойства PointText

1. content Строка текста, которую необходимо отобразить. Можно обновлять динамически:

text.content = 'Новый текст';

2. fillColor Цвет текста. Принимает как строковое представление цвета, так и объект Color:

text.fillColor = 'red';
text.fillColor = new Color(0.2, 0.5, 0.8); // RGB от 0 до 1

3. fontSize Размер шрифта в пунктах:

text.fontSize = 30;

4. fontFamily Шрифт текста:

text.fontFamily = 'Arial';

5. fontWeight Толщина шрифта. Поддерживаются стандартные CSS-значения: 'normal', 'bold', '100'–'900':

text.fontWeight = 'bold';

6. justification Выравнивание текста относительно заданной позиции. Возможные значения: 'left', 'center', 'right':

text.justification = 'center';

7. visible Определяет, отображается текст на холсте или нет:

text.visible = false; // скрыть текст

Расположение и якорь текста

Позиция текста задаётся точкой Point(x, y), но по умолчанию это нижний левый угол текста. Для центровки или привязки к другим точкам используется свойство pivot или метод position:

text.position = new Point(200, 150); // центрирование текста по позиции

Это позволяет перемещать текст плавно:

text.position.x += 10;

Динамический текст и обновление

PointText может использоваться для отображения данных в реальном времени. Например, счётчик FPS:

var fpsText = new PointText(new Point(50, 50));
fpsText.fillColor = 'black';
fpsText.fontSize = 18;

function onFrame(event) {
    fpsText.content = 'FPS: ' + Math.round(view.getFrameRate());
}

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

Работа с градиентами и стилями

Цвет текста можно задавать не только как сплошной, но и как градиент:

text.fillColor = {
    gradient: {
        stops: ['red', 'yellow'],
        radial: false
    },
    origin: text.bounds.topLeft,
    destination: text.bounds.bottomRight
};

Также доступно применение тени:

text.shadowColor = 'rgba(0,0,0,0.5)';
text.shadowBlur = 12;
text.shadowOffset = new Point(4, 4);

Методы PointText

  • remove() — удаляет текст с холста:
text.remove();
  • clone() — создаёт точную копию текста с текущими свойствами:
var copy = text.clone();
copy.position.y += 50;
  • contains(point) — проверяет, находится ли точка внутри области текста. Полезно для интерактивности:
if (text.contains(event.point)) {
    text.fillColor = 'blue';
}

Интерактивные эффекты с текстом

Использование событий мыши и анимации позволяет создавать живые интерфейсы. Пример анимации перемещения текста по синусоиде:

var waveText = new PointText(new Point(100, 200));
waveText.content = 'Волнообразное движение';
waveText.fillColor = 'purple';
waveText.fontSize = 22;

function onFrame(event) {
    waveText.position.y = 200 + Math.sin(event.count / 10) * 50;
}

Ограничения и особенности

  • PointText не поддерживает многострочные тексты через символ \n. Для многострочного текста используется несколько объектов PointText, расположенных друг под другом.
  • Отсутствует поддержка сложной разметки (HTML, CSS) — только базовый шрифт и цвет.
  • Производительность зависит от количества одновременно отрисованных текстовых объектов; при больших объёмах текста лучше использовать спрайты или канвас-блоки.

Резюме ключевых моментов

  • PointText — простой и мощный инструмент для отображения текста на холсте Paper.js.
  • Управление через свойства: content, fillColor, fontSize, fontFamily, justification.
  • Поддерживает динамическое обновление, тени, градиенты и анимацию.
  • Для многострочного текста создаются отдельные объекты PointText.

Эти возможности делают PointText идеальным для создания интерфейсов, анимаций и визуализации данных на холсте Paper.js.

Оглавление