Calidad
Como ya se dijo anteriormente, Kanvas se basa en la etiqueta HTML CANVAS, a la cual se le puede
establecer un parámetro de codificación de la imagen a mostrar y pocos parámetros referidos a la
calidad más. Un punto importante para este tipo de trabajos es la resolución pues a mayor resolución
más puntos por refresco ha de procesarse, y por lo tanto, también da un aumento significativo del
rendimiento, sin embargo, CANVAS no tiene ningún atributo que gestione esto a excepción de WIDTH y
HEIGHT, atributos que establecen los píxeles de ancho y alto consecutivamente, que no tienen
porqué coincidir con el ancho y alto real de la imagen, la cual puede ser alterada mediante CSS, sin
ir más lejos, para adaptarse a la pantalla, por lo tanto, la resolución en sí no es dinámica, sino
fija, cuando dicho tamaño puede ser dinámico. Para ello se pensó en 4 atributos los cuales son:
- quality: Calidad global del CANVAS.
- quality_x: Calidad en el eje X.
- quality_y: Calidad en el eje Y.
- cells: Número de celdas en el lado más estrecho.
Estos atributos representan la calidad porcentual comprendida en el rango (0,1] para representar
la resolución real dinámica del elemento CANVAS y por tanto, tener la misma relación de calidad ante
la posibilidad de cambiar de tamaño o aspecto (Proporción). Para poder conseguir ésto, Kanvas
trabaja por detrás adaptando las posiciones y medidas a éstos valores, quedando las siguientes
fórmulas:
-
Language
maths
-
Lines
4
-
Characters
80
\displaylines{
f_x = x \cdot q \cdot qx \\
f_y = y \cdot q \cdot qy
}
Por lo tanto, si tenemos una pantalla FullHD y el marco HTML está a pantalla completa, la calidad
global está al 80%, la calidad del eje X está al 90% y del eje Y al 100% tendríamos el siguiente
resultado:
-
Language
maths
-
Lines
4
-
Characters
293
\displaylines{
W_{ancho} = x \cdot q \cdot qx = 1920 \cdot \frac{80}{100} \cdot \frac{90}{100} = 1920 \cdot 0.8 \cdot 0.9 = 1920 \cdot 0.72 = 1382.4 \\
H_{alto} = y \cdot q \cdot qy = 1080 \cdot \frac{80}{100} \cdot \frac{100}{100} = 1080 \cdot 0.8 \cdot 1 = 1080 \cdot 0.8 = 864
}
IMPORTANTE: No se aconseja la modificación de los parámetros de configuración quality_x
ni quality_y por poder alterar de forma inesperada la respuesta a ciertas operaciones, posiciones, o
matices, así como variar el régimen de calidad de forma abrupta.
El resultado de estas operaciones se pondrán como atributo WIDTH y HEIGHT del elemento HTML CANVAS,
lo que aumentará o disminiurá la calidad de la imagen, y por tanto, menor o mayor consumo de
recursos, así como a la inversa en rendimiento.
IMPORTANTE: Los valores quality, quality_x y quality_y son valores que no deberían
de ser nunca mayores que 1 (El 100%) por el hecho de lo aquí mostrado, que sería la resolución real
a la que trabajar, lo mismo que tampoco puede ser cero o menor pues supondría una calidad absurda o
imposible.
Todo esto permite hacer una relación de calidad con resolución variable tanto en el tamaño como
relación de aspecto del marco HTML donde se encuentre el elemento CANVAS, así como poder gestionar a
nivel de código cambios en la calidad sin detener la vista ejecutada, ahora bien, también nos deja
ver que no hay ahora un concepto de posición fijo y que éste depende plenamente de calidad, para
ello se usará una relación de tamaño al número de celdas en el lado más estrecho del marco HTML a
partir del atributo cells, de esta forma, si queremos posicionar un objeto dentro del campo de
visión del Kanvas, a partir del resultado anterior, tendríamos la siguiente formulación:
-
Language
maths
-
Lines
7
-
Characters
164
\displaylines{
p_x = \frac{x \cdot q \cdot qx}{c} \\
p_y = \frac{y \cdot q \cdot qy}{c} \\
\\
p_x = \frac{f_x}{c} \\
p_y = \frac{f_y}{c}
}
Continuando con el ejemplo anterior, si ponemos que queremos 20 celdas y que queremos un punto el
cual esté en el 5 del eje X y en el 7 del eje Y tenemos:
NOTA: Cogemos del ejemplo anterior, para determinar el tamaño real de la celda el eje Y por
ser más pequeño que el eje X.
-
Language
maths
-
Lines
6
-
Characters
196
\displaylines{
{tc} = \frac{f_y}{c} = \frac{864}{20} = 43.2 \text{(Tamaño celda)} \\
\\
i_x = X \cdot {tc} = 5 \cdot 43.2 = 216 \\
i_y = Y \cdot {tc} = 7 \cdot 43.2 = 302.4
}
De esta forma podemos mover un objeto a partir de las celdas, entendiendo que se puede mover a un
fragmento de una celda concreta con valores absolutos al lienzo y no a la resolución. Dicha idea
imita los DPI de una pantalla Android por ejemplo, que hace una equivalencia de puntos, pero aquí
también se ignora el tamaño, quedando para cualquier monitor, resolución, etc. Exactamente igual.
Kanvas