Tengo dos rutas SVG, a y b, entre las que quiero encontrar la distancia. La distancia varía a lo largo de cada punto, por lo que, en mi caso, quiero encontrar la distancia más pequeña entre estos dos caminos. ¿Hay alguna manera de hacer esto usando javascript?
path { fill: none; } <svg xmlns="http://www.w3.org/2000/svg"> <path d="M0,0 Q30,30,0,60" stroke="black"></path> <path d="M70,0 Q30,30,70,60" stroke="black"></path> <path d="M15,30 L50,30" stroke="red"></path> </svg>En este ejemplo, defino que el camino más largo es la línea roja.
Además, ¿hay alguna forma de encontrar la dirección a la que apunta? Por ejemplo, si el método de distancia es path1.distance(path2) , ¿podría obtener la distancia representada por un vector desde el punto en path1 hasta el punto en path2? Si esto no está en el alcance de su respuesta, está bien.
Iterar sobre la ruta a llamando a getPointAtLength en la ruta a
Dentro del ciclo anterior, itere sobre la ruta b llamando a getPointAtLength en la ruta b
Use el teorema de Pitágoras para determinar la distancia entre los puntos en los bucles interior y exterior. Tienes el vector porque tienes los pares de puntos.
Cualquiera que sea la distancia más pequeña es su respuesta.
Si aumenta la granularidad de la iteración, su respuesta será más precisa pero llevará más tiempo.
Tenga en cuenta que si sus caminos son líneas paralelas, entonces puede haber un número infinito de puntos más cercanos.