este problema se puede tratar de diferentes formas, pero nosotros te compartimos la que para nosotros es la solución más completa.
Solución:
Una curva cuadrática SVG probablemente será suficiente. Para dibujarlo, necesitas los puntos finales (que tienes) y un punto de control que determinará la curva.
Para hacer una curva simétrica, el punto de control debe estar en la bisectriz perpendicular de la línea entre los puntos finales. Un poco de matemáticas lo encontrará.
Entonces, desde dos puntos…
puedes llegar a
con el código en
Si desea que la curva vaya hacia el otro lado, cambie el signo de offset.
Si utiliza navegadores compatibles con ES6, puede utilizar string interpolación para un código ligeramente más ordenado:
var curve = `M$p1x $p1y Q$c1x $c1y $p2x $p2y`;
No es necesario que se muestre el punto de control; eso es solo para que pueda ver dónde está e ilustrar que la curva no lo atraviesa.
Nota: una alternativa al uso de atan2 es calcular el recíproco negativo del gradiente de la línea entre los puntos, pero eso es complicado para el caso en que el gradiente es cero y puede producir resultados muy imprecisos cuando el gradiente está cerca de cero.
Recuerda que te concedemos agregar una reseña .