Canvas implementa una curva Bézier de alto orden (generador de curvas Bézier de orden N)

Dado que el Canvas nativo solo admite curvas Bézier de tercer orden, ¿qué debo hacer si quiero agregar múltiples puntos de control? (Incluso las curvas más complejas se pueden simular con Bezier de tercer orden). Al mismo tiempo, nos resulta difícil comprender claramente la posición de los puntos de control de Bezier de manera muy intuitiva. ¿Cuánto podemos configurar los puntos de control para formar la curva? queremos? Para resolver los dos puntos débiles anteriores, parece que no existe una solución de nivel N (versión js) en la comunidad, por lo que esta vez el autor se toma muy en serio el código abierto bezierMaker.js.

En teoría, bezierMaker.js admite la generación de curvas Bézier de orden N y también proporciona un campo de pruebas para que los desarrolladores agreguen y arrastren puntos de control para, en última instancia, generar un conjunto de animaciones de dibujo. Es muy intuitivo para los desarrolladores conocer las diferentes curvas de generación correspondientes a puntos de control en diferentes posiciones.

Si te gusta este trabajo, bienvenido a ser estrella. Después de todo, las estrellas se ganan con esfuerzo. .

Dirección del proyecto: aquí✨✨✨

Al dibujar curvas Bézier complejas de alto orden, no es posible conocer la ubicación precisa de los puntos de control de la curva que necesita. Al simular en el campo de prueba, los valores de las coordenadas de los puntos de control se pueden obtener en tiempo real. Las coordenadas de los puntos obtenidos se pueden convertir en una matriz de objetos y pasar a la clase BezierMaker para generar la curva objetivo.

representaciones

1. [x] Se puede agregar cualquier número de puntos de control al sitio de prueba
2. [x] El sitio de prueba admite la animación de formación del dibujo de curvas.
3. [x] Los puntos de control se pueden arrastrar libremente
4. [x] Admite la visualización de líneas tangentes durante la formación de curvas de Bézier
5. [x] El dibujo de curvas de Bézier de orden 3 e inferiores utiliza API nativa

 <script src=./bezierMaker.js></script>

La representación anterior muestra el uso del sitio de prueba. Después de obtener las coordenadas precisas de los puntos de control a través del sitio de prueba, puede llamar a bezierMaker.js para dibujar la curva directamente.

 /** * objeto DOM del lienzo lienzo * matriz de puntos de control bezierCtrlNodesArr, incluidas las coordenadas x, y * color de la curva de color */var lienzo = document.getElementById('canvas')//Utilice el método nativo para implementar antes del nivel 3 var arr0 = [ {x:70,y:25},{x:24,y:51}]var arr1 = [{x:233,y:225},{x:170,y:279},{x:240,y:51}]var arr2 = [{x:23,y:225},{x:70, y:79},{x:40,y:51},{x:300, y:44}]var arr3 = [{x:333,y:15},{x:70,y:79},{x:40,y:551},{x:170,y:279},{x:17,y:239} ]var arr4 = [{x:53,y:85},{x:170,y:279},{x:240,y:551},{x:70,y:79},{x:40,y:551} ,{x:170,y:279}]var bezier0 = nuevo BezierMaker(canvas, arr0, 'negro')var bezier1 = nuevo BezierMaker(canvas, arr1, 'rojo')var bezier2 = nuevo BezierMaker(canvas, arr2, 'azul')var bezier3 = nuevo BezierMaker(canvas, arr3, 'amarillo')var bezier4 = nuevo BezierMaker(canvas, arr4, 'verde')bezier0.drawBezier()bezier1.drawBezier()bezier2.drawBezier()bezier3.drawBezier()bezier4.drawBezier()

Trazar los resultados

Cuando haya menos de 3 puntos de control, se utilizará la interfaz API nativa. Cuando haya más de 2 puntos de control, se utilizará la función que implementemos para dibujar los puntos.

Dibujar la curva de Bézier

El punto central del dibujo de la curva de Bézier radica en la aplicación de la fórmula de Bézier:

P0-Pn en esta fórmula representa varias operaciones de potencia de cada punto y la proporción t desde el punto inicial hasta cada punto de control y luego hasta el punto final.

 BezierMaker.prototype.bezier = function(t) { // La fórmula de Bezier llama a var x = 0, y = 0, bezierCtrlNodesArr = this.bezierCtrlNodesArr, // Matriz de puntos de control n = bezierCtrlNodesArr.length - 1, self = this bezierCtrlNodesArr .forEach (función(elemento, índice) { si(!índice) { x += elemento.x * Math.pow(( 1 - t ), n - índice) * Math.pow(t, índice) y += elemento.y * Math.pow(( 1 - t ), n - índice) * Math.pow(t, index) } else { //factorial es la función factorial x += self.factorial(n) / self.factorial(index) / self.factorial(n - index) * item.x * Math . 1 - t ), n - índice) * Math.pow(t, índice) y += self.factorial(n) / self.factorial(índice) / self.factorial(n - índice) * item.y * Math. pow(( 1 - t ), n - índice) * Math.pow(t, índice) } }) return { x: x, y: y }}

Recorra todos los puntos y calcule las coordenadas del punto actual x, y en la curva de Bézier en función del valor de la proporción actual t (0<=t<=1). El autor divide el valor de t en 1000 partes, es decir, t+=0,01 para cada operación. Los xey calculados en este momento son los puntos después de que la curva de Bézier se divide en 1000 partes. Cuando el valor t atraviesa de 0 a 1 1000 veces, se generan 1000 coordenadas xey correspondientes y se puede simular una curva de Bézier de alto orden dibujando puntos y líneas en secuencia.

El autor explicará específicamente la derivación de la fórmula de Bézier en un artículo posterior. Ahora solo necesita saber que usamos la fórmula de Bézier para calcular que la curva de Bézier real se divide en 1000 puntos y conectamos los puntos con líneas rectas. la curva de clases se puede simular.

Implementación de animación generada por curva de Bezier en campo de simulación.

El código relevante para esta parte se puede encontrar aquí.

La idea general es utilizar un método recursivo para tratar cada capa de puntos de control como una función de Bessel de primer orden para calcular la siguiente capa de puntos de control y conectarlos en consecuencia. El autor dejará la lógica específica hasta la explicación en profundidad de los principios de la fórmula de la curva de Bézier para resolver los principios de generación de animación del sitio de prueba ~

El autor siempre ha querido abrir algo de código abierto (pero no hay nada sobre lo que pueda escribir). Sin embargo, todo lo que se usa habitualmente ha sido escrito por otros, y otros no pueden escribir bien sobre reinventar la rueda. Esta vez encontré un área aparentemente en blanco. Así que tomé una decisión muy solemne de abrirlo. La mayoría de las aplicaciones avanzadas de Bezier en gayhub son implementaciones de Android. Todavía hay muchos lugares en el campo del front-end que se pueden ampliar. Las discusiones son bienvenidas ~ ¡Muchas críticas!

Dirección del proyecto: aquí✨✨

Dirección del sitio de prueba: Asegúrate de entrar y jugar✨✨✨

Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.