Граничные точки линий

В библиотеке Snap.svg линии являются базовыми графическими объектами, создаваемыми с помощью метода paper.line(x1, y1, x2, y2). Эти линии определяются двумя граничными точками: начальной (x1, y1) и конечной (x2, y2). Управление этими точками позволяет задавать позицию, длину и направление линии, а также выполнять динамическую анимацию и трансформации.

var s = Snap(800, 600);
var line = s.line(100, 150, 400, 300);
line.attr({
    stroke: "#000",
    strokeWidth: 2
});

Здесь 100, 150 — координаты начальной точки, а 400, 300 — координаты конечной. Эти точки являются ключевыми для дальнейшей работы с линией.

Получение и изменение координат граничных точек

Для доступа к координатам линии используются атрибуты x1, y1, x2, y2. Изменение этих значений мгновенно отражается на позиции линии на холсте.

// Получение координат
var x1 = line.attr("x1");
var y1 = line.attr("y1");
var x2 = line.attr("x2");
var y2 = line.attr("y2");

// Изменение координат
line.attr({
    x1: 150,
    y1: 200,
    x2: 500,
    y2: 350
});

Изменяя эти атрибуты, можно динамически растягивать линию, смещать её или изменять угол наклона без пересоздания объекта.

Привязка к событиям

Граничные точки линии можно использовать для интерактивного управления. Например, можно реализовать перетаскивание линии с помощью события drag().

line.drag(
    function(dx, dy) { // onmove
        this.attr({
            x1: x1 + dx,
            y1: y1 + dy,
            x2: x2 + dx,
            y2: y2 + dy
        });
    },
    function() { // onstart
        x1 = this.attr("x1");
        y1 = this.attr("y1");
        x2 = this.attr("x2");
        y2 = this.attr("y2");
    }
);

Здесь смещение линии вычисляется как разница между текущей позицией и начальными координатами.

Расчёт длины и угла линии

Граничные точки позволяют легко вычислять геометрические характеристики линии. Длина линии определяется по формуле:

[ L = ]

var dx = line.attr("x2") - line.attr("x1");
var dy = line.attr("y2") - line.attr("y1");
var length = Math.sqrt(dx * dx + dy * dy);

Угол наклона относительно горизонтали можно вычислить с использованием функции Math.atan2:

var angle = Math.atan2(dy, dx) * (180 / Math.PI);

Эти вычисления полезны при построении сложных динамических схем и анимаций.

Анимация граничных точек

Snap.svg предоставляет метод animate() для плавного изменения атрибутов, включая координаты линий. Это позволяет создавать эффект движения линии в реальном времени.

line.animate({ x2: 600, y2: 400 }, 1000, mina.easeinout);

В данном примере конечная точка линии плавно перемещается к новым координатам за 1 секунду с использованием кривой ускорения mina.easeinout.

Соединение линий через граничные точки

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

var line1 = s.line(100, 100, 200, 200);
var line2 = s.line(line1.attr("x2"), line1.attr("y2"), 300, 150);

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

Примеры трансформаций с использованием граничных точек

  1. Сдвиг линии вдоль оси X или Y
line.attr({
    x1: line.attr("x1") + 50,
    x2: line.attr("x2") + 50
});
  1. Изменение длины линии без смещения начальной точки
var factor = 1.5;
line.attr({
    x2: line.attr("x1") + (line.attr("x2") - line.attr("x1")) * factor,
    y2: line.attr("y1") + (line.attr("y2") - line.attr("y1")) * factor
});
  1. Поворот линии вокруг начальной точки
var theta = 30 * (Math.PI / 180); // угол в радианах
var x2 = line.attr("x1") + (line.attr("x2") - line.attr("x1")) * Math.cos(theta) - (line.attr("y2") - line.attr("y1")) * Math.sin(theta);
var y2 = line.attr("y1") + (line.attr("x2") - line.attr("x1")) * Math.sin(theta) + (line.attr("y2") - line.attr("y1")) * Math.cos(theta);
line.attr({ x2: x2, y2: y2 });

Эти примеры демонстрируют прямое влияние граничных точек на геометрию и положение линий.

Использование граничных точек в Snap.svg является фундаментальной техникой, позволяющей контролировать положение, длину, направление и анимацию линий. Правильное управление этими точками обеспечивает гибкость при создании интерактивной графики, схем и анимаций.

Оглавление