Raster и загрузка изображений

Raster — это объект в Paper.js, который используется для работы с растровыми изображениями внутри векторного холста. Он позволяет загружать, отображать, изменять размеры, обрезать, а также применять трансформации и фильтры к изображению. Raster можно рассматривать как мост между HTML-элементом <img> и сценой Paper.js.

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

Существует несколько способов создания Raster:

  1. Из изображения по URL или пути:
var raster = new Raster('images/photo.jpg');

Если указать строку, Paper.js автоматически загружает изображение. Для отслеживания момента, когда изображение полностью загружено, используется событие onLoad:

raster.onL oad = function() {
    console.log('Изображение загружено');
};
  1. Из HTMLImageElement или HTMLCanvasElement:
var img = document.getElementById('myImage');
var raster = new Raster(img);

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

  1. Создание пустого Raster и установка содержимого позже:
var raster = new Raster();
raster.source = 'images/photo.jpg';
raster.onL oad = function() {
    raster.position = view.center;
};

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

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

  • position — позиция центра изображения на холсте.
raster.position = new Point(200, 150);
  • size — размеры изображения в пикселях. Изменение размера через size автоматически масштабирует растровое изображение.
raster.size = new Size(300, 200);

  • bounds — объект Rectangle, задающий границы изображения на холсте. Полезно для определения точного расположения и размеров.

  • width, height — отдельные свойства ширины и высоты.

  • opacity — прозрачность изображения (0–1).

  • visible — видимость объекта.

  • source — URL, HTMLImageElement или Canvas, который использует Raster.

Работа с пикселями

Raster позволяет работать с отдельными пикселями через getPixel и setPixel:

var color = raster.getPixel(10, 20); // получение цвета пикселя
raster.setPixel(10, 20, new Color(1, 0, 0)); // установка красного цвета

Также можно использовать getImageData() и setImageData() для массовой обработки пикселей с помощью Canvas API:

var imageData = raster.getImageData();
for (var i = 0; i < imageData.data.length; i += 4) {
    imageData.data[i] = 255 - imageData.data[i]; // инверсия красного канала
}
raster.setImageData(imageData);

Манипуляции с изображением

Масштабирование и трансформация

  • scale(factor) — пропорциональное масштабирование.
  • rotate(angle) — вращение изображения вокруг центра.
  • translate(delta) — сдвиг на вектор delta.
raster.scale(0.5);
raster.rotate(45);
raster.position += new Point(50, 0);

Обрезка (cropping) Используется raster.bounds или raster.getSubCanvas(bounds) для создания новой части изображения:

var subRaster = new Raster(raster.getSubCanvas(new Rectangle(50, 50, 100, 100)));
subRaster.position = new Point(300, 300);

Слои и порядок Raster — это полноценный объект Paper.js, который может быть перемещен между слоями с помощью методов bringToFront() и sendToBack():

raster.bringToFront();

События Raster

  • onLoad — срабатывает, когда изображение полностью загружено.
  • onError — вызывается при ошибке загрузки.
  • onFrame — для анимации изменения изображения на каждом кадре.

Пример анимации, плавно вращающей изображение:

raster.onFr ame = function(event) {
    raster.rotate(1); // вращение на 1 градус за кадр
};

Взаимодействие с другими объектами

Raster можно комбинировать с векторными объектами, масками и фильтрами:

Маска

var circle = new Path.Circle(new Point(150, 150), 75);
raster.clipMask = circle; // отображается только внутри круга

Применение фильтров через Canvas

raster.blendMode = 'multiply';

Оптимизация работы с растровыми изображениями

  • Использовать меньшие размеры изображений для ускорения загрузки и уменьшения потребления памяти.
  • Загружать изображения заранее, чтобы избежать задержек на анимации.
  • Для динамической обработки пикселей лучше использовать getImageData() и setImageData() с последующей перерисовкой только измененной области.

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

  1. Фоновая текстура
var bg = new Raster('background.jpg');
bg.position = view.center;
bg.sendToBack();
  1. Интерактивная анимация
var sprite = new Raster('sprite.png');
sprite.position = view.center;

function onMouseMove(event) {
    sprite.position = event.point;
}
  1. Эффекты обработки изображения
var raster = new Raster('photo.jpg');
raster.onL oad = function() {
    var data = raster.getImageData();
    for (var i = 0; i < data.data.length; i += 4) {
        var avg = (data.data[i] + data.data[i+1] + data.data[i+2]) / 3;
        data.data[i] = data.data[i+1] = data.data[i+2] = avg; // черно-белый эффект
    }
    raster.setImageData(data);
};

Raster в Paper.js — мощный инструмент для интеграции растровой графики в векторные сцены, с поддержкой полной работы с пикселями, трансформациями, масками и динамическими эффектами. Его гибкость позволяет создавать как статические композиции, так и интерактивные анимации с полной управляемостью изображений на холсте.

Оглавление