O artigo anterior falou sobre o método de tela do arco, e este artigo falou sobre o método ARCTO relacionado a ele.
Arco e Arcto podem ser vistos a partir dos nomes deles. Arcto também é um método de desenho de curvas, e a curva que ele desenha também é um arco de um círculo perfeito. Mas seus parâmetros e arco são simplesmente irrelevantes ~
ctx.arcto (x1, y1, x2, y2, raio); Os parâmetros do ARCTO incluem dois pontos, e não há sentido em representar o centro do círculo nesses dois pontos. Somente o último parâmetro é o raio do círculo, indicando que o Arcto e o círculo têm um pouco de relacionamento.
Existem muito poucos artigos sobre o ARCTO Online, e finalmente encontrei um que era estranho; E não há uma ferramenta intuitiva para desenho de lona, então só posso adivinhar, o Arcto me fez adivinhar por um longo tempo. .
Para uma descrição intuitiva, peguei um método auxiliar: onde quer que o Arcto seja desenhado, usei Lineto para desenhar os pontos correspondentes para ver o relacionamento deles. Basta desenhar linhas auxiliares.
var x0 = 100,
y0 = 400,
x1 = 500,
y1 = 400,
x2 = 450,
y2 = 450;
ctx.BeginPath ();
ctx.moveto (x0, y0);
ctx.strokestyle = "#f00";
ctx.LineWidth = 2;
ctx.arcto (x1, y1, x2, y2,20);
ctx.stroke ();
ctx.BeginPath ();
ctx.strokestyle = "rgba (0,0,0,0,5)";
ctx.LineWidth = 1;
ctx.moveto (x0, y0);
ctx.lineto (x1, y1);
ctx.fillText ('x1, y1', x1+10, y1+10)
ctx.lineto (x2, y2);
ctx.fillText ('x2, y2', x2+10, y2)
ctx.stroke ();
Parece que há muito código, mas na verdade é muito simples. Usei várias variáveis para salvar valores de coordenadas e o restante eram operações de tela.
Descrição variável: x0, y0 é a coordenada do ponto de partida, x1, y1 é a coordenada de primeiro ponto e x2, y2 é a coordenada do segundo ponto. A linha reta desenhada por Lineto é uma linha preta translúcida de 1px e a linha desenhada pelo Arcto é uma linha vermelha de 2px.
Atualize a página e você verá a imagem abaixo.
Devo dizer que essa linha vermelha parece um gancho.
Então a lei do Arcto foi encontrada. Na verdade, formou um ângulo através das duas linhas retas no ponto de partida, ponto 1 e 2, e essas duas linhas também são as linhas tangentes do círculo de parâmetros.
O raio do círculo determina onde o círculo interrompe as bordas com a linha. É como uma bola rolando em um canto morto. Quanto menor a bola, mais ela entra, mais se aproxima do canto morto; Quanto maior a bola, o oposto é verdadeiro.
Esta é uma edição acadêmica muito séria, então não quero você.
Vamos aumentar a bola!
ctx.arcto (x1, y1, x2, y2,50); // O raio é alterado para 50
Como mostrado na figura, você pode ver que o arco se tornou grande e nem sequer é tangente à linha reta.
Obviamente, eles ainda são tangentes porque a tangente é infinitamente estendida.
Continuamos a explorar, continuamos a crescer o círculo e diminuímos a distância entre o ponto de partida e o primeiro ponto.
var x0 = 400; // O ponto de partida x coordenam alterações de 100 para 400
...
ctx.arcto (x1, y1, x2, y2.100); // O raio do círculo se torna maior para 100 e você verá uma figura tão estranha.
Era originalmente um gancho, mas agora foi dobrado e virou -se para a direção oposta! É um pouco como um porta -garrafa de vinho.
No entanto, observe que este círculo ainda é tangente às duas linhas! Mas agora o comprimento das duas linhas não pode satisfazer este círculo! Ele estendeu os dois fios sem fio!
Quando essa alça de gancho será revertida? Se você tem uma boa geometria, pode tentar entender as equações tangentes de pontos e círculos.
Há um ponto muito importante no método Arcto. Este ponto importante é (x1, y1) no código. Enquanto a distância até o ponto tangente do círculo exceder a distância até o ponto de partida (x0, y0), ele será revertido.
A partir da figura, podemos ver que as coordenadas deste ponto (x2, y2) podem mudar infinitamente. Enquanto sempre for um ponto da tangente, o gráfico desenhado pelo Arcto não mudará quando o raio do círculo permanecer inalterado. Isso requer atenção especial.
Deixe -me usar meu conhecimento geométrico de que não consigo entrar na mesa para verificar essa proposição. Por uma questão de cálculo, mudei o ângulo entre as duas linhas para 90 graus.
var x0 = 100,
y0 = 400,
x1 = 500,
y1 = 400,
x2 = 500,
y2 = 450;
Após a mudança, será aberta 90 graus! Mantemos o raio da bola inalterado. Depois de refrescar:
Aumentamos Y2, isto é, estendemos uma linha tangente, transformá -la em 550 e atualize:
A linha tangente é estendida, mas a linha vermelha desenhada pelo Arcto não mudou.