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;

然后对这些值 horizo​​ntal > 0 和 vertical > 0 进行一些比较，但在我看来，上述想法并不是很成功。

我的问题是:是否有任何东西可以用来确定绘图方向或一些内置的 SVG 方法/选项？

谢谢

Answer 1

使用 Math.atan2(yDiff, xDiff) 获取两个引用点之间的 Angular 。两个视觉上相同但方向相反的形状将有 pi 的 Angular 差。

请注意您的两个引用点不幸是同一点的边缘情况。不太可能，尤其是考虑到舍入误差，但请记住这一点，以防您需要它坚如磐石。

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>