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>