Hoje, nosso grupo de front-end fez essa pergunta e, em seguida, uma discussão acalorada começou.
Então, vamos analisar esta questão juntos. Esta questão traz duas pequenas questões:
1. Como desenhar um polígono na tela
2. Como selecionar um desenho com o mouse?
Então, vamos responder a duas perguntas.
Desenhar polígono
Para desenhar um polígono, o elemento básico de uma figura poligonal é um caminho. Um caminho é uma coleção de pontos de diferentes formas conectados por segmentos de linha ou curvas de diferentes cores e larguras. Um caminho, mesmo um subcaminho, está fechado. Desenhar gráficos usando caminhos requer algumas etapas adicionais.
Primeiro, você precisa criar o ponto de partida do caminho
Em seguida, você usa o comando desenhar para desenhar o caminho.
Então você fecha o caminho
Depois que o caminho é gerado, você pode renderizar os gráficos traçando ou preenchendo a área do caminho. As etapas acima usarão algumas APIs:
beginPath ()
cria um novo caminho.Depois de gerado, o comando de desenho gráfico é direcionado para o caminho para gerar um caminho.
Depois que closePath ()
fecha o caminho, o comando de desenho gráfico aponta para o contexto novamente.
traço ()
desenha o contorno da figura por meio de linhas.
fill ()
gera gráficos sólidos preenchendo a área de conteúdo do caminho.
Processo de desenho detalhado
Aqui está uma explicação detalhada do processo de desenho: a
primeira etapa é gerar um caminho e chamar beginPath. Em essência, o caminho é composto de muitos subcaminhos. Todos esses subcaminhos estão em uma lista e todos os subcaminhos (linhas, arcos) formam um gráfico. . E cada vez que esse método é chamado, a lista é redefinida e, em seguida, novos gráficos podem ser desenhados. (Você precisa especificar sua posição inicial após definir o caminho); a
segunda etapa é chamar a função especificada para desenhar o caminho; a
terceira etapa é fechar o caminho closePath (não obrigatório);
Modelo de plotter de caneta
Desenhe um exemplo de triângulo:
var ctx = canvas.getContext("2d");
ctx.beginPath(); //开始路径
ctx.moveTo(75, 50); //指定起始位置
ctx.lineTo(100, 75); //绘制到这个位置的一条线
ctx.lineTo(100, 25); //绘制到这个位置的一条线
ctx.fill(); //填充图形，默认就制动结束路径了Neste processo, existe uma função mais útil, moveTo, esta função não pode desenhar nada, ela faz parte da lista de caminhos descrita acima.
Observe o papel desta função:
moveTo ()
move o traço para as coordenadas x e y especificadas.
Quando a tela é inicializada ou beginPath () é chamado, você geralmente usa a função moveTo () para definir o ponto de partida. Também podemos usar moveTo () para desenhar alguns caminhos descontínuos.
Neste momento, você pode imaginar o processo de desenhar algo no papel e a ponta da caneta movendo-se de um ponto a outro. O modo desse processo é chamado de modo de plotadora de caneta . Portanto, o modo de desenho canvas 2D também é este modo.
Agora não há problema em desenhar polígonos.
Encontre os gráficos especificados na tela
Em primeiro lugar, complete a descrição deste problema: como julgar que uma determinada figura é selecionada quando o mouse é pressionado?
Por exemplo, a seguinte figura:
O mouse clica no interior desse polígono irregular, como julgar?
A primeira reação é isPointInPath, ou iterar todos os gráficos, usando o ponto do mouse para detectar o ponto de colisão dos gráficos, este método pode ser usado, mas os cenários do aplicativo são relativamente pequenos e a sobrecarga de desempenho é relativamente grande. Se houver muitos gráficos, cada um Tudo precisa ser calculado, então essa interação se tornará muito hostil.
Existem outras soluções? Existe uma solução comumente usada na caixa delimitadora da indústria de jogos. O que é uma caixa delimitadora? Vamos tomar a figura acima como exemplo, o quadro de linha vermelha desenhado fora é a caixa delimitadora deste polígono.
Um exemplo muito vivo é a caixa de bolo lunar emitida pela empresa, que é uma caixa delimitadora de bolos lunares redondos ????
O esquema da caixa delimitadora tem uma deficiência, o intervalo selecionado é relativamente grosso. Por exemplo, na caixa vermelha acima, o conteúdo que não faz parte do polígono é selecionado. Se você quiser usar o esquema de caixa delimitadora, deve dividi-lo em detalhes suficientes, conforme mostrado na figura abaixo:
Várias caixas delimitadoras são separadas.Neste caso, o esquema das caixas delimitadoras é um pouco grosseiro quando os gráficos são particularmente complicados.
Há também a seguinte imagem, círculos sólidos e vazios, usando caixas delimitadoras é muito hostil.
O que fazer então?
Programa
Se quisermos selecionar rapidamente um determinado gráfico, podemos ter um hash correspondente para cada um de nossos gráficos e, quando o mouse clicar, podemos obter esse hash. Use o valor de hash para encontrar este gráfico, a complexidade de tempo desse processo é O (1).
Por exemplo, estes gráficos na tela:
Desenhei essas figuras em outra tela que era exatamente a mesma
A tela superior (exibida) é um gráfico normal, mas a cada gráfico é atribuído um valor de cor rgb.
A tela inferior (oculta) usa esse valor de cor rgb como preenchimento ou traço.
Quando o mouse for clicado, coloque um pixel na mesma posição da tela oculta.
E o valor rgb desse pixel é o hash que estamos procurando.
Até agora, as duas perguntas foram respondidas.
Recentemente, descobri que muitas pessoas em meu grupo de front-end começaram a estudar a direção dos gráficos de front-end. Gráficos e arquitetos de front-end agora são as duas principais direções de front-end, e os gráficos de front-end são uma direção de front-end única e habilidades necessárias. Ao contrário de outras direções, animação, visualização de dados e jogos são todos os seus campos. Há uma grande demanda no mercado, também pode-se verificar nos principais sites de recrutamento que o salário é muito alto e que o mercado atual é escasso de talentos.
Anteriormente, Jingcheng Yideng lançou o único tutorial gráfico front-end da indústria (1ª temporada), começando com o conhecimento básico de matemática, envolvendo todos os aspectos de 2D e 3D, ajudando todos a dominar rapidamente os principais pontos de conhecimento e habilidades de programação de gráficos.
Agora eles lançaram a segunda temporada de tutoriais gráficos, especialmente o novo combate de desenvolvimento de jogos H5, atualizações abrangentes, o objetivo é levá-lo para o mundo dos engenheiros gráficos front-end no menor tempo possível.
Aqueles que prestam atenção ao [Front End Universe] têm benefícios especiais: inscreva - se para a segunda temporada e dê o tutorial da primeira temporada.
Leia o código QR na imagem abaixo,
Para receber o cartão gratuito, apenas 0,02 yuan.
????????????