Continuar con el artículo anterior Tutorial de dibujo de la línea de lona
La última vez mencionamos que el lienzo a veces tiene líneas de 1 píxeles que son borrosas y parecen ser más amplias, como se muestra en la figura a continuación:
Tales líneas obviamente no son lo que queremos.
El propósito de este artículo es descubrir los principios y resolverlos.
Todos saben que el tamaño de pantalla más pequeño en la pantalla es de 1 píxel. Aunque las cosas menos de 1 píxel pueden no mostrarse, a la computadora no le importa e intentará dibujarla.
De hecho, los píxeles también son una unidad después de todo. Si ampliamos el lienzo a un tamaño lo suficientemente grande como para ver cada píxel claramente, ¿qué pasaría? Probablemente sea así:
Cada píxel tiene un rango de inicio y finalización, como se muestra en la figura, su rango comienza desde la izquierda, abarca 1 píxel y se detiene a la derecha.
Si seguimos el rango de inicio y finalización del píxel al dibujar líneas de 1 píxeles, definitivamente obtendremos una línea delgada muy estándar. como sigue:
Pero desafortunadamente, las líneas de lienzo se dibujan de manera diferente. En el artículo anterior, ya hemos dicho que cada línea de lienzo tiene una línea media infinitamente delgada, y el ancho de la línea se extiende desde la línea media hasta ambos lados. Si todavía dibujamos una línea desde el segundo punto de píxel, entonces la línea media de la línea estará cerca del punto de partida del segundo píxel, y luego comenzamos a dibujar, y el problema viene: la línea de lienzo se extiende a ambos lados con la línea media, en lugar de un lado (por ejemplo, aquí, si solo se extiende a la derecha, entonces nuestro problema ya no es un problema). Después de la extensión, nuestra línea es realmente así:
Hay otro problema en este momento: la computadora no permite gráficos menos de 1px, por lo que hizo un compromiso: dibujar ambos píxeles.
Entonces, de esta manera, la línea 1px original se convierte en una línea que se ve 2px de ancho.
Se encuentra la razón de la falla: la línea en lienzo alinea la línea media con el punto de partida del píxel, no el punto medio del píxel.
Entonces, ¿cómo resolvemos este doloroso problema? Tal vez algunas personas ya hayan pensado: ya que los dos puntos de partida son diferentes, ¡hagamos que sus puntos de partida sean los mismos!
¡Solo necesitamos alinear la línea media de la línea con el punto medio del píxel!
El punto intermedio del píxel es fácil de encontrar. Por ejemplo, el punto intermedio del segundo píxel es la posición de 1.5 píxeles de acuerdo con la explicación de la figura, por lo que el punto intermedio del píxel x es (X-0.5) PX.
Por supuesto, en ocasiones menos rigurosas, puede usar X+0.5.
Ahora probemos nuestros resultados en lienzo.
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 ();
Se ve bien?
Pero parece que cuando dibujamos líneas, estamos muy confundidos. ¿Siempre agregamos este deprimente 0.5? Por supuesto que no, porque usamos variables para guardar valores la mayor parte del tiempo, por lo que no necesitamos agregar 0.5 a cada valor
Además, para líneas con LineWidth> 1, no tenemos que preocuparnos por eso: porque este problema es el más obvio cuando la línea es de 1 px de ancho.