Обрезка и маскирование

Paper.js предоставляет мощный инструментарий для работы с векторной графикой на HTML5 Canvas. Одной из ключевых возможностей является управление видимостью и формой объектов с помощью обрезки (clipping) и маскирования (masking). Эти механизмы позволяют создавать сложные композиции, ограничивать области отображения объектов и реализовывать эффект «окна» для вложенных элементов.

Clipping: обрезка объектов

Обрезка в Paper.js реализуется через свойство clipMask или использование специального типа ClippingGroup. Основная идея — один объект задаёт форму, в пределах которой будут видны все вложенные элементы.

Создание обрезающего объекта

  1. Прямоугольник в качестве обрезки:
var rect = new Path.Rectangle({
    point: [50, 50],
    size: [200, 150],
    fillColor: 'blue'
});

var circle = new Path.Circle({
    center: [150, 125],
    radius: 100,
    fillColor: 'red'
});

// Создание группы и установка clipping
var group = new Group([rect, circle]);
rect.clipped = true;  // rect выступает маской

Ключевой момент: свойство clipped определяет объект, который становится маской, показывающей только пересечение с другими элементами группы.

  1. Использование Path любой формы:

Любая векторная форма, будь то кривая Безье или многоугольник, может быть назначена в качестве маски. При этом Paper.js автоматически вычисляет пересечение объектов и отображает только ту часть, которая находится внутри маски.

var star = new Path.Star({
    center: [200, 200],
    points: 5,
    radius1: 60,
    radius2: 120,
    fillColor: 'green'
});

var image = new Raster('image.jpg');
var clipGroup = new Group([star, image]);
star.clipped = true;

Особенности:

  • Маска учитывает только визуальные границы объекта.
  • Цвет и прозрачность маски не влияют на результат — важна только форма.
  • Маска может быть вложенной: обрезка внутри обрезки работает рекурсивно.

Masking: маскирование с помощью непрозрачности

Маска — это способ показать часть объекта на основе прозрачности другого объекта. В Paper.js это реализуется через свойство opacityMask или через группы с установленными blendMode.

Применение маски через группы

var gradient = new Path.Rectangle({
    point: [0, 0],
    size: [400, 400],
    fillColor: {
        gradient: {
            stops: [['white', 0], ['black', 1]]
        },
        origin: [0, 0],
        destination: [400, 400]
    }
});

var raster = new Raster('image.jpg');
raster.position = view.center;

var maskGroup = new Group([raster, gradient]);
gradient.clipped = true;  // градиент выступает маской непрозрачности

Особенности:

  • Белые области маски показывают исходный объект полностью, черные — скрывают.
  • Полупрозрачные области создают эффект градиентного исчезновения.
  • Маскирование позволяет создавать мягкие переходы и эффекты затенения без ручного редактирования исходного объекта.

Совмещение обрезки и маскирования

Paper.js допускает одновременное использование обрезки и маскирования:

var rect = new Path.Rectangle([100, 100], [300, 200]);
var circle = new Path.Circle([250, 200], 100);

circle.fillColor = 'orange';

var group = new Group([rect, circle]);
rect.clipped = true;  // обрезка

var gradientMask = new Path.Circle({
    center: [250, 200],
    radius: 150,
    fillColor: 'white'
});
group.addChild(gradientMask);
gradientMask.clipped = true;  // дополнительная маска

Важно: порядок объектов в группе имеет значение. Paper.js применяет маску к нижележащим элементам, поэтому маски и обрезающие объекты должны располагаться правильно в иерархии.

Работа с динамическими масками

Paper.js поддерживает анимацию масок и обрезающих объектов. Изменяя координаты, форму или кривизну маски, можно создавать плавные переходы и интерактивные эффекты.

var mask = new Path.Circle([200, 200], 50);
mask.fillColor = 'black';

var raster = new Raster('image.jpg');
raster.position = view.center;

mask.clipped = true;

view.onFr ame = function(event) {
    mask.scale(1 + 0.01 * Math.sin(event.count * 0.1));
};

Эта техника позволяет реализовать эффекты «увеличивающейся области видимости» или динамическое подсвечивание объектов.

Практические советы

  • Для сложных форм и пересечений лучше использовать Path вместо Shape, так как Path предоставляет больше контроля над сегментами.
  • Группы с обрезкой можно вкладывать друг в друга, создавая многоуровневые эффекты.
  • Для масок с градиентами рекомендуется использовать Path с fillColor-градиентом, а не растровые изображения, чтобы сохранить векторную гибкость и масштабируемость.
  • Всегда следить за порядком слоев — неправильная последовательность объектов может привести к непредсказуемому отображению.

Эти механизмы делают Paper.js особенно удобной для создания интерактивной графики, инфографики, сложных UI-компонентов и анимаций, где требуется точный контроль за видимостью объектов и форм.

Оглавление