时间戳

首页 > 解决方案 > 如何在Javascript / Jquery中获得一定距离后的svg中的线坐标

javascript - 如何在Javascript / Jquery中获得一定距离后的svg中的线坐标

问题描述

我在 SO 和 google 中进行了很多搜索，但找不到针对我的具体问题的解决方案。

我正在svg中的三行帮助下创建一个三角形。我创建它没有问题，但现在我也想显示两边之间的角弧。在两条线合并的顶点上方几英寸处。这是我用来使用路径创建角度有点弧的路径

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

我有 x 和 y 作为顶点。我正在使用的三行名称分别为 line1、line2 和 line3 由鼠标移动和向下事件组成的三角形。所以它是动态的，这就是为什么我必须在两条线中的任何一条中获得距离顶点几英寸的坐标，以便我可以将它们放在我的弧形路径中。

如果有人想知道三角形的 html，请告诉我。它只是相互连接的三条线。

我没有那么多经验，但仍在学习。谢谢你。

标签： javascriptjquerysvg

解决方案

这就是我对一个顶点 [1] 的处理方式。您将需要循环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>

推荐阅读