Kanvas/WMD/es/doc/kanvas.settings.w.md

[[post_data {
    "author" : "KyMAN",
    "since" : 20210620,
    "version" : 20210620
}]]
# 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:

```js
// 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.

```maths
\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.

```maths
\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.

```maths
\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.

<div style="text-align:center;">
    <table style="display:inline-block;">
        <tbody style="display:table;">
            <tr>
                <td style="border:1px solid #000;">7</td>
                <td style="border:1px solid #000;">8</td>
                <td style="border:1px solid #000;">9</td>
            </tr>
            <tr>
                <td style="border:1px solid #000;">4</td>
                <td style="border:1px solid #000;">5</td>
                <td style="border:1px solid #000;">6</td>
            </tr>
            <tr>
                <td style="border:1px solid #000;">1</td>
                <td style="border:1px solid #000;">2</td>
                <td style="border:1px solid #000;">3</td>
            </tr>
        </tbody>
    </table>
</div>

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_.

```maths
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:

```js
// 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.

[[html_data {
    "title" : "Kanvas - Configuración",
    "url" : "https://kanvas.k3y.pw/es/doc/kanvas.settings.html",
    "author" : "KyMAN",
    "since" : 20210620,
    "version" : 20210620,
    "key_words" : "kanvas,canvas,kyman,2d,graphics,configuración,parámetros,atributos",
    "description" : "Manual de los parámetros de configuración del Kanvas.",
    "project" : "Kanvas",
    "logo" : "https://kanvas.k3y.pw/images/kanvas.png"
}]]