Continue com o artigo anterior Tutorial de desenho de linha de lona
A última vez que mencionamos que a tela às vezes tem 1 linhas de pixels que são borradas e parecem mais amplas, como mostrado na figura abaixo:
Essas linhas obviamente não são o que queremos.
O objetivo deste artigo é descobrir os princípios e resolvê -los.
Todo mundo sabe que o menor tamanho de exibição na tela é de 1 pixel. Embora as coisas menos de 1 pixel não possam ser exibidas, o computador não se importa e ele tentará desenhá -lo.
De fato, os pixels também são uma unidade, afinal. Se ampliarmos a tela para um tamanho grande o suficiente para ver cada pixel claramente, o que aconteceria? Provavelmente é assim:
Cada pixel tem uma faixa de partida e final, como mostrado na figura, seu alcance começa na esquerda, abrange 1 pixels e para a direita.
Se seguirmos o alcance inicial e final do pixel ao desenhar linhas de 1 pixels, definitivamente obteremos uma linha fina muito padrão. do seguinte modo:
Infelizmente, porém, as linhas de tela são desenhadas de maneira diferente. No artigo anterior, já dissemos que cada linha de tela tem uma linha média infinitamente fina, e a largura da linha se estende da linha média para os dois lados. Se ainda desenharmos uma linha do segundo ponto de pixel, a linha média da linha estará próxima do ponto de partida do segundo pixel e, em seguida, começamos a desenhar, e o problema vem: a linha de tela se estende a ambos os lados com a linha média, em vez de um lado (por exemplo, aqui, se ela se estender apenas para a direita, então nosso problema não é mais um problema). Após a extensão, nossa linha é realmente assim:
Há outro problema neste momento: o computador não permite gráficos menos que 1px, então ele fez um compromisso: desenhe os dois pixels.
Portanto, dessa maneira, a linha 1PX original se torna uma linha que parece 2px de largura.
A razão para a falha é encontrada: a linha na tela alinha a linha média com o ponto de partida do pixel, não o ponto médio do pixel.
Então, como resolvemos esse problema doloroso? Talvez algumas pessoas já tenham pensado: como os dois pontos de partida são diferentes, vamos fazer seus pontos de partida iguais!
Só precisamos alinhar a linha do meio da linha com o ponto médio do pixel!
O ponto intermediário do pixel é fácil de encontrar. Por exemplo, o ponto intermediário do segundo pixel é a posição de 1,5 pixels de acordo com a explicação da figura, de modo que o ponto intermediário do x pixel é (X-0.5) px.
Obviamente, em ocasiões menos rigorosas, você pode usar x+0,5.
Agora vamos tentar nossos resultados na tela.
ctx.moveto (100,5.100,5);
ctx.lineto (200,5.100.5);
ctx.lineto (200,5.200.5);
ctx.lineto (100,5.200,5);
ctx.lineto (100,5.100.5);
ctx.closePath ();
ctx.LineWidth = 1;
ctx.strokestyle = 'rgba (255,0,0,0,5)';
ctx.stroke ();
Parece certo?
Mas parece que quando desenhamos linhas, estamos muito confusos. Sempre adicionamos esse 0,5 deprimente? É claro que não, porque usamos variáveis para economizar valores na maioria das vezes, por isso não precisamos adicionar 0,5 a cada valor
Além disso, para linhas com largura de linha> 1, não precisamos nos preocupar com isso: porque esse problema é o mais óbvio quando a linha tem 1 px de largura.