Configuración
Al ser una simple librería no contamos con archivos externos de configuración por lo que si queremos
hacer uso de ésta o cambiar los parámetros por defecto de la misma, hemos de hacer a partir del
propio constructor, a partir de meterle al constructor, como primer parámetro, un diccionario con
los parámetros que queremos alterar.
NOTA: Por defecto, si se deja vacío, se usará la configuración por defecto; si se le mete un
valor String se entenderá como el nombre de la instancia dentro de JavaScript para poder ser
referenciada en los eventos; y si es un diccionario, éste representará cada uno de los parámetros
que queramos alterar o incluso añadir, para hacer uso de éstos, por ejemplo, para nuevos componentes
que se le agreguen al Kanvas o para hacer uso de forma externa al mismo usando el sistema de gestión
de parámetros de configuración del propio Kanvas. Para agregar más parámetros simplemente hemos de
escribirlos con un valor y listo.
IMPORTANTE: Cuidado a la hora de agregar nuevos parámetros pues si se agrega uno que ya
existe, al existente se le cambiará el valor, pudiendo dar resultados inesperados.
IMPORTANTE: Si el nombre del objeto no se corresponde con el real, los eventos sobre éste no
funcionarán y se puede correr el riesgo de que los eventos tiren contra otro objeto no esperado.
Un ejemplo de como gestionar los parámetros puede ser lo siguiente:
-
Language
js
-
Lines
20
-
Characters
606
// Objeto Kanvas con los valores de configuración por defecto.
kanvas = new Kanvas();
// Objeto Kanvas con cambio de nombre del objeto.
kanvas2 = new Kanvas("kanvas2");
// Múltiples objetos Kanvas por diccionario.
objetos_kanvas = {
prueba_1 : new Kanvas("objetos_kanvas.prueba_1"),
prueba_2 : new Kanvas("objetos_kanvas.prueba_2"),
prueba_3 : new Kanvas("objetos_kanvas.prueba_3"),
prueba_n : new Kanvas("objetos_kanvas.prueba_n")
};
// Objeto Kanvas con los FPS alterados.
kanvas_slow = new Kanvas({
object_name : "kanvas_slow",
frames_per_second : 12
});
Los parámetros de configuración que tiene Kanvas por defecto internamente son los siguientes:
quality
Valor decimal mayor que 0 y menor o igual que 1, que representa porcentualmente la calidad global
del objeto HTML CANVAS. Su valor por defecto es 1.
-
Language
maths
-
Lines
1
-
Characters
23
\text{quality} = (0, 1]
quality_x
Valor decimal mayor que 0 y menor o igual que 1, que representa porcentualmente la calidad en el eje
X del objeto HTML CANVAS. Su valor por defecto es 1.
-
Language
maths
-
Lines
1
-
Characters
25
\text{quality_x} = (0, 1]
NOTA: Se aconseja dejar dicho valor en 1 por la posibilidad de dar una visualización no
deseada, así como posicionamientos inesperados.
quality_y
Valor decimal mayor que 0 y menor o igual que 1, que representa porcentualmente la calidad en el eje
Y del objeto HTML CANVAS. Su valor por defecto es 1.
-
Language
maths
-
Lines
1
-
Characters
25
\text{quality_y} = (0, 1]
NOTA: Se aconseja dejar dicho valor en 1 por la posibilidad de dar una visualización no
deseada, así como posicionamientos inesperados.
cells
Valor decimal mayor que 0 que representa el número de celdas en que se divide el lado más estrecho
del objeto HTML CANVAS (El lienzo donde se plasmarán los gráficos 2D). Este valor es orientativo
para permitir dar posicionamientos absolutos a los objetos que se metan dentro del CANVAS, similar
al sistema de DPI en Android. Su valor por defecto es 100.
origin
Valor entero positivo comprendido entre 1 y 9, ambos inclusive, que representa el punto 0 (Eje X 0 y
eje Y 0) u origen del cual se empieza a contar positivo o negativo. Este valor representa la
posición de origen según el teclado numérico, siendo los siguientes:
- Esquina inferior izquierda.
- Inferior centro.
- Esquina inferior derecha.
- Medio izquierda.
- Centro del lienzo.
- Medio derecha.
- Esquina superior izquierda.
- Superior centro.
- Esquina superior derecha.
Su valor por defecto es 5.
frames_per_second
Valor decimal mayor que 0 que representa los fotogramas por segundo, es decir, la tasa de refresco
por segundo, o la cantidad de imágenes o vistas a procesar cada segundo. Por defecto es 60.
IMPORTANTE: La tasa de fotogramas puede bajar según la capacidad del equipo y los recursos que
consuma el procesado del mapeado del Kanvas.
NOTA: Los fotogramas no los dará exacto puede excederse en el caso de los Webkit cosa de 3 o 4
FPS.
ratio
Valor decimal igual o superior a 0 que representa el ratio o relación de aspecto del CANVAS
(Lienzo). Dicho valor puede ser también un valor equivalente a 0 con tipado diferente como puede ser
null, false, "", etc. Los cuales representan que cogerá el ratio por defecto que tenga el
marco donde se instala el GUI del objeto Kanvas. Su valor por defecto es null.
-
Language
maths
-
Lines
1
-
Characters
15
r = \frac{x}{y}
NOTA: Para facilitar la visualización del ratio se puede hacer uso de una pequeña división
donde el numerador sea el ancho y el denominador sea el alto, o un un valor decimal que represente
el resultado de dividir el ancho entre el alto. Se entiende con un ratio de pantalla vertical a un
valor superior a 1; una pantalla cuadrada un 1; y una pantalla horizontal cuando es inferior a 1.
NOTA: El ratio no impedirá que el CANVAS intente coger el máximo área posible del marco HTML
donde se encuentre, simplemente que en el lado donde sobre, éste se centrará automáticamente.
overwrite
Valor booleano que verifica si donde se llame a dicho parámetro, algún o algunos elementos puedan
ser sobreescritos si se da la ocasión. Por defecto es false.
Dicho valor es usado para cuando se intenta agregar elementos nuevos a la configuración entre otros
posibles casos de este tipo.
position
Posición HTML donde instalar el objeto Kanvas, es decir, el DIV con sus contenido CANVAS y cachés.
Dicho valor puede ser un objeto ya cargado propiamente dicho o bien, un selector CSS en formato
String. Su valor por defecto es el selector CSS "body" para ser cargado directamente sobre el
BODY.
autostart
Valor Booleano que verifica si se autoinicia (true) o se hace un inicio manual (false). Por
defecto su valor es true. Para hacer el inicio manual ha de llamarse a la función "start", por
ejemplo:
-
Language
js
-
Lines
14
-
Characters
367
// Objeto Kanvas autoiniciado.
kanvas_autoiniciado = new Kanvas({
object_name : "kanvas_autoiniciado",
autostart : true
});
// Objeto Kanvas no autoiniciado.
kanvas_manual = new Kanvas({
object_name : "kanvas_manual",
autostart : false
});
// Para iniciar el objeto Kanvas manualmente hemos de hacer tal que así:
kanvas_manual.start();
object_name
Valor String que representa el nombre del objeto. Por defecto es "kanvas", sin embargo, si éste
no es el nombre del objeto ha de darse en el constructor del objeto, ya sea mandando como primera
parámetro un String con el nombre de la instancia o bien, en el diccionario de entrada, una llave
con este nombre con el valor del nombre de la instancia.
Este parámetro es fundamental para que los eventos ataquen al objeto Kanvas en cuestión.
IMPORTANTE: Si está errado el nombre del objeto éste no funcionará correctamente, incluso
pudiendo atacar a otros objetos Kanvas por cruce de nombres, por ejemplo, usando siempre el valor
por defecto del mismo.
class
Valor String que representa la clase o clases HTML para identificar, por ejemplo, desde JavaScript o
CSS. Por defecto es "kanvas".
IMPORTANTE: Es importante que si se altera la clase, ésta contenga, entre otras clases
opcionales a decisión del desarrollador, la clase kanvas.
application
Valor String que representa el nombre de la aplicación. Por defecto su valor es Kanvas, pero puede
ser alterado sin consecuencia alguna, simplemente, el atributo del objeto Kanvas HTML raíz
"data-application" pasará a ser dicho valor.
x
Valor decimal que representa el valor del eje X de cualquier elemento por defecto. Por defecto,
dicho valor es 0.
NOTA: Generalmente no se hace uso de este valor pues cada componente o elemento de un
componente ya tiene sus valores por defecto, éste se deja por si no existen dichos valores en la
configuración.
y
Valor decimal que representa el valor del eje Y de cualquier elemento por defecto. Por defecto,
dicho valor es 0.
NOTA: Generalmente no se hace uso de este valor pues cada componente o elemento de un
componente ya tiene sus valores por defecto, éste se deja por si no existen dichos valores en la
configuración.
width
Valor decimal que representa el valor del ancho de cualquier elemento por defecto. Por defecto,
dicho valor es 0.
NOTA: Generalmente no se hace uso de este valor pues cada componente o elemento de un
componente ya tiene sus valores por defecto, éste se deja por si no existen dichos valores en la
configuración.
height
Valor decimal que representa el valor del alto de cualquier elemento por defecto. Por defecto,
dicho valor es 0.
NOTA: Generalmente no se hace uso de este valor pues cada componente o elemento de un
componente ya tiene sus valores por defecto, éste se deja por si no existen dichos valores en la
configuración.
Kanvas