Point и работа с точками

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

let p1 = new Point(100, 50);
console.log(p1.x); // 100
console.log(p1.y); // 50

Point не ограничивается только положением на холсте: с его помощью выполняются операции над векторами, вычисления расстояний, направления и масштабирования.

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

Способы инициализации точек:

  1. Через координаты x и y
let p = new Point(10, 20);
  1. Через массив
let p = new Point([10, 20]);
  1. Через объект с полями x и y
let p = new Point({x: 10, y: 20});
  1. Через другой объект Point (клонирование)
let p1 = new Point(5, 5);
let p2 = new Point(p1);

Все эти варианты создают идентичные объекты, что позволяет гибко использовать точки в различных сценариях.

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

  • x, y — координаты точки.
  • length — длина вектора от начала координат до точки.
let p = new Point(3, 4);
console.log(p.length); // 5
  • angle — угол в градусах между вектором и положительной осью x.
  • isZero() — проверка, является ли точка нулевой (0,0).
  • quadrant — номер квадранта, в котором находится точка.

Основные методы для работы с точками

Операции над точками:

  • add() — сложение двух точек, возвращает новый объект Point.
let p1 = new Point(10, 20);
let p2 = new Point(5, 5);
let p3 = p1.add(p2); // Point {x: 15, y: 25}
  • subtract() — вычитание точек.
let p3 = p1.subtract(p2); // Point {x: 5, y: 15}
  • multiply() — умножение на число или точку (поэлементное умножение).
let p4 = p1.multiply(2); // Point {x: 20, y: 40}
  • divide() — деление на число или точку.
let p5 = p1.divide(2); // Point {x: 5, y: 10}
  • negate() — меняет знак координат на противоположный.
let p6 = p1.negate(); // Point {x: -10, y: -20}
  • normalize() — нормализует вектор (приводит длину к 1).
let p = new Point(3, 4);
let normalized = p.normalize(); // Point {x: 0.6, y: 0.8}
  • distance() — расстояние между двумя точками.
let distance = p1.getDistance(p2); // 15.811...
  • rotate(angle, center) — поворот точки на угол в градусах относительно заданного центра.
let rotated = p1.rotate(90, new Point(0, 0));
  • interpolate(point, factor) — интерполяция между двумя точками.
let p = p1.interpolate(p2, 0.5); // точка посередине между p1 и p2

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

Объекты Point активно используются с Path, Size, Rectangle и другими объектами:

  • Path
let path = new Path();
path.add(new Point(10, 10));
path.add(new Point(50, 50));
  • Rectangle
let rect = new Rectangle(new Point(20, 20), new Size(100, 50));
console.log(rect.point); // Point {x: 20, y: 20}
  • Matrix — для трансформаций, таких как перемещение, вращение и масштабирование. Точки можно умножать на матрицу для получения новых координат.

Геометрические вычисления с Point

Векторные операции:

  • dot(point) — скалярное произведение.
  • cross(point) — векторное произведение (для 2D в Paper.js возвращает псевдоскаляр).
  • isCollinear(point) — проверка коллинеарности двух векторов.
  • isOrthogonal(point) — проверка перпендикулярности.

Примеры вычислений:

let a = new Point(1, 2);
let b = new Point(3, 4);

console.log(a.dot(b)); // 11
console.log(a.cross(b)); // -2
console.log(a.isCollinear(b)); // false
console.log(a.isOrthogonal(new Point(-2, 1))); // true

Методы для манипуляции координатами

  • round(), ceil(), floor() — округление координат точки.
  • clone() — создание копии точки.
  • toString() — получение текстового представления координат.
let p = new Point(10.7, 20.3);
console.log(p.round()); // Point {x: 11, y: 20}
console.log(p.clone().toString()); // "Point { x: 10.7, y: 20.3 }"

Практическое применение Point

Объект Point является фундаментом для построения векторной графики в Paper.js. С его помощью:

  • задаются вершины и контрольные точки для кривых и линий;
  • вычисляются смещения и движения объектов;
  • реализуются анимации с плавным перемещением;
  • выполняются точные геометрические расчёты для коллизий и взаимодействий.

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

let circle = new Path.Circle(new Point(50, 50), 20);
let velocity = new Point(2, 3);

function onFrame(event) {
    circle.position = circle.position.add(velocity);
}

Этот код демонстрирует перемещение объекта по холсту с использованием Point для хранения координат и скорости.

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

Оглавление