Линии и ломаные

В библиотеке Two.js линии реализуются через объект Two.Line, который наследует базовые свойства двухмерных фигур. Линия определяется двумя точками: начальной (x1, y1) и конечной (x2, y2). Для создания линии необходимо передать эти координаты при инициализации объекта:

let line = two.makeLine(50, 50, 200, 200);

Ключевые свойства линии:

  • stroke: цвет линии.
  • linewidth: толщина линии.
  • opacity: прозрачность линии.
  • visible: видимость объекта.
line.stroke = '#ff0000';
line.linewidth = 4;
line.opacity = 0.8;

После создания линии важно добавить её в сцену Two.js, используя метод two.update(), который обновляет отображение всех объектов на канвасе.

Работа с ломанными линиями (Polyline)

Ломаная линия в Two.js создаётся с помощью объекта Two.Path, который принимает массив точек. Каждая точка задаётся в формате [x, y]. Пример создания ломаной линии:

let points = [
  [50, 50],
  [150, 100],
  [100, 200],
  [200, 250]
];

let polyline = two.makePath(points, false); // false – ломаная, true – замкнутый контур
polyline.stroke = '#0000ff';
polyline.linewidth = 3;

Особенности использования ломаных линий:

  • Аргумент closed определяет, будет ли линия замкнутой.
  • Для динамического изменения формы ломаной линии можно модифицировать массив vertices объекта polyline:
polyline.vertices.push(new Two.Anchor(250, 150));
two.update();
  • Каждая вершина имеет свойства x, y и relative, позволяющие строить сложные трансформации.

Анимация линий и ломаных

Two.js поддерживает анимацию координат точек линии и вершин ломаной. Для этого используется метод two.bind('upd ate', callback), который вызывается на каждом кадре:

two.bind('update', function(frameCount) {
  line.vertices[1].x = 200 + Math.sin(frameCount * 0.05) * 50;
  polyline.vertices[2].y = 200 + Math.cos(frameCount * 0.05) * 50;
}).play();

Важные моменты:

  • vertices линии или ломаной линии – это массив объектов Two.Anchor, каждая вершина которого можно изменять индивидуально.
  • Для плавного движения используется синусоидальная или косинусоидальная функция, умноженная на коэффициент скорости.
  • Метод two.play() запускает анимацию, а two.pause() её останавливает.

Стиль и визуальные эффекты

Two.js позволяет применять визуальные эффекты к линиям и ломаным:

  • Заливка (fill) для замкнутых ломаных.
  • Штриховка с использованием свойства cap (round, square, butt) для концевых точек.
  • Линейные градиенты для плавного изменения цвета вдоль линии.
  • Прозрачность через opacity для создания наложений.
polyline.stroke = '#00ff00';
polyline.linewidth = 5;
polyline.cap = 'round';
polyline.opacity = 0.7;

Работа с кривыми на основе ломаных

Для сглаживания ломаных линий используется метод Two.Path.smooth(), который превращает резкие углы в плавные кривые. Пример:

polyline.vertices = polyline.vertices.map(v => new Two.Anchor(v.x, v.y));
polyline.smooth();
two.update();
  • smooth() работает с текущим массивом вершин.
  • Параметры сглаживания можно регулировать через polyline.curved = true и модификацию polyline.smoothing.

Интерактивные линии

Two.js поддерживает динамическое взаимодействие с линиями через обработку событий мыши. Пример изменения линии при наведении курсора:

polyline._renderer.elem.addEventListener('mousemove', (e) => {
  polyline.vertices[1].x = e.offsetX;
  polyline.vertices[1].y = e.offsetY;
  two.update();
});
  • _renderer.elem – это канвас, на котором отрисовывается объект.
  • Каждую вершину можно модифицировать в реальном времени, создавая интерактивные ломаные и линии.

Комбинирование линий и ломаных

В сложных сценах линии и ломаные можно объединять в группы (Two.Group), что позволяет применять трансформации к набору объектов:

let group = two.makeGroup(line, polyline);
group.translation.se t(100, 50);
group.rotation = Math.PI / 4;
two.update();
  • Группы позволяют перемещать, вращать и масштабировать несколько линий одновременно.
  • Вершины внутри группы остаются доступны для анимации и изменения формы.
Оглавление