Как получить координаты строки в svg после определенного расстояния в Javascript / JQuery

Question

Я много искал в SO и Google, но не смог найти решение моей конкретной c проблемы.

Я создаю треугольник с помощью трех строк в svg. У меня нет проблем с его созданием, но теперь я также хочу показать угол ar c между сторонами. Всего в нескольких дюймах над вершиной, где сливаются две линии. Это путь, который я использую для создания угла типа ar c, используя путь

<path d="M324,141 A50,50 0 0,1 336,164" stroke="#ef00ff" stroke-width="3" fill="none"></path>

У меня есть x и y для вершины. Три линии, которые я использую, имеют имена line1, line2 и line3. Треугольник создается с помощью событий перемещения мыши и вниз. Итак, его динамика c, поэтому мне нужно получить координаты всего в нескольких дюймах от вершины в любой из двух строк, чтобы я мог поместить их в свой путь ar c.

Если кому-то нравится чтобы узнать html для треугольника, дайте мне знать. Это всего лишь три линии, соединяющие друг друга.

Я не так уж и опытен, но все еще учусь. Спасибо.

Answer 1

Вот как я бы сделал это для одной вершины [1]. Вам нужно будет l oop массив pts и проделать то же самое для каждой точки.

пожалуйста, прочтите комментарии в моем коде.

//the radius for the pink arc
let r = 15;
//the points to draw the triangle
 let pts = [
   [2.75,-45],[38.97,22.5],[-38.97,22.5]
 ]
 
 //calculate the angle of the first line
 let dx1 = pts[0][0] - pts[1][0];
 let dy1 = pts[0][1] - pts[1][1];
 let a1 = Math.atan2(dy1,dx1);
 //calculate the move to point for the arc 
 let p1 = {
   x:pts[1][0]+r*Math.cos(a1),
   y:pts[1][1]+r*Math.sin(a1)
 }
  //calculate the angle of the second line
 let dx2 = pts[2][0] - pts[1][0];
 let dy2 = pts[2][1] - pts[1][1]; 
 let a2 = Math.atan2(dy2,dx2)
  //calculate the end point for the arc 
  let p2 = {
   x:pts[1][0]+r*Math.cos(a2),
   y:pts[1][1]+r*Math.sin(a2)
 }
  //build the d attribute for the arc
  let d = `M${p1.x},${p1.y}A${r},${r} 0 0 0 ${p2.x},${p2.y}`
  //set the d attribute for the arc
  arc.setAttributeNS(null,"d",d)

svg{border:solid;}

<svg viewBox="-50 -50 100 90" width="200">
  
<polygon id="poly" points="2.75,-45 38.97,22.5 -38.97,22.5" stroke="black" fill="none"></polygon>
  
<path id="arc"  stroke="#ef00ff" stroke-width="3" fill="none"></path>

</svg>