Size и определение размеров

В Paper.js размеры объектов и элементов играют ключевую роль при создании графических композиций. Размеры задаются через свойства, методы и специальные объекты, такие как Size и Rectangle. Работа с размерами обеспечивает контроль над пропорциями, масштабированием и позиционированием элементов на холсте.

Объект Size

Size — это основной объект для представления ширины и высоты. Он используется как для прямого задания размеров, так и для вычислений.

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

var s1 = new Size(100, 50);  // ширина 100, высота 50
var s2 = new Size({ width: 200, height: 100 }); // альтернативный способ

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

  • width — ширина объекта, число.
  • height — высота объекта, число.
  • isZero() — проверка, равны ли обе стороны нулю.
  • isNaN() — проверка на наличие недопустимых значений.
  • aspect — соотношение сторон (width / height).

Примеры:

var size = new Size(120, 80);
console.log(size.width);  // 120
console.log(size.height); // 80
console.log(size.aspect); // 1.5

Основные операции с объектом Size

Size поддерживает математические операции, что облегчает манипуляцию размерами.

Сложение и вычитание:

var a = new Size(50, 30);
var b = new Size(20, 10);

var sum = a.add(b);      // Size(70, 40)
var diff = a.subtract(b);// Size(30, 20)

Умножение и деление:

var c = new Size(10, 5);
var scaled = c.multiply(2); // Size(20, 10)
var divided = c.divide(2);  // Size(5, 2.5)

Сравнение размеров:

var d = new Size(50, 50);
var e = new Size(50, 50);
console.log(d.equals(e)); // true

Использование Size для фигур

Size тесно связан с объектами Rectangle, Path.Rectangle и другими геометрическими объектами.

Пример создания прямоугольника через Size:

var rectSize = new Size(150, 100);
var rectangle = new Rectangle(new Point(50, 50), rectSize);
var path = new Path.Rectangle(rectangle);
path.fillColor = 'blue';
  • Первый аргумент конструктора Rectangle — точка верхнего левого угла (Point).
  • Второй аргумент — размер (Size).

Масштабирование объектов

Размеры объектов можно изменять динамически с помощью метода scale. Для этого используется масштабный коэффициент, который применяется к текущей ширине и высоте.

var path = new Path.Rectangle(new Point(10, 10), new Size(100, 50));
path.fillColor = 'green';

path.scale(1.5); // увеличивает ширину и высоту на 50%

Size можно использовать для более точного контроля масштабирования:

var newSize = new Size(300, 150);
path.bounds.size = newSize; // задает точные размеры прямоугольника

Преобразование и ограничение размеров

Методы для работы с пропорциями:

  • Size.min(size) — возвращает минимальную ширину и высоту из двух размеров.
  • Size.max(size) — возвращает максимальные значения.
  • Size.clone() — создает копию объекта Size.

Пример: сохранение пропорций:

var original = new Size(120, 80);
var targetWidth = 240;
var aspect = original.aspect; 
var newSize = new Size(targetWidth, targetWidth / aspect); // сохраняем соотношение сторон

Размеры и границы объектов

Каждый объект в Paper.js имеет свойство bounds, которое возвращает объект Rectangle. Его размер можно получить через bounds.size.

var circle = new Path.Circle(new Point(100, 100), 50);
console.log(circle.bounds.size); // Size(100, 100)
  • Для круга радиус 50 → диаметр 100, что и отражается в Size.
  • Изменение bounds.size автоматически масштабирует объект.

Практическое использование Size в анимациях

Size часто используется при динамическом изменении размеров:

var rect = new Path.Rectangle(new Point(50, 50), new Size(100, 50));
rect.fillColor = 'red';

function onFrame(event) {
    rect.bounds.size.width += 1; // плавное увеличение ширины
    if (rect.bounds.size.width > 300) {
        rect.bounds.size.width = 100; // сброс
    }
}

Такой подход позволяет создавать анимированные трансформации, управляя только свойством Size объекта.

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

  • Point + Size → формирование Rectangle.
  • Size используется для вычисления пропорций при размещении объектов в контейнерах.
  • Методы add, subtract, multiply, divide позволяют легко комбинировать размеры при сложных композициях.

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

Оглавление