Класс NineSlicePlane и его параметры

NineSlicePlane в библиотеке PixiJS представляет собой мощный инструмент для создания масштабируемых спрайтов с сохранением пропорций углов и краев. Он особенно полезен для интерфейсных элементов, таких как кнопки, панели и окна, где необходимо сохранить четкие границы при изменении размеров.

Принцип работы

NineSlicePlane делит текстуру на девять частей:

  1. Четыре угла (верхний левый, верхний правый, нижний левый, нижний правый)
  2. Четыре стороны (верхняя, нижняя, левая, правая)
  3. Центральная область

Каждая часть имеет своё поведение при масштабировании:

  • Углы остаются неизменными.
  • Стороны растягиваются по одной оси (горизонтальной или вертикальной).
  • Центральная область растягивается по обеим осям.

Это позволяет изменять размеры объекта без искажения визуальной структуры.

Создание объекта

import * as PIXI from 'pixi.js';

const texture = PIXI.Texture.from('button.png');
const plane = new PIXI.NineSlicePlane(texture, 20, 20, 20, 20);

Параметры конструктора:

  • texture — объект PIXI.Texture, используемый для спрайта.
  • leftWidth — ширина левой грани (угла).
  • topHeight — высота верхней грани (угла).
  • rightWidth — ширина правой грани (угла).
  • bottomHeight — высота нижней грани (угла).

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

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

  1. width и height — задают размеры всей плоскости. Изменение этих свойств автоматически масштабирует центральную часть и стороны, сохраняя углы.
  2. tileScale — объект с координатами x и y, влияющий на масштабирование центральной области при использовании плиточного режима.
  3. tileScaleOffset — смещение для корректировки эффекта плиточного масштабирования.
  4. stretch — по умолчанию центральная область растягивается. Установка false позволяет использовать плиточный режим, когда центр повторяется вместо растяжения.

Примеры использования

Масштабируемая кнопка с сохранением углов:

plane.width = 200;
plane.height = 80;
app.stage.addChild(plane);

Плиточный центр для панелей:

plane.tileScale.x = 1.5;
plane.tileScale.y = 1.5;
plane.stretch = false;

Важные особенности

  • Производительность: NineSlicePlane оптимизирован для рендеринга множества интерфейсных элементов, поскольку каждый спрайт использует одну текстуру.
  • Совместимость с фильтрами: любые фильтры PIXI можно применять к объекту без разрушения структуры девяти частей.
  • Обновление размеров: изменение width или height в любое время динамически перераспределяет области, поэтому элементы интерфейса могут адаптироваться к любому разрешению.
  • Влияние на pivot и anchor: свойства pivot и anchor работают точно так же, как у обычного спрайта, что облегчает позиционирование.

Рекомендации по использованию

  • Углы должны быть достаточно большими, чтобы визуально сохранять структуру при масштабировании.
  • Если планируется плиточный центр, текстура центральной области должна быть симметричной, чтобы повторение выглядело естественно.
  • Для динамических интерфейсов, где размеры изменяются часто, лучше заранее настроить размеры углов и сторон, чтобы избежать артефактов при быстром масштабировании.

Итоговые ключевые параметры конструктора

Параметр Тип Описание
texture PIXI.Texture Основная текстура спрайта
leftWidth number Ширина левой грани (угла)
topHeight number Высота верхней грани (угла)
rightWidth number Ширина правой грани (угла)
bottomHeight number Высота нижней грани (угла)

Использование NineSlicePlane позволяет создавать адаптивные элементы интерфейса с сохранением визуальной целостности, легко управляя размерами и стилями через свойства объекта.

Оглавление