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的角度差。

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

1 个答案: