Cómo dibujar una curva de Bézier suave
Al programar gráficos e imágenes, a menudo necesitamos determinar una curva suave basada en una serie de coordenadas de puntos conocidos. Algunas de las curvas deben pasar estrictamente por todos los puntos conocidos, mientras que otras no necesariamente deben pasar. Entre estas últimas, un tipo de curva más representativo es el Bézier Splines.
Los internautas habrán notado que las curvas de Bézier se utilizan ampliamente en muchos programas de gráficos e imágenes, como Flash, Illstrator, CoralDRAW y Photoshop, etc. ¿Qué es una curva de Bézier? Echemos un vistazo a esto primero:
Echemos un vistazo a los puntos en los que se basa la superposición:
Hoho, resulta que la curva de Bézier es una de esas curvas. Se dibuja en base a las coordenadas de cuatro puntos arbitrarios. Una curva suave. También podríamos definir estos cuatro pares de coordenadas de puntos conocidos como (x0, y0), (x1, y1), (x2, y2) y (x3, y3). La curva de Bézier debe pasar por los dos primeros y últimos puntos, que se denominan puntos finales; aunque los dos puntos medios no necesariamente pasan, desempeñan un papel en la restricción de la trayectoria de la forma de la curva y se denominan puntos de control.
Históricamente, las personas que estudiaban las curvas de Bézier diseñaron inicialmente este método de dibujo de curvas vectoriales basándose en la idea de determinar cuatro puntos utilizando ecuaciones de parámetros de curva conocidas. Para presentar la fórmula de la curva de Bézier a todos, Titang también invirtió deliberadamente las posiciones de los problemas conocidos y buscados: si se conoce la ecuación paramétrica de una curva, se conocen los coeficientes y ambas ecuaciones contienen un parámetro t, su valor está entre 0 y 1, y su expresión es la siguiente:
x(t) = ax * t ^ 3 bx * t ^ 2 cx * t x0
y(t) = ay * t ^ 3 by * t ^ 2 cy * t y0
Dado que se conoce el punto inicial de esta curva (x0, y0), podemos usar la siguiente Fórmula para encontrar las coordenadas de las restantes tres puntos:
x1 = x0 cx / 3
x2 = x1 ( cx bx ) / 3
x3 = x0 cx bx ax
y1 = y0 cy / 3
y2 = y1 ( cy by ) / 3
y3 = y0 cy by ay
Si miras con atención, verás sabrás que no importa cuáles sean las ecuaciones conocidas y buscadas, siempre hay seis incógnitas, y siempre podemos encontrar seis ecuaciones (recuerda (x0, y0) siempre se conoce), es decir, el método anterior es completamente reversible, entonces podemos encontrar a la inversa los coeficientes de la fórmula del parámetro de la curva en función de las cuatro coordenadas de puntos conocidos. Después de una pequeña transformación, obtenemos el siguiente conjunto de fórmulas:
cx = 3 * ( x1 - x0 )
bx = 3 * ( x2 - x1 ) - cx
ax = x3 - x0 - cx - bx
cy = 3 * ( y1 - y0 )
by = 3 * ( y2 - y1 ) - cy
ay = y3 - y0 - cy - by
Entonces, para cuatro puntos conocidos con coordenadas arbitrarias, siempre puedes crear una curva de Bézier jeje. En la biblioteca de funciones de gráficos 2D de GDI, se ha encapsulado el método de dibujo de curvas de Bézier: el método DrawBezier() de la clase Graphics.
El método DrawBezier() tiene muchas versiones sobrecargadas. Es muy simple y tiene una introducción detallada en MSDN. No perderé el tiempo aquí (lo mismo se aplica a DrawBeziers()). Lo que tengo que lamentar es que el poderoso GDI permite a una persona que no comprende los conocimientos matemáticos de las curvas de Bézier dibujar fácilmente una hermosa curva de Bézier. ¡Esto, por supuesto, es algo bueno para mejorar la eficiencia del desarrollo!
Lo que es más interesante acerca de la curva de Bézier es su "efecto de banda elástica", es decir, a medida que los puntos se mueven regularmente, la curva producirá una transformación como una banda elástica que se estira, generando impacto visual. Ven, mira esta imagen:
El protector de pantalla predeterminado de Windows tiene un programa "Bézier Curve". Puedes abrirlo ahora y disfrutarlo. Un conjunto de curvas que giran constantemente hace que los espectadores se maravillen de su naturaleza impredecible. De hecho, el principio es bastante simple. El programa es solo un grupo de puntos que se dividen en grupos y se mueven según reglas. y sigue las instrucciones anteriores. La fórmula calcula la curva de Bézier actual en tiempo real y la dibuja en la pantalla de la computadora, sin cesar...
En la década de 1970, el matemático francés Pierre Bézier fue el primero en estudiar este método. de curvas de dibujo vectorial y dio fórmulas de cálculo detalladas. Por lo tanto, la curva dibujada de acuerdo con dicha fórmula recibió el nombre de su apellido ~ es una curva de Bézier.
Al principio del artículo mencioné que existe otro tipo de curva que debe pasar estrictamente por todos los puntos conocidos, que se distingue típica y claramente de la curva de Bézier. Este tipo de curva ocupará el espacio de otros blogs en línea para presentárselo, ¡tenga paciencia!