Javascript：如何确定SVG路径绘制方向？

Question

我正在尝试确定SVG路径绘制方向。 我正在做这样的事情

var length = path.getTotalLength();
var horizontal = path.getPointAtLength(length/4).x - path.getPointAtLength(0).x;
var vertical = path.getPointAtLength(length/4).y - path.getPointAtLength(0).y;

然后与horizontal > 0和vertical > 0这些值进行一些比较，但在我看来，上述想法并不是非常成功的。

我的问题是：有什么我可以用来确定绘制方向或者一些内置的SVG方法/选项吗？

谢谢

Answer 1

使用Math.atan2(yDiff, xDiff)获取两个参考点之间的角度。 沿相反方向行进的两个视觉上相同的形状将具有pi的角度差。

请注意两个参考点不太相同的边缘情况。 不太可能，特别是考虑到舍入错误，但请记住，以防万一你需要坚如磐石。

 var paths = document.getElementsByTagName("path"); for (var pathNum = 0; pathNum < paths.length; pathNum += 1) { var path = paths[pathNum]; var message = document.createElement('p'); message.innerHTML = "path #" + pathNum + ": angle = " + pathDir(path); document.body.appendChild(message); }; function pathDir(path) { var length = path.getTotalLength(); var pt14 = path.getPointAtLength(1/4 * length); var pt34 = path.getPointAtLength(3/4 * length); var angle = Math.atan2(pt14.y - pt34.y, pt14.x - pt34.x); return angle; } 

 <svg width="300" height="80"> <g fill="none" stroke="black" stroke-width="4"> <path d="M 10,10 C 90,10 -30,60 50,60Z"/> <path d="M110,10 C190,10 70,60 150,60Z"/> <path d="M250,60 C170,60 290,10 210,10Z"/> </g> </svg> <div></div>