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

Javascript: How to determine a SVG path draw direction?

本文关键字：路径 绘制 方向 SVG 何确定 Javascript      更新时间：2023-09-26

我正在尝试确定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 方法/选项？

谢谢

使用 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>

相关文章：