109 lines
5.2 KiB
Markdown
Executable File
109 lines
5.2 KiB
Markdown
Executable File
[[post_data {
|
|
"author" : "KyMAN",
|
|
"since" : 20210620,
|
|
"version" : 20210620
|
|
}]]
|
|
# 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:
|
|
|
|
```maths
|
|
\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:
|
|
|
|
```maths
|
|
\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:
|
|
|
|
```maths
|
|
\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.
|
|
|
|
```maths
|
|
\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.
|
|
|
|
[[html_data {
|
|
"title" : "Kanvas - Calidad",
|
|
"url" : "https://kanvas.k3y.pw/es/doc/kanvas.quality.html",
|
|
"author" : "KyMAN",
|
|
"since" : 20210620,
|
|
"version" : 20210620,
|
|
"key_words" : "kanvas,canvas,kyman,2d,graphics,calidad",
|
|
"description" : "Manual de los parámetros de configuración del Kanvas.",
|
|
"project" : "Kanvas",
|
|
"logo" : "https://kanvas.k3y.pw/images/kanvas.png"
|
|
}]]
|