Continuez avec le précédent Tutoriel de dessin de ligne de toile d'article
La dernière fois que nous avons mentionné que la toile a parfois des lignes de 1 pixel qui sont floues et semblent être plus larges, comme le montre la figure ci-dessous:
De telles lignes ne sont évidemment pas ce que nous voulons.
Le but de cet article est de comprendre les principes et de les résoudre.
Tout le monde sait que la plus petite taille d'affichage à l'écran est de 1 pixel. Bien que les choses moins de 1 pixel ne soient pas affichées, l'ordinateur s'en fiche et il essaiera de le dessiner.
En fait, les pixels sont également une unité après tout. Si nous élargissons la toile à une taille suffisamment grande pour voir clairement chaque pixel, que se passerait-il? C'est probablement comme ça:
Chaque pixel a une plage de départ et d'extrémité, comme le montre la figure, leur portée commence par la gauche, s'étend sur 1 pixel et s'arrête à droite.
Si nous suivons la plage de début et de fin du pixel lors du dessin de 1 pixel, alors nous obtiendrons certainement une ligne mince très standard. comme suit:
Mais malheureusement, les lignes de toile sont dessinées différemment. Dans l'article précédent, nous avons déjà dit que chaque ligne de toile a une ligne médiane infiniment mince, et la largeur de la ligne s'étend de la ligne médiane aux deux côtés. Si nous dessinons toujours une ligne du deuxième point de pixels, alors la ligne médiane de la ligne sera proche du point de départ du deuxième pixel, puis nous commençons à dessiner, et le problème vient: la ligne de toile s'étend aux deux côtés avec la ligne médiane, plutôt qu'un problème (par exemple, ici, si elle ne s'étend que vers la droite, alors notre problème n'est plus un problème). Après l'extension, notre ligne est en fait comme ceci:
Il y a un autre problème pour le moment: l'ordinateur n'autorise pas les graphiques inférieurs à 1px, il a donc fait un compromis: dessiner les deux pixels.
Ainsi, de cette manière, la ligne 1Px d'origine devient une ligne qui a l'air de 2px de large.
La raison de la défaillance est trouvée: la ligne de toile aligne la ligne médiane avec le point de départ du pixel, pas le point médian du pixel.
Alors, comment résolvons-nous ce problème douloureux? Peut-être que certaines personnes ont déjà pensé: puisque les deux points de départ sont différents, faisons leurs points de départ les mêmes!
Nous avons juste besoin d'aligner la ligne médiane de la ligne avec le point médian du pixel!
Le point intermédiaire du pixel est facile à trouver. Par exemple, le point intermédiaire du deuxième pixel est la position de 1,5 pixels selon l'explication de la figure, de sorte que le point intermédiaire du pixel x est (x-0,5) px.
Bien sûr, dans des occasions moins rigoureuses, vous pouvez utiliser x + 0,5.
Essayons maintenant nos résultats sur toile.
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 ();
Ça a l'air non?
Mais il semble que lorsque nous dessinons des lignes, nous sommes très confus. Ajoutons-nous toujours ce 0,5 déprimant? Bien sûr que non, parce que nous utilisons des variables pour enregistrer les valeurs la plupart du temps, nous n'avons donc pas besoin d'ajouter 0,5 à chaque valeur
De plus, pour les lignes avec Linewidth> 1, nous n'avons pas à nous en soucier: parce que ce problème est le plus évident lorsque la ligne est de 1px de large.