Загрузка и отображение растровых изображений

Для работы с растровыми изображениями необходимо создать экземпляр Two, который отвечает за рендеринг графики. Основные параметры при инициализации:

const elem = document.getElementById('draw-shapes');
const two = new Two({
  width: 800,
  height: 600,
  type: Two.Types.canvas // Возможны варианты 'webgl' или 'svg'
}).appendTo(elem);
  • width и height задают размеры холста.
  • type определяет рендерер. canvas подходит для большинства случаев, webgl обеспечивает аппаратное ускорение, svg — для масштабируемой векторной графики.

После создания экземпляра Two.js сцена готова к добавлению объектов.

Загрузка растрового изображения

Для отображения изображений используется объект Two.Texture. Этот объект инкапсулирует изображение и может быть применен к фигурам.

const texture = new Two.Texture('images/example.png', function() {
  console.log('Изображение загружено');
});
  • Первый аргумент — путь к изображению.
  • Второй аргумент — функция обратного вызова, которая вызывается после полной загрузки изображения. Это важно для гарантии того, что текстура готова к использованию перед её применением.

Two.js также поддерживает прямое создание изображений через объект Two.Image, который комбинирует фигуру и текстуру.

Создание и отображение изображения на холсте

После загрузки текстуры можно создать объект Two.Image и добавить его на сцену:

const img = two.makeImage(texture, 400, 300, 200, 150);
  • Параметры: текстура, координата X, координата Y, ширина, высота.
  • Объект Two.Image наследует методы трансформации от Two.Shape: можно изменять позицию, масштаб, поворот.

Пример применения трансформации:

img.rotation = Math.PI / 4; // Поворот на 45 градусов
img.scale = 1.5; // Масштабирование на 150%

Управление загрузкой и состоянием изображений

Для корректного отображения важно проверять готовность текстуры:

if (texture.loaded) {
  const img = two.makeImage(texture, 100, 100);
} else {
  texture.once('load', function() {
    const img = two.makeImage(texture, 100, 100);
  });
}
  • Свойство loaded возвращает true, если изображение уже загружено.
  • Событие 'load' позволяет отложить создание объекта до момента полной готовности текстуры.

Работа с анимацией изображений

Two.js поддерживает анимацию объектов через метод bind и встроенный цикл рендера:

two.bind('upd ate', function(frameCount, timeDelta) {
  img.rotation += 0.01; // Постепенный поворот
}).play();
  • update вызывается на каждом кадре.
  • frameCount — номер кадра, timeDelta — время между кадрами.
  • Изменение свойств объектов внутри update позволяет создавать плавную анимацию.

Применение фильтров и прозрачности

Растровые изображения можно комбинировать с прозрачностью и фильтрами:

img.opacity = 0.5; // Полупрозрачное изображение
img.fill = '#ffffff'; // Цвет фона (при необходимости)

Two.js не поддерживает сложные WebGL-фильтры напрямую, но прозрачность и наложение цветов позволяют создавать базовые визуальные эффекты.

Масштабирование и адаптивное отображение

Для адаптации изображений к размеру холста используют свойства scale и позиционирование через координаты центра изображения:

img.translation.se t(two.width / 2, two.height / 2);
img.scale = Math.min(two.width / img.width, two.height / img.height);
  • translation задаёт позицию центра изображения.
  • scale позволяет масштабировать изображение пропорционально размерам холста без искажения.

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

  • Загружать текстуры заранее, чтобы исключить задержки при отображении.
  • Использовать форматы сжатия (PNG, JPEG) в зависимости от потребности в прозрачности.
  • Избегать создания большого количества объектов Two.Image одновременно, особенно с высокоразрешёнными текстурами, чтобы не перегружать рендерер.

Совместное использование с другими объектами Two.js

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

const group = two.makeGroup();
group.add(img);
group.add(two.makeRectangle(400, 300, 50, 50));
group.translation.set(0, 0);
  • Объекты внутри группы наследуют общие трансформации.
  • Группы упрощают управление сценой и позволяют применять эффекты к множеству объектов одновременно.
Оглавление