Вычисление координат внутри svg

285
21 января 2018, 05:41

Есть такой пентагон, по нему построена svg фигура вот такая

Как динимически вычислять координаты и строить кружочки, строго на линиях. Будет присылаться массив и в зависимости от него будут, строиться кружочки. Без каких-либо библиотек.

Answer 1

Каждая линия задаётся двумя точками, начальная и конечная.

Такая линия легко параметризуется с помощью векторной геометрии.

A - начальная точка, её координаты {ax,ay}
B - конечная точка, её координаты {bx,by}

B - A - Вектор идущий от A к B.

A + t * (B - A) формула расчёта любой точки на отрезке AB.
t лежит на отрезке [0,1].

Получаем формулу для расчёта x компоненты точки и y

x = ax + t * (bx - ax);
y = ay + t * (by - ay);

Таким образом мы можем в зависимости от t задавать координаты любой точки на любом отрезке.

READ ALSO
Id и addEventListener

Id и addEventListener

Решил на своей тренировочной страничке удалить обработчики через HTML-атрибут и назначить через addEventListener()

216
Особенности работы с Vue.js

Особенности работы с Vue.js

При назначении элемента часто происходят непредвиденные ситуацииНапример если в контейнере с id='app' разместить canvas, то при назначении переменной...

285