67 lines
2.3 KiB
Markdown
67 lines
2.3 KiB
Markdown
|
```wmd-options
|
||
|
|
language = es
|
||
|
|
title_i18n = Kanvas_title_technical_mapper
|
||
|
|
title_text = Mapeador - Kanvas
|
||
|
|
```
|
||
|
|
|
||
|
|
<!-- [[wmd]] -->
|
||
|
|
|
||
|
|
### Mapeador
|
||
|
|
|
||
|
|
El mapeador es el elemento donde se mapearán los objetos que contenga nuestro elemento HTML Canvas, procesado y gestionado sobre Kanvas. El acceso a dicho elemento es público y la variación de los elementos que contiene es dinámica presentándose directamente en el GUI como resultado.
|
||
|
|
|
||
|
|
```js
|
||
|
|
|
||
|
|
/** @type {AnP} */
|
||
|
|
const anp = new AnP({
|
||
|
|
globals : {
|
||
|
|
anp_root : "https://anp.k3y.pw"
|
||
|
|
},
|
||
|
|
callback : () => {
|
||
|
|
|
||
|
|
/** @type {Kanvas} */
|
||
|
|
const kanvas = new Kanvas(anp);
|
||
|
|
/** @type {boolean} */
|
||
|
|
let done = false,
|
||
|
|
/** @type {number|null} */
|
||
|
|
time = null;
|
||
|
|
|
||
|
|
// Creamos elementos en el mapa.
|
||
|
|
kanvas.map = [
|
||
|
|
{type : "rectangle", x : -20, y : -20, width : 40, height : 40, background : "#F00", rotate : 45, alpha : .6, childs : [
|
||
|
|
{type : "rectangle", x : 14, y : 14, width : 4, height : 4, background : "#8F8"}
|
||
|
|
]},
|
||
|
|
{type : "rectangle", x : -5, y : -3, width : 10, height : 6, background : "#0BA", alpha : .4},
|
||
|
|
{type : "text", x : 20, y : -20, text : "FPS", baseline : "top", align : "right", style : "bold", color : "#600", size : 2},
|
||
|
|
{type : "image", x : -10, y : -10, width : 20, height : 20, source : "https://cdn.k3y.pw/data/space_art_publish/red_giant.png", rotate : 45},
|
||
|
|
{type : "text", x : 20, y : -18, text : "Delta", baseline : "top", align : "right", style : "bold", color : "#600", size : 2}
|
||
|
|
];
|
||
|
|
|
||
|
|
// Cambio de FPSs
|
||
|
|
anp.threads.restart(24);
|
||
|
|
|
||
|
|
// Hilo donde se gestionan los cambios dentro del mapa.
|
||
|
|
anp.threads.add(() => {
|
||
|
|
|
||
|
|
/** @type {number} */
|
||
|
|
const new_time = Date.now();
|
||
|
|
|
||
|
|
if(done){
|
||
|
|
kanvas.map[0].rotate(1 * kanvas.delta);
|
||
|
|
kanvas.map[0].childs[0].rotate(-3 * kanvas.delta);
|
||
|
|
kanvas.map[3].rotate(-1 * kanvas.delta);
|
||
|
|
time && (kanvas.map[2].text = kanvas.fps.toFixed(2) + " FPS");
|
||
|
|
kanvas.map[4].text = kanvas.delta.toFixed(3) + " Delta";
|
||
|
|
}else
|
||
|
|
done = kanvas.map.every(item => item.state & Kanvas.prototype.LOADED);
|
||
|
|
|
||
|
|
time = new_time;
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
```
|
||
|
|
|
||
|
|
<!-- [[wmd]] -->
|