Площади и периметры

Для работы с графическими объектами в SVG.js ключевым является создание элементов с помощью метода rect(). Этот метод возвращает объект SVG.Rect, который предоставляет полный набор инструментов для управления размерами, положением и стилем прямоугольников.

const draw = SVG().addTo('body').size(500, 500);

const rectangle = draw.rect(200, 100).attr({ fill: '#3498db', x: 50, y: 50 });

Здесь создается прямоугольник шириной 200px и высотой 100px, расположенный по координатам (50,50). Атрибут fill задает заливку объекта.

Измерение площади и периметра

SVG.js не предоставляет прямых методов для вычисления площади и периметра, но это легко реализуется через свойства width() и height() объекта SVG.Rect:

const width = rectangle.width();
const height = rectangle.height();

const area = width * height;
const perimeter = 2 * (width + height);

console.log(`Площадь: ${area}, Периметр: ${perimeter}`);
  • Площадь рассчитывается как произведение ширины на высоту.
  • Периметр равен удвоенной сумме ширины и высоты.

Изменение размеров автоматически обновляет визуальное отображение на холсте:

rectangle.size(300, 150);
console.log(`Новая площадь: ${rectangle.width() * rectangle.height()}`);

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

Для создания окружности используется метод circle(radius). Объект SVG.Circle позволяет управлять радиусом и координатами центра через атрибуты cx и cy.

const circle = draw.circle(100).attr({ fill: '#e74c3c', cx: 250, cy: 250 });
  • Площадь круга: ( S = r^2 )
  • Периметр (длина окружности): ( P = 2 r )

В SVG.js радиус можно получить через метод radius():

const r = circle.radius();
const circleArea = Math.PI * r * r;
const circumference = 2 * Math.PI * r;

console.log(`Площадь круга: ${circleArea}, Периметр: ${circumference}`);

Эллипсы и их параметры

Эллипсы создаются методом ellipse(width, height). Атрибуты cx и cy задают центр, а width и height — длины полуосей.

const ellipse = draw.ellipse(200, 100).attr({ fill: '#2ecc71', cx: 400, cy: 150 });
  • Площадь эллипса вычисляется по формуле: ( S = a b ), где a и b — полуоси по горизонтали и вертикали.
  • Приблизительный периметр можно получить формулой Рамануяна: ( P )
const a = ellipse.width() / 2;
const b = ellipse.height() / 2;
const ellipseArea = Math.PI * a * b;
const ellipsePerimeter = Math.PI * (3 * (a + b) - Math.sqrt((3*a + b)*(a + 3*b)));

console.log(`Площадь эллипса: ${ellipseArea}, Периметр: ${ellipsePerimeter}`);

Полигональные фигуры и сложные формы

SVG.js позволяет создавать многоугольники через метод polygon(points). Параметр points задается строкой координат или массивом массивов координат:

const triangle = draw.polygon('100,10 40,198 190,78').attr({ fill: '#f1c40f' });
  • Площадь многоугольника можно вычислить через алгоритм Гаусса (формула для координат вершин):
function polygonArea(points) {
    let area = 0;
    const n = points.length;
    for (let i = 0; i < n; i++) {
        const [x1, y1] = points[i];
        const [x2, y2] = points[(i + 1) % n];
        area += (x1 * y2 - x2 * y1);
    }
    return Math.abs(area / 2);
}
  • Периметр вычисляется суммой длин сторон:
function polygonPerimeter(points) {
    let perimeter = 0;
    const n = points.length;
    for (let i = 0; i < n; i++) {
        const [x1, y1] = points[i];
        const [x2, y2] = points[(i + 1) % n];
        perimeter += Math.hypot(x2 - x1, y2 - y1);
    }
    return perimeter;
}

Масштабирование и динамическое обновление

SVG.js предоставляет методы scale(), move() и size(), которые позволяют динамически изменять размеры и положение объектов, что автоматически изменяет их площадь и периметр:

rectangle.scale(1.5);
console.log(`Масштабированная площадь: ${rectangle.width() * rectangle.height()}`);

Для сложных фигур, таких как многоугольники или эллипсы, изменение размеров через scale() или size() требует пересчета всех координат и полуосей для корректного вычисления площади и периметра.

Итоговые рекомендации

  • Для прямоугольников и квадратов достаточно использовать width() и height().
  • Для кругов и эллипсов необходимо учитывать радиусы и полуоси.
  • Для многоугольников применяются формулы Гаусса и суммы длин сторон.
  • Любое масштабирование или трансформация требует пересчета геометрических свойств для точного результата.

Использование SVG.js позволяет гибко управлять графическими объектами и динамически вычислять их геометрические характеристики в интерактивных приложениях.

Оглавление