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>