Como o Canvas nativo suporta apenas curvas de Bezier de terceira ordem, o que devo fazer se quiser adicionar vários pontos de controle? (Mesmo as curvas mais complexas podem ser simuladas com Bezier de terceira ordem.) Ao mesmo tempo, é difícil para nós compreender claramente a posição dos pontos de controle de Bezier de forma muito intuitiva. nós queremos? Para resolver os dois pontos problemáticos acima, parece não haver uma solução de nível N (versão js) na comunidade, então desta vez o autor leva muito a sério o bezierMaker.js de código aberto!
bezierMaker.js teoricamente suporta a geração de curvas de Bezier de ordem N e também fornece um campo de testes para os desenvolvedores adicionarem e arrastarem pontos de controle para gerar um conjunto de animações de desenho. É muito intuitivo para os desenvolvedores conhecerem as diferentes curvas de geração correspondentes aos pontos de controle em diferentes posições.
Se você gosta deste trabalho, seja bem-vindo a estrelar. Afinal, estrelas são conquistadas com dificuldade. .
Endereço do projeto: aqui✨✨✨
Por que é necessário um campo de provas?Ao desenhar curvas Bézier complexas de alta ordem, você não pode saber a localização precisa dos pontos de controle da curva necessária. Ao simular no campo de teste, os valores das coordenadas dos pontos de controle podem ser obtidos em tempo real. As coordenadas dos pontos obtidos podem ser convertidas em uma matriz de objetos e passadas para a classe BezierMaker para gerar a curva alvo.
renderizações
Função<script src=./bezierMaker.js></script>empate
A renderização acima mostra o uso do site de teste. Depois de obter as coordenadas precisas dos pontos de controle por meio do site de teste, você pode chamar bezierMaker.js para desenhar a curva diretamente.
/** * Objeto DOM do canvas canvas * matriz de pontos de controle bezierCtrlNodesArr, incluindo coordenadas x, y * cor da curva de cores */var canvas = document.getElementById('canvas')//Usar método nativo para implementar antes do nível 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 = novo BezierMaker(canvas, arr0, 'preto')var bezier1 = novo BezierMaker(canvas, arr1, 'red')var bezier2 = new BezierMaker(canvas, arr2, 'blue')var bezier3 = new BezierMaker(canvas, arr3, 'yellow')var bezier4 = new BezierMaker(canvas, arr4, 'verde')bezier0.drawBezier()bezier1.drawBezier()bezier2.drawBezier()bezier3.drawBezier()bezier4.drawBezier()Trace os resultados
Quando houver menos de 3 pontos de controle, será utilizada a interface API nativa. Quando houver mais de 2 pontos de controle, a função que implementamos será utilizada para desenhar os pontos.
Princípios fundamentaisDesenhar curva de Bézier
O ponto central do desenho da curva de Bézier reside na aplicação da fórmula de Bézier:
P0-Pn nesta fórmula representa várias operações de potência de cada ponto e a proporção t do ponto inicial para cada ponto de controle e depois para o ponto final.
BezierMaker.prototype.bezier = function(t) { //A fórmula de Bezier chama var x = 0, y = 0, bezierCtrlNodesArr = this.bezierCtrlNodesArr, //Matriz de pontos de controle n = bezierCtrlNodesArr.length - 1, self = this bezierCtrlNodesArr .forEach (função(item, índice) { if(!index) { x += item.x * Math.pow(( 1 - t ), n - índice) * Math.pow(t, índice) y += item.y * Math.pow(( 1 - t ), n - índice) * Math.pow(t, index) } else { //factorial é a função fatorial x += self.factorial(n) / self.factorial(index) / self.factorial(n - index) * item.x * Math . poxa (( 1 - t ), n - índice) * Math.pow(t, índice) y += self.factorial(n) / self.factorial(index) / self.factorial(n - index) * item.y * Math. pow(( 1 - t ), n - índice) * Math.pow(t, índice) } }) return { x: x, y: y }}Percorra todos os pontos e calcule as coordenadas do ponto atual x, y na curva de Bézier com base no valor da proporção atual t (0<=t<=1). O autor divide o valor de t em 1000 partes, ou seja, t+=0,01 para cada operação. Os xey calculados neste momento são os pontos após a curva de Bézier ser dividida em 1000 partes. Quando o valor t percorre de 0 a 1.000 vezes, 1.000 coordenadas xey correspondentes são geradas, e uma curva de Bézier de alta ordem pode ser simulada desenhando pontos e linhas em sequência.
O autor explicará especificamente a derivação da fórmula de Bézier em um artigo posterior. Agora você só precisa saber que usamos a fórmula de Bézier para calcular que a curva de Bézier real é dividida em 1000 pontos e conectamos os pontos com linhas retas. a curva de classe pode ser simulada.
Implementação de animação gerada pela curva de Bézier em campo de simulação
O código relevante para esta parte pode ser encontrado aqui
A idéia geral é usar um método recursivo para tratar cada camada de pontos de controle como uma função de Bessel de primeira ordem para calcular a próxima camada de pontos de controle e conectá-los adequadamente. O autor deixará a lógica específica até a explicação aprofundada dos princípios da fórmula da curva de Bézier para resolver os princípios de geração de animação do local de teste ~
resumoO autor sempre quis abrir algo em código (mas não há nada sobre o qual ele possa escrever). No entanto, tudo o que normalmente é usado foi escrito por outros, e reinventar a roda não pode ser bem escrito por outros. Desta vez, encontrei uma área aparentemente em branco. Então tomei uma decisão muito solene de abrir o código. A maioria dos aplicativos avançados de Bezier no gayhub são implementações do Android. Ainda há muitos lugares no campo de front-end que podem ser expandidos. Discussões são bem-vindas.
afinalEndereço do projeto: aqui✨✨
Endereço do site de teste: Não deixe de entrar e jogar✨✨✨
O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.