fix: Migrating project to the new Gitea Host.
This commit is contained in:
parent
fd89e9649e
commit
1164a8db12
7
.gitignore
vendored
Executable file
7
.gitignore
vendored
Executable file
@ -0,0 +1,7 @@
|
||||
Kanvas.apache2.conf
|
||||
PHP/Kanvas.Secrets.php
|
||||
Public/es
|
||||
Public/dev
|
||||
Public/index.html
|
||||
Public/data
|
||||
Data
|
||||
72
Artbook/Kanvas.svg
Executable file
72
Artbook/Kanvas.svg
Executable file
@ -0,0 +1,72 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="200mm"
|
||||
height="200mm"
|
||||
viewBox="0 0 200 200"
|
||||
version="1.1"
|
||||
id="svg8"
|
||||
inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)"
|
||||
sodipodi:docname="Kanvas.svg">
|
||||
<style
|
||||
id="style833"></style>
|
||||
<defs
|
||||
id="defs2" />
|
||||
<sodipodi:namedview
|
||||
id="base"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="0.35"
|
||||
inkscape:cx="383.24211"
|
||||
inkscape:cy="114.18995"
|
||||
inkscape:document-units="mm"
|
||||
inkscape:current-layer="layer1"
|
||||
inkscape:document-rotation="0"
|
||||
showgrid="false"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1017"
|
||||
inkscape:window-x="1912"
|
||||
inkscape:window-y="-8"
|
||||
inkscape:window-maximized="1" />
|
||||
<metadata
|
||||
id="metadata5">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
inkscape:label="Capa 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1">
|
||||
<path
|
||||
id="rect837"
|
||||
style="fill:#000000;fill-rule:evenodd;stroke-width:1.22475"
|
||||
d="M 0 0 L 0 755.90625 L 283.46484 755.90625 L 283.46484 646.20703 L 261.6582 675.32227 L 11.542969 483.94141 L 283.46484 120.88086 L 283.46484 0 L 0 0 z "
|
||||
transform="scale(0.26458333)" />
|
||||
<path
|
||||
id="rect837-8"
|
||||
style="fill:#000000;fill-rule:evenodd;stroke-width:1.36931"
|
||||
d="M 402.4375 0 L 49.337891 466.43164 L 275.3457 637.52539 L 330.33008 564.89258 L 196.51367 277.31641 L 491.13672 143.5918 L 551.33398 272.95703 L 757.96875 0 L 402.4375 0 z "
|
||||
transform="scale(0.26458333)" />
|
||||
<path
|
||||
id="rect837-0"
|
||||
style="fill:#000000;fill-rule:evenodd;stroke-width:1.22475"
|
||||
d="M 489.16406 173.17969 L 231.59766 291.54883 L 445.00195 755.90625 L 756.96875 755.90625 L 489.16406 173.17969 z "
|
||||
transform="scale(0.26458333)" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
BIN
Artbook/Kanvas.xcf
Executable file
BIN
Artbook/Kanvas.xcf
Executable file
Binary file not shown.
175
HTML/base.kanvas.html
Executable file
175
HTML/base.kanvas.html
Executable file
@ -0,0 +1,175 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="{language}">
|
||||
<head>
|
||||
<title>{title}</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||
<link rel="icon" href="/images/kanvas-32.png" sizes="32x32" />
|
||||
<link rel="icon" href="/images/kanvas-192.png" sizes="192x192" />
|
||||
<link rel="icon" href="/images/kanvas-512.png" sizes="512x512" />
|
||||
<link rel="apple-touch-icon-precomposed" href="/images/kanvas-180.png" />
|
||||
<meta name="msapplication-TileImage" content="/images/kanvas-270.png" />
|
||||
|
||||
<meta name="licence:text" content="© 2020-2021 CopyLeft. GPLv3" />
|
||||
<meta name="licence:link" content="https://www.gnu.org/licenses/gpl-3.0.txt" />
|
||||
<meta name="licence:icon" content="https://www.gnu.org/graphics/gplv3-88x31.png" />
|
||||
|
||||
<meta name="xdoc:link" content="{url}" />
|
||||
<meta name="xdoc:author" content="{author}" />
|
||||
<meta name="xdoc:since" content="{since}" />
|
||||
<meta name="xdoc:version" content="{version}" />
|
||||
<meta name="xdoc:access" content="public" />
|
||||
|
||||
<meta name="description" data-i18n="kanvas_description" content="{description}" />
|
||||
<meta name="keywords" data-i18n="kanvas_keywords" content="{key_words}" />
|
||||
<meta name="author" content="{author}" />
|
||||
<meta name="copyright" content="© 2020-2021 CopyLeft" />
|
||||
<meta name="robots" content="index,follow" />
|
||||
<meta name="googlebot" content="index,follow,max-snippet:-1,max-image-preview:large,max-video-preview:-1" />
|
||||
<meta name="bingbot" content="index,follow,max-snippet:-1,max-image-preview:large,max-video-preview:-1" />
|
||||
<!--<meta http-equiv="refresh" content="30" />-->
|
||||
<!--<meta http-equiv="cache-control" content="no-cache" />-->
|
||||
<!--<meta http-equiv="expires" content="0" />-->
|
||||
<link rel="canonical" href="{url}" />
|
||||
<link rel="alternate" href="{url}" hreflang="es" />
|
||||
<meta property="og:locale:alternate" content="es_ES" />
|
||||
<meta name="referrer" content="origin" />
|
||||
<meta name="fragment" content="!" /><!-- Para uso AJAX -->
|
||||
<meta name="language" content="es" />
|
||||
<meta name="revisit-after" content="7 days" /><!-- Regreso de las arañas. Información Crawl. -->
|
||||
<meta name="rating" content="general" /><!-- Tipo de contenido: general, mature, restricted, adult, 14 years, safe for kids. -->
|
||||
<meta name="author" content="{author}" />
|
||||
<meta name="owner" content="{author}" />
|
||||
|
||||
<meta property="og:locale" content="es_ES" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:title" data-i18n="kanvas_title" content="{title}" />
|
||||
<meta property="og:description" data-i18n="kanvas_description" content="{description}" />
|
||||
<meta property="og:url" content="{url}" />
|
||||
<meta property="og:site_name" content="{project}" />
|
||||
<meta property="og:image" content="{logo}" />
|
||||
<!--<meta property="fb:admins" content="FB-AppID" />-->
|
||||
<meta name="twitter:card" content="summary" />
|
||||
<meta name="twitter:description" data-i18n="kanvas_description" content="{description}" />
|
||||
<meta name="twitter:title" data-i18n="kanvas_title" content="{title}" />
|
||||
<!--<meta name="twitter:site" content="@Kanvas" />-->
|
||||
<!--<meta name="twitter:creator" content="@Kanvas" />-->
|
||||
|
||||
<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE" />
|
||||
<!--<meta name="google-site-verification" content="123456789" />--><!-- Verificación en el Google Search Console. -->
|
||||
<meta name="google" content="nositelinkssearchbox" />
|
||||
<link rel="dns-prefetch" href="{url}" />
|
||||
<!--<link rel="amphtml" href="{url}index.amp.html" />--><!-- Indica si tiene página para móviles. Tecnología AMP. -->
|
||||
|
||||
<link type="text/css" rel="stylesheet" data-language="CSS3" href="https://cdn.k3y.pw/css/fonts/local/Roboto.css" data-crossorigin="anonymous" charset="utf-8" />
|
||||
<link type="text/css" rel="stylesheet" data-language="CSS3" href="https://cdn.k3y.pw/css/fonts/local/RobotoMono.css" data-crossorigin="anonymous" charset="utf-8" />
|
||||
<link type="text/css" rel="stylesheet" data-language="CSS3" href="https://cdn.k3y.pw/css/fonts/local/FontAwesome5Free.css" data-crossorigin="anonymous" charset="utf-8" />
|
||||
<link type="text/css" rel="stylesheet" data-language="CSS3" href="https://unpkg.com/@highlightjs/cdn-assets@10.7.2/styles/default.min.css" data-crossorigin="anonymous" charset="utf-8" />
|
||||
|
||||
<script data-type="test/javascript" data-language="JavaScript 1.8.5" src="https://unpkg.com/mermaid@8.9.3/dist/mermaid.min.js" data-js-map="https://unpkg.com/mermaid@8.9.3/dist/mermaid.min.js.map" data-crossorigin="anonymous", charset="utf-8"></script>
|
||||
<script data-type="test/javascript" data-language="JavaScript 1.8.5" src="https://unpkg.com/@highlightjs/cdn-assets@10.7.2/highlight.min.js" data-crossorigin="anonymous", charset="utf-8"></script>
|
||||
<script data-type="test/javascript" data-language="ECMAScript 2015" src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js" data-crossorigin="anonymous" charset="utf-8"></script>
|
||||
|
||||
<link type="text/css" rel="stylesheet" data-language="SASS/CSS3" href="https://wmarkdown.k3y.pw/scss/WMarkDown.css" data-scss="https://wmarkdown.k3y.pw/scss/WMarkDown.scss" data-css-map="https://wmarkdown.k3y.pw/scss/WMarkDown.css.map" data-crossorigin="anonymous" charset="utf-8" />
|
||||
<link type="text/css" rel="stylesheet" data-language="CSS3" href="https://wmarkdown.k3y.pw/css/WMarkDown.icons.css" data-crossorigin="anonymous" charset="utf-8" />
|
||||
|
||||
<style data-type="text/css" data-rel="stylesheet" data-language="CSS3" charset="utf-8">
|
||||
|
||||
html,body{
|
||||
height : 100%;
|
||||
margin : 0px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script data-type="text/javascript" data-language="ECMAScript 2015" src="https://wmarkdown.k3y.pw/ecma/WMarkDown.ecma.js" data-crossorigin="anonymous" charset="utf-8"></script>
|
||||
<script data-type="text/javascript" data-language="ECMAScript 2015" src="https://wmarkdown.local/ecma/WMarkDown.Dictionary.ecma.js" data-crossorigin="anonymous" charset="utf-8"></script>
|
||||
<script data-type="text/javascript" data-language="ECMAScript 2015" src="https://wmarkdown.k3y.pw/ecma/WMarkDown.Multimedia.ecma.js" data-crossorigin="anonymous" charset="utf-8"></script>
|
||||
|
||||
<script data-type="text/javascript" data-language="ECMAScript 2015" charset="utf-8">
|
||||
|
||||
wmarkdown = new WMarkDown();
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body class="wmarkdown">
|
||||
<header>
|
||||
<h1 class="logo">
|
||||
<a href="https://kanvas.k3y.pw#">
|
||||
<span class="image">
|
||||
<span style="background-image:url('/images/kanvas.png');"></span>
|
||||
<img src="/images/kanvas.png" alt="Kanvas" />
|
||||
</span>
|
||||
<span class="text">Kanvas</span>
|
||||
</a>
|
||||
</h1>
|
||||
<nav class="main-menu">
|
||||
<ul>
|
||||
<li><a href="/" data-i18n="home" data-i18n-without="true" title="Home" target="_self">
|
||||
<span data-icon="home"></span>
|
||||
<span data-i18n="home">Home</span>
|
||||
</a></li>
|
||||
<li><a href="/dev" data-i18n="developt" data-i18n-without="true" title="Desenvolvemento" target="_self">
|
||||
<span data-icon="developt"></span>
|
||||
<span data-i18n="developt">Desarrollo</span>
|
||||
</a></li>
|
||||
<li><a href="https://git.k3y.pw/KyMAN/Kanvas" data-i18n="git" data-i18n-without="true" title="Git" target="_blank">
|
||||
<span data-icon="git"></span>
|
||||
<span data-i18n="git">Git</span>
|
||||
</a></li>
|
||||
<li><a href="/test" data-i18n="example" data-i18n-without="true" title="Ejemplo" target="_blank">
|
||||
<span data-icon="example"></span>
|
||||
<span data-i18n="example">Ejemplo</span>
|
||||
</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<div class="body" data-headers-menu-deployed="true" data-files-menu-deployed="true">
|
||||
<fieldset class="headers-menu">
|
||||
<legend data-i18n="headers_menu" title="Menu">Menu</legend>
|
||||
<nav>
|
||||
<ul>{menu}</ul>
|
||||
</nav>
|
||||
<div class="menu-buttons">
|
||||
<button type="button" data-i18n="hide" data-i18n-without="true" title="Hide" onclick="wmarkdown.hide_menu(this, event);" data-visible="true">
|
||||
<span data-icon="hide"></span>
|
||||
<span data-i18n="hide">Hide</span>
|
||||
</button>
|
||||
<button type="button" data-i18n="show" data-i18n-without="true" title="Show" onclick="wmarkdown.show_menu(this, event);" data-visible="false">
|
||||
<span data-icon="show"></span>
|
||||
<span data-i18n="show">Show</span>
|
||||
</button>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset class="content">
|
||||
<legend data-i18n="content" title="Content">Content</legend>
|
||||
<div class="content-box">{content}</div>
|
||||
</fieldset>
|
||||
<fieldset class="files">
|
||||
<legend data-i18n="files" title="Files">Files</legend>
|
||||
<nav>
|
||||
<ul>{files}</ul>
|
||||
</nav>
|
||||
<div class="menu-buttons">
|
||||
<button type="button" data-i18n="hide" data-i18n-without="true" title="Hide" onclick="wmarkdown.hide_menu(this, event);" data-visible="true">
|
||||
<span data-icon="hide"></span>
|
||||
<span data-i18n="hide">Hide</span>
|
||||
</button>
|
||||
<button type="button" data-i18n="show" data-i18n-without="true" title="Show" onclick="wmarkdown.show_menu(this, event);" data-visible="false">
|
||||
<span data-icon="show"></span>
|
||||
<span data-i18n="show">Show</span>
|
||||
</button>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
<footer>
|
||||
<a href="https://www.gnu.org/licenses/gpl-3.0.txt" target="_blank" title="GPLv3" class="license">
|
||||
<span data-i18n="license_text">© 2021-2022 CopyLeft.</span>
|
||||
<img src="https://www.gnu.org/graphics/gplv3-127x51.png" alt="GPLv3" />
|
||||
</a>
|
||||
<div data-preload="wmarkdown-preloader"></div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
1
JSON/html.files.json
Executable file
1
JSON/html.files.json
Executable file
@ -0,0 +1 @@
|
||||
{"files":["\/mnt\/d\/git\/Kanvas\/Public\/dev\/ECMAScript\/index.html","\/mnt\/d\/git\/Kanvas\/Public\/dev\/PHP\/index.html","\/mnt\/d\/git\/Kanvas\/Public\/dev\/Public\/Kanvas.ecma.js.html","\/mnt\/d\/git\/Kanvas\/Public\/dev\/Public\/wmd.php.html","\/mnt\/d\/git\/Kanvas\/Public\/dev\/Public\/wmd_scripts.php.html","\/mnt\/d\/git\/Kanvas\/Public\/dev\/index.html","\/mnt\/d\/git\/Kanvas\/Public\/es\/doc\/kanvas.idea.html","\/mnt\/d\/git\/Kanvas\/Public\/es\/doc\/kanvas.quality.html","\/mnt\/d\/git\/Kanvas\/Public\/es\/doc\/kanvas.settings.html","\/mnt\/d\/git\/Kanvas\/Public\/es\/doc\/kanvas.starting.html","\/mnt\/d\/git\/Kanvas\/Public\/es\/doc\/kanvas.targets.html","\/mnt\/d\/git\/Kanvas\/Public\/es\/index.html","\/mnt\/d\/git\/Kanvas\/Public\/index.html"],"directories":["\/JSON","\/dev","\/dev\/ECMAScript","\/dev\/PHP","\/dev\/Public","\/es","\/es\/doc"]}
|
||||
1
Public/.htaccess
Executable file
1
Public/.htaccess
Executable file
@ -0,0 +1 @@
|
||||
Header set Access-Control-Allow-Origin "*"
|
||||
747
Public/ecma/version/20230707/Kanvas.ecma.js
Normal file
747
Public/ecma/version/20230707/Kanvas.ecma.js
Normal file
@ -0,0 +1,747 @@
|
||||
Kanvas = function(settings){
|
||||
|
||||
const self = this,
|
||||
default_settings = {
|
||||
nulls : false,
|
||||
default_value : null,
|
||||
position : ".kanvas",
|
||||
preload_timeout : 2000,
|
||||
frames_per_second : 60,
|
||||
quality : 1,
|
||||
quality_x : 1,
|
||||
quality_y : 1,
|
||||
cells : 40,
|
||||
swap_and_drop_timer : 5000,
|
||||
font_size : 1,
|
||||
font_family : "Arial",
|
||||
settings_overwrite : false,
|
||||
autostart : true,
|
||||
autobuild : true,
|
||||
font_minimum_size : 12,
|
||||
events_cache_timer : 100
|
||||
},
|
||||
custom = {},
|
||||
cache = {},
|
||||
frames_times = [],
|
||||
id_length = 11,
|
||||
id_alphabet = "123456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz",
|
||||
ids = [],
|
||||
threads = [],
|
||||
number_of_cells = {x : 0, y : 0},
|
||||
events_cache = [];
|
||||
let thread = null,
|
||||
frames_per_second = null,
|
||||
canvas, context,
|
||||
last_frame_time = 0, frames_times_summatory = 0,
|
||||
swap_and_drop_timer,
|
||||
cache_box,
|
||||
default_font_size, default_font_family,
|
||||
settings_overwrite,
|
||||
built = false,
|
||||
started = false,
|
||||
font_minimum_size,
|
||||
events_cache_timer;
|
||||
|
||||
this.map = [];
|
||||
let cells = this.cells;
|
||||
let cell_size = this.cell_size;
|
||||
let quality = this.quality;
|
||||
let quality_x = this.quality_x;
|
||||
let quality_y = this.quality_y;
|
||||
this.cells_x = 0;
|
||||
this.cells_y = 0;
|
||||
this.delta_time = 0;
|
||||
|
||||
let item_self = this.item_self;
|
||||
let hash_self = this.hash_self;
|
||||
let object_name = this.object_name;
|
||||
|
||||
this.Event = function(){
|
||||
|
||||
const self = this,
|
||||
events = [],
|
||||
properties = [];
|
||||
|
||||
const construct = () => {
|
||||
|
||||
events_cache.push(autoclean);
|
||||
|
||||
};
|
||||
|
||||
this.execute = (callback, ...arguments) => events.forEach((event, i) => (
|
||||
event &&
|
||||
(typeof callback == "function" ? callback(properties[i]) : true) &&
|
||||
event(...arguments)
|
||||
));
|
||||
|
||||
this.add = (callback, own_properties) => {
|
||||
|
||||
let i = 0;
|
||||
const l = events.length;
|
||||
|
||||
for(; i < l; i ++)
|
||||
if(!events[i])
|
||||
break;
|
||||
|
||||
events[i] = callback;
|
||||
properties[i] = own_properties;
|
||||
|
||||
return i;
|
||||
};
|
||||
|
||||
this.remove = i => events[i] = null;
|
||||
|
||||
const autoclean = () => {
|
||||
|
||||
const date = Date.now();
|
||||
|
||||
properties.forEach((own_properties, i) => {
|
||||
if(own_properties && own_properties.last_used && date - own_properties.last_used > events_cache_timer){
|
||||
events[i] = null;
|
||||
properties[i] = null;
|
||||
};
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
this.update = (i, date) => events[i] && (properties[i].last_used = date);
|
||||
|
||||
construct();
|
||||
|
||||
};
|
||||
|
||||
this.on_screen_change = new this.Event();
|
||||
this.on_ready = new this.Event();
|
||||
this.on_click = new this.Event();
|
||||
this.on_click_down = new this.Event();
|
||||
this.on_click_up = new this.Event();
|
||||
this.on_key_down = new this.Event();
|
||||
this.on_key_up = new this.Event();
|
||||
|
||||
const construct = () => {
|
||||
|
||||
settings = (
|
||||
settings instanceof Array ? settings :
|
||||
typeof settings == "object" ? [settings] :
|
||||
[]).filter(inputs => typeof inputs == "object" && !(inputs instanceof Array));
|
||||
|
||||
self.settings("autostart") && self.start();
|
||||
|
||||
};
|
||||
|
||||
this.start = callback => {
|
||||
|
||||
const end = status => typeof callback == "function" && callback(status);
|
||||
|
||||
if(started){
|
||||
end(false);
|
||||
return false;
|
||||
};
|
||||
started = true;
|
||||
|
||||
settings_overwrite = self.settings(["settings_overwrite", "overwrite"]);
|
||||
frames_per_second = self.settings(["frames_per_second", "fps"]);
|
||||
events_cache_timer = self.settings("events_cache_timer");
|
||||
object_name = self.object_name = self.settings("object_name");
|
||||
|
||||
thread = setInterval(execute, 1000 / frames_per_second);
|
||||
|
||||
if(self.settings("autobuild"))
|
||||
self.build(callback);
|
||||
else
|
||||
end(true);
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
this.build = callback => {
|
||||
|
||||
const position = self.settings("position"),
|
||||
end = status => typeof callback == "function" && callback(status);
|
||||
|
||||
if(built){
|
||||
end(false);
|
||||
return false;
|
||||
};
|
||||
built = true;
|
||||
|
||||
if(position){
|
||||
|
||||
if(position.tagName || position.nodeName){
|
||||
end_build(position);
|
||||
end(true);
|
||||
return;
|
||||
};
|
||||
|
||||
if(typeof position != "string"){
|
||||
console.error("position_not_string");
|
||||
end(false);
|
||||
return;
|
||||
};
|
||||
|
||||
if(!position.trim()){
|
||||
console.error("position_selector_empty");
|
||||
end(false);
|
||||
return;
|
||||
};
|
||||
|
||||
let html_object;
|
||||
|
||||
try{
|
||||
if(html_object = document.querySelector(position)){
|
||||
end_build(html_object);
|
||||
end(true);
|
||||
return;
|
||||
};
|
||||
}catch(exception){
|
||||
console.error(exception);
|
||||
console.error("position_bad_selector");
|
||||
end(false);
|
||||
return;
|
||||
};
|
||||
|
||||
const date = Date.now(),
|
||||
timeout = self.settings("preload_timeout");
|
||||
let interval = setInterval(() => {
|
||||
if(html_object = document.querySelector(position)){
|
||||
clearInterval(interval);
|
||||
end_build(html_object);
|
||||
end(true);
|
||||
}else if(Date.now() - date > timeout){
|
||||
clearInterval(interval);
|
||||
console.error("position_timeout");
|
||||
end(false);
|
||||
};
|
||||
}, frames_per_second);
|
||||
|
||||
}else{
|
||||
console.error("no_position");
|
||||
end(false);
|
||||
};
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
const end_build = position => {
|
||||
|
||||
quality = self.quality = self.settings("quality");
|
||||
quality_x = self.quality_x = self.settings("quality_x");
|
||||
quality_y = self.quality_y = self.settings("quality_y");
|
||||
cells = self.cells = self.settings("cells");
|
||||
default_font_size = self.settings("font_size");
|
||||
default_font_family = self.settings("font_family");
|
||||
|
||||
cache.quality = 0;
|
||||
cache.quality_x = 0;
|
||||
cache.quality_y = 0;
|
||||
|
||||
cache.screen = {x : 0, y : 0};
|
||||
cache.origin = {x : 0, y : 0};
|
||||
|
||||
item_self = self.item_self = (position || document.querySelector("body")).appendChild(document.createElement("div"));
|
||||
cache_box = item_self.appendChild(document.createElement("div"));
|
||||
canvas = item_self.appendChild(document.createElement("canvas"));
|
||||
hash_self = self.hash_self = self.settings(["id", "hash"]) || self.create_id();
|
||||
|
||||
item_self.setAttribute("id", hash_self);
|
||||
item_self.setAttribute("class", ["kanvas", hash_self].concat((self.settings("class") || "").split(/\s+/)).filter((key, i, array) => array.indexOf(key) == i).join(" "));
|
||||
item_self.setAttribute("data-hash", hash_self);
|
||||
item_self.setAttribute("data-cells", cells);
|
||||
item_self.setAttribute("data-minimum-font-size", font_minimum_size = self.settings("font_minimum_size"));
|
||||
|
||||
cache_box.setAttribute("class", "kanvas-cache-box");
|
||||
cache_box.setAttribute("style", `
|
||||
position : absolute;
|
||||
top : 0%;
|
||||
left : 0%;
|
||||
width : 100%;
|
||||
height : 100%;
|
||||
visibility : hidden;
|
||||
z-index : 10;
|
||||
opacity : 0;
|
||||
`.replace(/[\r\n\s]+/g, ""));
|
||||
|
||||
canvas.setAttribute("class", "kanvas-ui");
|
||||
canvas.setAttribute("style", `
|
||||
position : absolute;
|
||||
top : 0%;
|
||||
left : 0%;
|
||||
width : 100%;
|
||||
height : 100%;
|
||||
z-index : 20;
|
||||
`.replace(/[\r\n\s]+/g, ""));
|
||||
canvas.onclick = event => on_click(canvas, event, "click");
|
||||
canvas.onmousedown = event => on_click(canvas, event, "down");
|
||||
canvas.onmouseup = event => on_click(canvas, event, "up");
|
||||
canvas.onkeydown = event => on_key(canvas, event, "down");
|
||||
canvas.onkeyup = event => on_key(canvas, event, "up");
|
||||
|
||||
context = canvas.getContext("2d");
|
||||
|
||||
context.id = self.create_id();
|
||||
|
||||
swap_and_drop_timer = self.settings("swap_and_drop_timer");
|
||||
|
||||
self.on_ready.execute();
|
||||
|
||||
};
|
||||
|
||||
this.nulls = nulls => typeof nulls == "boolean" ? nulls : self.settings("nulls", null, false, false);
|
||||
|
||||
this.default_value = (_default, nulls) => _default !== undefined && (self.nulls(nulls) || _default !== null) ? _default : self.settings("default_value", null, null, true);
|
||||
|
||||
this.settings = (names, inputs, _default, nulls) => {
|
||||
|
||||
const l = (names = (
|
||||
names instanceof Array ? names :
|
||||
typeof names == "string" ? [names] :
|
||||
[]
|
||||
).filter((name, i, array) => name && typeof name == "string" && array.indexOf(name) == i)).length;
|
||||
|
||||
if(l){
|
||||
|
||||
const m = (inputs = (
|
||||
inputs instanceof Array ? inputs :
|
||||
typeof inputs == "object" ? [inputs] :
|
||||
[]).concat(settings, custom, [default_settings])).length;
|
||||
|
||||
nulls = self.nulls(nulls);
|
||||
|
||||
for(let j = 0; j < m; j ++)
|
||||
if(inputs[j] && typeof inputs[j] == "object" && !(inputs[j] instanceof Array))
|
||||
for(let i = 0; i < l; i ++)
|
||||
if(inputs[j][names[i]] !== undefined && (nulls || inputs[j][names[i]] !== null))
|
||||
return inputs[j][names[i]];
|
||||
};
|
||||
return self.default_value(_default, nulls);
|
||||
};
|
||||
|
||||
this.settings_add = (inputs, overwrite) => {
|
||||
if(!inputs)
|
||||
return;
|
||||
|
||||
if(typeof inputs == "string"){
|
||||
try{
|
||||
inputs = JSON.parse(inputs);
|
||||
}catch(exception){};
|
||||
};
|
||||
|
||||
if(typeof inputs == "object"){
|
||||
if(inputs instanceof Array)
|
||||
inputs.forEach(inputs, overwrite);
|
||||
else{
|
||||
typeof overwrite != "boolean" && (overwrite = settings_overwrite);
|
||||
for(const key in inputs)
|
||||
if(overwrite || custom[key] === undefined)
|
||||
custom[key] = inputs[key];
|
||||
};
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
this.create_id = () => {
|
||||
|
||||
let id;
|
||||
const l = id_alphabet.length;
|
||||
|
||||
do{
|
||||
id = "";
|
||||
while((id += id_alphabet[l * Math.random() >> 0]).length < id_length);
|
||||
}while(
|
||||
ids.includes(id) ||
|
||||
!/^[a-z]/i.test(id) ||
|
||||
document.querySelector("." + id + ",#" + id + ",[name=" + id + "]")
|
||||
);
|
||||
ids.push(id);
|
||||
|
||||
return id;
|
||||
};
|
||||
|
||||
const execute = () => {
|
||||
|
||||
const date = Date.now();
|
||||
let screen_changed = false;
|
||||
|
||||
if(item_self && (cache.screen.x != item_self.offsetWidth || cache.screen.y != item_self.offsetHeight)){
|
||||
screen_changed = true;
|
||||
|
||||
cache.screen.x = item_self.offsetWidth;
|
||||
cache.screen.y = item_self.offsetHeight;
|
||||
|
||||
const font_size = cache.screen[cache.screen.x < cache.screen.y ? "x" : "y"] / cells;
|
||||
|
||||
item_self.style.fontSize = (font_size < font_minimum_size ? font_minimum_size : font_size) + "px";
|
||||
|
||||
};
|
||||
|
||||
if(canvas){
|
||||
|
||||
if(last_frame_time){
|
||||
|
||||
const frame_time = date - last_frame_time;
|
||||
|
||||
frames_times.push(frame_time);
|
||||
frames_times_summatory += frame_time;
|
||||
|
||||
self.delta_time = frame_time / 1000;
|
||||
|
||||
while(frames_times.length > frames_per_second)
|
||||
frames_times_summatory -= frames_times.shift();
|
||||
|
||||
};
|
||||
|
||||
last_frame_time = date;
|
||||
|
||||
if(screen_changed || cache.quality != quality){
|
||||
|
||||
const width = cache.screen.x * quality,
|
||||
height = cache.screen.y * quality;
|
||||
|
||||
cache.quality = quality;
|
||||
canvas.setAttribute("width", width);
|
||||
canvas.setAttribute("height", height);
|
||||
cache.origin.x = width / 2;
|
||||
cache.origin.y = height / 2;
|
||||
|
||||
cell_size = self.cell_size = (width > height ? height : width) / cells;
|
||||
|
||||
number_of_cells.x = width / cell_size;
|
||||
number_of_cells.y = height / cell_size;
|
||||
|
||||
this.cells_x = number_of_cells.x / 2;
|
||||
this.cells_y = number_of_cells.y / 2;
|
||||
|
||||
for(const key in cache)
|
||||
if(cache[key] && cache[key].data)
|
||||
cache[key].data = null;
|
||||
|
||||
self.on_screen_change.execute();
|
||||
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
threads.forEach(thread => thread && thread());
|
||||
|
||||
if(canvas){
|
||||
|
||||
context.beginPath();
|
||||
context.clearRect(0, 0, cache.screen.x * quality, cache.screen.y * quality);
|
||||
context.translate(cache.origin.x, cache.origin.y);
|
||||
|
||||
draw(context, self.map, 0, 0);
|
||||
|
||||
context.translate(-cache.origin.x, -cache.origin.y);
|
||||
|
||||
for(const key in cache)
|
||||
if(cache[key] && cache[key].last_used && date - cache[key].last_used > swap_and_drop_timer)
|
||||
delete cache[key];
|
||||
|
||||
};
|
||||
|
||||
events_cache.forEach(autoclean => autoclean());
|
||||
|
||||
};
|
||||
|
||||
this.set_quality = new_quality => quality = self.quality = new_quality;
|
||||
this.set_quality_x = new_quality => quality_x = self.quality_x = new_quality;
|
||||
this.set_quality_y = new_quality => quality_y = self.quality_y = new_quality;
|
||||
|
||||
const _x = x => x * cell_size;
|
||||
const _y = y => y * cell_size;
|
||||
const size = size => size * cell_size;
|
||||
|
||||
const set_cache = (context, status) => {
|
||||
|
||||
!status && cache[context.id] && cache[context.id].ok && (cache[context.id].ok = false);
|
||||
|
||||
return status;
|
||||
};
|
||||
|
||||
const set_border = (context, inputs) => {
|
||||
|
||||
const has_border = !!(inputs.border_color || !isNaN(inputs.border_width));
|
||||
|
||||
inputs.border_color && (context.strokeStyle = inputs.border_color);
|
||||
!isNaN(inputs.border_width) && (context.lineWidth = size(inputs.border_width));
|
||||
|
||||
return has_border;
|
||||
};
|
||||
|
||||
const set_background = (context, inputs) => {
|
||||
|
||||
const has_background = !!(inputs.background || (!inputs.border_color && isNaN(inputs.border_width)));
|
||||
|
||||
if(inputs.background){
|
||||
if(inputs.background instanceof Array){
|
||||
|
||||
const v = inputs.background,
|
||||
is_linear = v.length == 5,
|
||||
gradient = (
|
||||
is_linear ? context.createLinearGradient(_x(v[0]), _y(v[1]), _x(v[2]), _y(v[3])) :
|
||||
context.createRadialGradient(_x(v[0]), _y(v[1]), _x(v[2]), _y(v[3]), size(v[4]), size(v[5]))
|
||||
);
|
||||
|
||||
inputs.background[is_linear ? 4 : 6].forEach(color => gradient.addColorStop(color[0], color[1]));
|
||||
|
||||
context.fillStyle = gradient;
|
||||
|
||||
}else
|
||||
context.fillStyle = inputs.background;
|
||||
};
|
||||
|
||||
return has_background;
|
||||
};
|
||||
|
||||
const set_shadow = (context, inputs, shape_callback) => {
|
||||
|
||||
const shadows = inputs.shadow || inputs.shadows;
|
||||
|
||||
(shadows && shadows.length ? shadows[0] instanceof Array ? shadows : [shadows] : []).forEach(shadow => {
|
||||
[context.shadowOffsetX, context.shadowOffsetY, context.shadowBlur, context.shadowColor] = shadow;
|
||||
context.shadowOffsetX = size(shadow[0]);
|
||||
context.shadowOffsetY = size(shadow[1]);
|
||||
context.shadowBlur = size(shadow[2]);
|
||||
context.shadowColor = size(shadow[3]);
|
||||
shape_callback();
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
const shapes = {
|
||||
rectangle : (context, inputs) => {
|
||||
|
||||
const x = _x(inputs.x),
|
||||
y = _y(inputs.y),
|
||||
width = size(inputs.width),
|
||||
height = size(inputs.height),
|
||||
has_border = set_border(context, inputs),
|
||||
has_background = set_background(context, inputs);
|
||||
|
||||
set_shadow(context, inputs, () => context.rect(x, y, width, height));
|
||||
has_background && context.fillRect(x, y, width, height);
|
||||
has_border && context.strokeRect(x, y, width, height);
|
||||
|
||||
return set_cache(context, true);
|
||||
},
|
||||
image : (context, inputs) => {
|
||||
|
||||
const url = inputs.url;
|
||||
|
||||
if(url){
|
||||
|
||||
const cached = cache[url];
|
||||
|
||||
if(!cached){
|
||||
(cache[url] = {
|
||||
image : new Image(),
|
||||
loaded : false,
|
||||
last_used : Date.now()
|
||||
}).image.src = url;
|
||||
cache[url].image.crossOrigin = "anonymous";
|
||||
cache[url].image.onload = () => cache[url].loaded = true;
|
||||
return set_cache(context, false);
|
||||
};
|
||||
|
||||
if(cached.loaded){
|
||||
|
||||
let width = inputs.width,
|
||||
height = inputs.height;
|
||||
const cut_x = inputs.cut_x || 0,
|
||||
cut_y = inputs.cut_y || 0,
|
||||
cut_width = inputs.cut_width || 0,
|
||||
cut_height = inputs.cut_height || 0,
|
||||
position_x = inputs.x || 0,
|
||||
position_y = inputs.y || 0,
|
||||
x = _x(position_x),
|
||||
y = _y(position_y),
|
||||
end_width = size(width),
|
||||
end_height = size(height);
|
||||
|
||||
!width && (width = cache.quality * (cut_width || cache[url].image.width - cut_x) / cell_size);
|
||||
!height && (height = cache.quality * (cut_height || cache[url].image.height - cut_y) / cell_size);
|
||||
|
||||
set_shadow(context, inputs, () => context.rect(x, y, end_width, end_height));
|
||||
set_border(context, inputs);
|
||||
context.drawImage(
|
||||
cache[url].image,
|
||||
cut_x, cut_y, cut_width || cache[url].image.width - cut_x, cut_height || cache[url].image.height - cut_y,
|
||||
x, y, end_width, end_height
|
||||
);
|
||||
cache[url].last_used = Date.now();
|
||||
|
||||
return set_cache(context, true);
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
return set_cache(context, false);
|
||||
},
|
||||
cache : (context, inputs) => {
|
||||
|
||||
const width = inputs.width ? inputs.width * cell_size : canvas.getAttribute("width"),
|
||||
height = inputs.height ? inputs.height * cell_size : canvas.getAttribute("height");
|
||||
let status = false;
|
||||
|
||||
if(!cache[inputs.name]){
|
||||
|
||||
const subcanvas = cache_box.appendChild(document.createElement("canvas"));
|
||||
|
||||
cache[inputs.name] = {
|
||||
canvas : subcanvas,
|
||||
data : null
|
||||
};
|
||||
cache[inputs.name].context = subcanvas.getContext("2d");
|
||||
|
||||
cache[inputs.name].context.id = inputs.name;
|
||||
|
||||
subcanvas.setAttribute("data-id", cache[inputs.name].context.id);
|
||||
|
||||
cache[inputs.name].context.translate(inputs.x || 0, inputs.y || 0);
|
||||
|
||||
};
|
||||
|
||||
if(cache[inputs.name].data){
|
||||
if(cache[inputs.name].image_loaded){
|
||||
context.drawImage(cache[inputs.name].image, _x(inputs.x || 0), _y(inputs.y || 0), cache[inputs.name].image.width, cache[inputs.name].image.height);
|
||||
status = true;
|
||||
}else if(!cache[inputs.name].image){
|
||||
|
||||
cache[inputs.name].image = new Image();
|
||||
|
||||
cache[inputs.name].image.src = cache[inputs.name].data;
|
||||
cache[inputs.name].image.onload = () => {
|
||||
// cache[inputs.name].canvas.remove();
|
||||
cache[inputs.name].image_loaded = true;
|
||||
};
|
||||
// cache[inputs.name].image.onerror = () => cache[inputs.name].canvas.remove();
|
||||
|
||||
};
|
||||
}else{
|
||||
|
||||
cache[inputs.name].canvas.setAttribute("width", width);
|
||||
cache[inputs.name].canvas.setAttribute("height", height);
|
||||
|
||||
cache[inputs.name].context.beginPath();
|
||||
cache[inputs.name].context.clearRect(0, 0, width, height);
|
||||
cache[inputs.name].context.translate(width / 2, height / 2);
|
||||
|
||||
cache[inputs.name].image = null;
|
||||
cache[inputs.name].image_loaded = false;
|
||||
cache[inputs.name].ok = true;
|
||||
|
||||
draw(cache[inputs.name].context, inputs.childs, 0, 0);
|
||||
|
||||
cache[inputs.name].context.closePath();
|
||||
|
||||
cache[inputs.name].ok &&
|
||||
(cache[inputs.name].data = cache[inputs.name].canvas.toDataURL("image/png", 1.0));
|
||||
|
||||
};
|
||||
|
||||
cache[inputs.name].last_used = Date.now();
|
||||
|
||||
return set_cache(context, status);
|
||||
},
|
||||
text : (context, inputs) => {
|
||||
|
||||
const x = _x(inputs.x),
|
||||
y = _y(inputs.y),
|
||||
has_border = set_border(context, inputs),
|
||||
has_background = set_background(context, inputs);
|
||||
|
||||
inputs.align && (context.textAlign = inputs.align);
|
||||
inputs.baseline && (context.textBaseline = inputs.baseline);
|
||||
!isNaN(inputs.border_width) && (context.lineWidth = size(inputs.border_width));
|
||||
context.font = (inputs.style ? inputs.style + " " : "") + size(inputs.size || default_font_size) + "px " + (inputs.family || default_font_family);
|
||||
|
||||
set_shadow(context, inputs, () => context.fillText(inputs.text, x, y));
|
||||
has_background && context.fillText(inputs.text, x, y);
|
||||
has_border && context.strokeText(inputs.text, x, y);
|
||||
|
||||
return true;
|
||||
}
|
||||
};
|
||||
|
||||
this.string_variables = (string, variables) => string.replace(/\{([^\{\}]+)\}/g, (...arguments) => variables[arguments[1]] !== undefined ? variables[arguments[1]] : arguments[0]);
|
||||
|
||||
const draw = (context, level, x, y) => level.forEach(values => {
|
||||
if(values && (shapes[values.type] || ["block"].includes(values.type))){
|
||||
|
||||
const sub_x = _x(x + (values.margin_x || 0)),
|
||||
sub_y = _y(y + (values.margin_y || 0)),
|
||||
date = Date.now();
|
||||
|
||||
context.save();
|
||||
context.translate(sub_x, sub_y);
|
||||
|
||||
const transform = context.getTransform();
|
||||
|
||||
values.rotate && context.rotate(2 * Math.PI * values.rotate / 360);
|
||||
!isNaN(values.alpha) && (context.globalAlpha = values.alpha);
|
||||
|
||||
if(values.on_click){
|
||||
values.context_x = transform.e / quality;
|
||||
values.context_y = transform.f / quality;
|
||||
if(!values.last_used || date - values.last_used > events_cache_timer)
|
||||
values.i = self.on_click.add(eval(self.string_variables(values.on_click, {object_name : object_name})), values);
|
||||
else
|
||||
self.on_click.update(values.i, date);
|
||||
values.last_used = date;
|
||||
};
|
||||
|
||||
values.type != "block" && shapes[values.type](context, values);
|
||||
|
||||
values.type != "cache" && values.childs && draw(context, values.childs, values.x, values.y);
|
||||
|
||||
context.translate(-sub_x, -sub_y);
|
||||
context.restore();
|
||||
|
||||
};
|
||||
});
|
||||
|
||||
this.get_real_fps = this.get_real_frames_per_second = () => frames_times_summatory ? 1000 / (frames_times_summatory / frames_times.length) : 0;
|
||||
|
||||
this.threads_add = callback => {
|
||||
|
||||
let i = 0;
|
||||
const l = threads.length;
|
||||
|
||||
for(; i < l; i ++)
|
||||
if(!threads[i])
|
||||
break;
|
||||
|
||||
threads[i] = callback;
|
||||
|
||||
return i;
|
||||
};
|
||||
|
||||
this.threads_remove = i => threads[i] = null;
|
||||
|
||||
this.get_cells_x = () => number_of_cells.x;
|
||||
this.get_cells_y = () => number_of_cells.y;
|
||||
|
||||
this.extends = object => {
|
||||
for(const key in self)
|
||||
if(object[key] === undefined)
|
||||
object[key] = self[key];
|
||||
};
|
||||
|
||||
const on_click = (canvas, event, action) => {
|
||||
|
||||
switch(action){
|
||||
case "click":
|
||||
self.on_click.execute(properties => (
|
||||
event.clientX >= properties.context_x + (properties.x * cell_size) &&
|
||||
event.clientY >= properties.context_y + (properties.y * cell_size) &&
|
||||
event.clientX <= properties.context_x + ((properties.x + properties.width) * cell_size) &&
|
||||
event.clientY <= properties.context_y + ((properties.y + properties.height) * cell_size)
|
||||
), canvas, event);
|
||||
break;
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
construct();
|
||||
|
||||
};
|
||||
936
Public/ecma/version/221106/Kanvas.ecma.js
Executable file
936
Public/ecma/version/221106/Kanvas.ecma.js
Executable file
@ -0,0 +1,936 @@
|
||||
Kanvas = function(input){
|
||||
|
||||
const self = this,
|
||||
default_settings = {
|
||||
quality : 1,
|
||||
quality_x : 1,
|
||||
quality_y : 1,
|
||||
cells : 100,
|
||||
origin : 5, // Posición origen. Mirar teclado numérico para ver los diferentes valores para cada posición.
|
||||
frames_per_second : 60,
|
||||
ratio : null, // Expone la proporción de tamaño del Canvas (16/9 para pantallas WideScreen por ejemplo). Si es equivalente a falso cubrirá todo el área de la capa donde se encuentre.
|
||||
overwrite : false,
|
||||
position : "body",
|
||||
autostart : true,
|
||||
object_name : "kanvas",
|
||||
class : "kanvas",
|
||||
application : "Kanvas",
|
||||
x : 0,
|
||||
y : 0,
|
||||
width : 0,
|
||||
height : 0,
|
||||
color : "#000",
|
||||
blur : 0,
|
||||
italic : false,
|
||||
bold : false,
|
||||
size : 1,
|
||||
font : "Arial",
|
||||
align : "left",
|
||||
alpha : 1,
|
||||
degrees : 0,
|
||||
baseline : "Alphabetic",
|
||||
shadow_x : 0,
|
||||
shadow_y : 0,
|
||||
shadow_color : "#000",
|
||||
shadow_blur : 0,
|
||||
border_color : "#000",
|
||||
border_width : 0,
|
||||
text_italic : false,
|
||||
text_bold : false,
|
||||
text_size : 1,
|
||||
font_family : "Arial",
|
||||
text_color : "#000",
|
||||
text_align : "left",
|
||||
text_alpha : 1,
|
||||
rotate_x : 0,
|
||||
rotate_y : 0,
|
||||
rotate_degrees : 0,
|
||||
image_x : 0,
|
||||
image_y : 0,
|
||||
image_alpha : 1,
|
||||
rectangle_color : "#000",
|
||||
rectangle_alpha : 1,
|
||||
rectangle_x : 0,
|
||||
rectangle_y : 0,
|
||||
text_baseline : "Alphabetic",
|
||||
default_value : null,
|
||||
hash_alphabet : "123456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz",
|
||||
hash_length : 7,
|
||||
frames_per_second_samples : 20,
|
||||
settings_overwrite : false,
|
||||
ajax_timeout : 2000
|
||||
},
|
||||
custom = {},
|
||||
// cache = [],
|
||||
_screen = {x : 0, y : 0},
|
||||
position = {x : 0, y : 0},
|
||||
events = {},
|
||||
threads = [],
|
||||
hashes = [],
|
||||
attributes = {
|
||||
natives : ["id", "class", "onmousemove", "tabindex", "onkeydown", "onkeyup"]
|
||||
},
|
||||
cache = {},
|
||||
frames_per_second_samples = [],
|
||||
delta_time = 0;
|
||||
let q, qx, qy, // Calidad porcentual.
|
||||
c, // Número de celdas en el lado más corto de la pantalla o área de trabajo rectangular.
|
||||
fx, fy, // Posición contra el foco.
|
||||
dx, dy, // Distancia desde los laterales hasta el cuadrado de trabajo.
|
||||
s, // Tamaño de la celda. Solo se mide un lado pues será cuadrada.
|
||||
mx, my, // Posición origen del lienzo.
|
||||
thread = null,
|
||||
timeout = 0,
|
||||
last_time = 0,
|
||||
started = false,
|
||||
cache_container, context, canvas,
|
||||
// cache_l = 0,
|
||||
thread_object = null,
|
||||
frames_per_second_samples_number,
|
||||
last_frame_per_second_sample = Date.now(),
|
||||
real_frames_per_seconds = 0,
|
||||
ajax_timeout;
|
||||
|
||||
let item_self = this.item_self;
|
||||
let hash_self = this.hash_self;
|
||||
let object_name = this.object_name;
|
||||
let mouse = this.mouse = {x : 0, y : 0};
|
||||
|
||||
this.LOADING = 1 << 0;
|
||||
this.LOADED = 1 << 1;
|
||||
this.ERROR = 1 << 2;
|
||||
|
||||
this.map = [];
|
||||
|
||||
const null_or_undefined = this.null_or_undefined = value => value === undefined || value === null;
|
||||
|
||||
this.get = (url, callback) => {
|
||||
|
||||
let ended = false;
|
||||
const ajax = new XMLHttpRequest(),
|
||||
end = status => {
|
||||
if(ended)
|
||||
return;
|
||||
ended = true;
|
||||
typeof callback == "function" && callback(ajax.response, ajax.status, ajax.readyState, status, status == "OK");
|
||||
},
|
||||
date = Date.now();
|
||||
|
||||
ajax.open("get", url, true);
|
||||
ajax.timeout = ajax_timeout;
|
||||
ajax.onreadystatechange = () => {
|
||||
if(ended)
|
||||
return;
|
||||
if(ajax.readyState == 4)
|
||||
end((ajax.status >= 200 && ajax.status < 300) || [301, 302, 304].includes(ajax.status) ? "OK" : "HTTP_ERROR");
|
||||
else if(Date.now() - date > ajax_timeout)
|
||||
end("FORCED_TIMEOUT");
|
||||
};
|
||||
ajax.send(null);
|
||||
|
||||
ajax.ontimeout = () => end("TIMEOUT");
|
||||
ajax.onabort = () => end("ABORTED");
|
||||
ajax.onerror = () => end("ERROR");
|
||||
|
||||
return ajax;
|
||||
};
|
||||
|
||||
const allow_nulls = this.allow_nulls = nulls => typeof nulls == "boolean" ? nulls : settings(["nulls", "allow_nulls"], null, false, false);
|
||||
|
||||
const default_value = this.default_value = (_default, nulls) => _default !== undefined && (nulls || _default !== null) ? _default : settings(["default_value", "default", "by_default"], null, null, true);
|
||||
|
||||
this.settings_add = (inputs, overwrite, callback) => {
|
||||
|
||||
if(inputs instanceof Array){
|
||||
|
||||
let loaded = 0;
|
||||
const end = () => ++ loaded == inputs.length && typeof callback == "function" && callback();
|
||||
|
||||
inputs.forEach(input => self.settings_add(input, overwrite, end));
|
||||
|
||||
return;
|
||||
};
|
||||
|
||||
if(typeof inputs == "object"){
|
||||
typeof overwrite != "boolean" && (overwrite = settings(["settings_overwrite", "overwrite"]));
|
||||
for(const key in inputs)
|
||||
(overwrite || custom[key] === undefined) && (custom[key] = inputs[key]);
|
||||
inputs.autostart !== undefined && (input.autostart = inputs.autostart);
|
||||
typeof callback == "function" && callback();
|
||||
return;
|
||||
};
|
||||
|
||||
if(typeof inputs == "string"){
|
||||
|
||||
let json;
|
||||
|
||||
try{
|
||||
if(json = JSON.parse(inputs)){
|
||||
self.settings_add(json, overwrite, callback);
|
||||
return;
|
||||
};
|
||||
}catch(exception){};
|
||||
|
||||
self.get(inputs, response => {
|
||||
try{
|
||||
if(json = JSON.parse(response)){
|
||||
self.settings_add(json, overwrite, callback);
|
||||
return;
|
||||
};
|
||||
}catch(exception){};
|
||||
typeof callback == "function" && callback();
|
||||
});
|
||||
|
||||
return;
|
||||
};
|
||||
|
||||
typeof callback == "function" && callback();
|
||||
|
||||
};
|
||||
|
||||
const settings = this.settings = (names, inputs, _default, nulls) => {
|
||||
if(!names)
|
||||
return default_value(_default, nulls);
|
||||
|
||||
nulls = allow_nulls(nulls);
|
||||
|
||||
const l = (names.push ? names : names = [names]).length,
|
||||
m = (inputs = (inputs ? inputs.push ? inputs : [inputs] : []).concat([input, custom, default_settings])).length;
|
||||
|
||||
for(let j = 0; j < m; j ++)
|
||||
if(typeof inputs[j] == "object")
|
||||
for(let i = 0; i < l; i ++)
|
||||
if(names[i] && inputs[j][names[i]] !== undefined && (nulls || inputs[j][names[i]] !== null))
|
||||
return inputs[j][names[i]];
|
||||
return default_value(_default, nulls);
|
||||
};
|
||||
|
||||
const threads_function = () => threads.forEach(thread => thread && thread());
|
||||
|
||||
const threads_start = this.threads_start = frames_per_second => thread_object === null && (thread_object = setInterval(threads_function, 1000 / (isNaN(frames_per_second) || frames_per_second < 1 ? settings(["frames_per_second", "fps"]) : frames_per_second)));
|
||||
|
||||
const threads_stop = this.threads_stop = () => {
|
||||
|
||||
if(thread_object === null)
|
||||
return;
|
||||
|
||||
clearInterval(thread_object);
|
||||
thread_object = null;
|
||||
|
||||
};
|
||||
|
||||
const threads_add = this.threads_add = callback => {
|
||||
if(typeof callback != "function")
|
||||
return null;
|
||||
|
||||
let i = 0;
|
||||
const l = threads.length;
|
||||
|
||||
for(; i < l; i ++)
|
||||
if(!threads[i])
|
||||
break;
|
||||
|
||||
threads[i] = callback;
|
||||
|
||||
return i;
|
||||
};
|
||||
|
||||
const threads_remove = this.threads_remove = i => !isNaN(i) && threads[i] && (threads[i] = null);
|
||||
|
||||
const is_html_object = this.is_html_object = variable => typeof variable == "object" && (variable.tagName || variable.nodeName);
|
||||
|
||||
const preload = this.preload = (selector, callback) => {
|
||||
if(typeof callback != "function")
|
||||
return;
|
||||
|
||||
if(!selector){
|
||||
callback(null, false, "NO_SELECTOR");
|
||||
return;
|
||||
};
|
||||
if(is_html_object(selector)){
|
||||
callback(selector, false, "OK");
|
||||
return;
|
||||
};
|
||||
if(!selector.substr){
|
||||
callback(null, false, "BAD_TYPE");
|
||||
return;
|
||||
};
|
||||
|
||||
let item;
|
||||
|
||||
try{
|
||||
if(item = document.querySelector(selector)){
|
||||
callback(item, false, "OK");
|
||||
return;
|
||||
};
|
||||
}catch(exception){
|
||||
callback(null, false, "BAD_SELECTOR");
|
||||
return;
|
||||
};
|
||||
|
||||
const timeout = settings(["preload_timeout", "timeout"]),
|
||||
date = Date.now();
|
||||
let preload = threads_add(() => {
|
||||
if(item = document.querySelector(selector)){
|
||||
threads_remove(preload);
|
||||
callback(item, true, "OK");
|
||||
}else if(Date.now() - date > timeout){
|
||||
threads_remove(preload);
|
||||
callback(null, true, "TIMEOUT");
|
||||
};
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
const hash = this.hash = () => {
|
||||
|
||||
let hash, alphabet = settings(["hash_alphabet", "alphabet"]);
|
||||
const length = settings(["hash_length", "length"]),
|
||||
l = (alphabet.push ? alphabet : alphabet = alphabet.split("")).length;
|
||||
|
||||
do{
|
||||
hash = "";
|
||||
while((hash += alphabet[Math.random() * l >> 0]).length < length);
|
||||
}while(
|
||||
hashes.includes(hash) ||
|
||||
/^\d/.test(hash) ||
|
||||
document.querySelector("." + hash + ",#" + hash + ",[name=" + hash + "]")
|
||||
);
|
||||
hashes.push(hash);
|
||||
|
||||
return hash;
|
||||
};
|
||||
|
||||
const set_attribute = this.set_attribute = (item, custom_attributes) => {
|
||||
if(!is_html_object(item) || typeof custom_attributes != "object")
|
||||
return;
|
||||
|
||||
for(const name in custom_attributes)
|
||||
item.setAttribute((attributes.natives.includes(name) ? "" : "data-") + name.replace(/[^a-z\d-]+/g, "-"), custom_attributes[name]);
|
||||
|
||||
};
|
||||
|
||||
const construct = () => {
|
||||
|
||||
const custom_attributes = {
|
||||
natives : settings("attributes_natives")
|
||||
};
|
||||
|
||||
for(const key in custom_attributes){
|
||||
!attributes[key] && (attributes[key] = []);
|
||||
(custom_attributes ? custom_attributes.push ? custom_attributes : [custom_attributes] : []).forEach(new_attribute => attributes[key].push(new_attribute));
|
||||
};
|
||||
|
||||
object_name = self.object_name = settings("object_name");
|
||||
|
||||
settings("autostart") && self.start();
|
||||
|
||||
};
|
||||
|
||||
const Events = this.Events = function(){
|
||||
|
||||
const events = [];
|
||||
|
||||
this.add = callback => {
|
||||
if(typeof callback != "function")
|
||||
return null;
|
||||
|
||||
let i = 0;
|
||||
const l = events.length;
|
||||
|
||||
while(i < l){
|
||||
if(events[i] === null)
|
||||
break;
|
||||
i ++;
|
||||
};
|
||||
|
||||
events[i] = callback;
|
||||
|
||||
return i;
|
||||
};
|
||||
|
||||
this.remove = i => !isNaN(i) && i >= 0 && events[i] && (events[i] = null);
|
||||
|
||||
this.execute = (...inputs) => events.forEach(event => event && event(...inputs));
|
||||
|
||||
};
|
||||
|
||||
const range_analyze = range => !range || (
|
||||
mouse.x >= range.x && mouse.x <= range.x + range.width &&
|
||||
mouse.y >= range.y && mouse.y <= range.y + range.height
|
||||
);
|
||||
|
||||
const on_resize_method = screen => {
|
||||
|
||||
if(_screen.x == item_self.offsetWidth && _screen.y == item_self.offsetHeight)
|
||||
return;
|
||||
|
||||
const width = canvas.width = (_screen.x = item_self.offsetWidth) * q * qx,
|
||||
height = canvas.height = (_screen.y = item_self.offsetHeight) * q * qy;
|
||||
|
||||
if(width < height){
|
||||
s = width / c;
|
||||
dx = 0;
|
||||
dy = -(c - (c * height / width)) / 2;
|
||||
mx = position.x;
|
||||
my = position.y + dy;
|
||||
}else{
|
||||
s = height / c;
|
||||
dx = -(c - (c * width / height)) / 2;
|
||||
dy = 0;
|
||||
mx = position.x + dx;
|
||||
my = position.y;
|
||||
};
|
||||
|
||||
//resize_methods.forEach((method) => {if(method)method();});
|
||||
execute_event("resize");
|
||||
|
||||
};
|
||||
|
||||
const position_set = () => {
|
||||
|
||||
const origin = settings("origin");
|
||||
|
||||
position.x = c * (.5 * ((origin - 1) % 3));
|
||||
position.y = c * (1 - (.5 * ((origin - 1) / 3 >> 0)));
|
||||
|
||||
};
|
||||
|
||||
const calculate_real_frames_per_seconds = () => {
|
||||
|
||||
const now = Date.now(),
|
||||
time = now - last_frame_per_second_sample;
|
||||
|
||||
frames_per_second_samples.push(time);
|
||||
last_frame_per_second_sample = now;
|
||||
|
||||
while(frames_per_second_samples.length > frames_per_second_samples_number)
|
||||
frames_per_second_samples.shift();
|
||||
|
||||
real_frames_per_seconds = 1000 / (frames_per_second_samples.reduce((a, b) => a + b) / frames_per_second_samples.length);
|
||||
delta_time = time / 1000;
|
||||
|
||||
};
|
||||
|
||||
this.start = callback => {
|
||||
|
||||
const end = status => typeof callback == "function" && callback(status);
|
||||
|
||||
if(started){
|
||||
end(false);
|
||||
return false;
|
||||
};
|
||||
started = true;
|
||||
|
||||
q = settings(["quality", "q"]);
|
||||
qx = settings(["quality_x", "qx"]);
|
||||
qy = settings(["quality_y", "qy"]);
|
||||
timeout = 1000 / settings("frames_per_second");
|
||||
c = settings("cells");
|
||||
position_set();
|
||||
threads_start();
|
||||
ajax_timeout = settings("ajax_timeout");
|
||||
|
||||
preload(settings("position"), (position, asynchronous, error) => {
|
||||
|
||||
if(!position){
|
||||
console.error("ERROR. Position HTML for install GUI CANVAS is bad. [" + error + "]");
|
||||
return;
|
||||
};
|
||||
|
||||
const _class = (hash_self = self.hash_self = hash()) + " " + settings("class");
|
||||
|
||||
!new RegExp("\\b" + default_settings.class + "\\b").test(_class) && (_class += " " + default_settings.class);
|
||||
|
||||
set_attribute(item_self = self.item_self = position.appendChild(document.createElement("div")), {
|
||||
id : hash_self,
|
||||
hash : hash_self,
|
||||
class : _class,
|
||||
application : default_settings.application,
|
||||
onmousemove : object_name + ".check_mouse(this, event);",
|
||||
tabindex : 0,
|
||||
onkeydown : object_name + ".key_down(this, event);",
|
||||
onkeyup : object_name + ".key_up(this, event);",
|
||||
cells : c,
|
||||
mouse_x : 0,
|
||||
mouse_y : 0
|
||||
});
|
||||
set_attribute(cache_container = item_self.appendChild(document.createElement("div")), {
|
||||
class : "cache"
|
||||
});
|
||||
set_attribute(canvas = item_self.appendChild(document.createElement("canvas")), {
|
||||
class : "canvas"
|
||||
});
|
||||
context = canvas.getContext("2d");
|
||||
|
||||
thread = threads_add(thread_method);
|
||||
on_resize_thread = threads_add(on_resize_method);
|
||||
item_self.onclick = () => execute_event("click");
|
||||
|
||||
frames_per_second_samples_number = self.settings("frames_per_second_samples");
|
||||
threads_add(calculate_real_frames_per_seconds);
|
||||
|
||||
end(true);
|
||||
|
||||
});
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
// o = Origin {mx, my}
|
||||
const draw = this.draw = (map, context, o) => map && map.forEach((level, i) => level && (level.push && draw(level, context, o || {mx : mx, my : my}) || (level.type && components[level.type] && components[level.type](level, context, self, o || {mx : mx, my : my}))));
|
||||
|
||||
const refresh_draw = () => {
|
||||
|
||||
if(!context)
|
||||
return;
|
||||
|
||||
context.clearRect(0, 0, canvas.width, canvas.height);
|
||||
draw(self.map, context);
|
||||
|
||||
};
|
||||
|
||||
const thread_method = () => {
|
||||
|
||||
const date = Date.now();
|
||||
|
||||
if(date - last_time < timeout)
|
||||
return;
|
||||
last_time = date;
|
||||
|
||||
refresh_draw();
|
||||
|
||||
};
|
||||
|
||||
// Establecer posición sobre el foco de origen.
|
||||
// Establecer posición sobre los laterales del recuadro o área de trabajo.
|
||||
const value = this.value = (value, quality) => q * value * (quality || 1);
|
||||
// const _x = this._x = value => q * qx * value * s;
|
||||
// const _y = this._y = value => q * qy * value * s;
|
||||
const _x = this._x = value => value * s;
|
||||
const _y = this._y = value => value * s;
|
||||
|
||||
this.preload_cache_items = (items, callback_per_item, callback) => {
|
||||
|
||||
const end = status => typeof callback == "function" && callback(status);
|
||||
|
||||
typeof items == "string" && (items = [items]);
|
||||
|
||||
if(!(items instanceof Array)){
|
||||
end(false);
|
||||
return;
|
||||
};
|
||||
|
||||
let fully = true,
|
||||
loaded = 0;
|
||||
const has_callback_per_item = typeof callback_per_item == "function",
|
||||
on_item_loaded = (url, ok) => {
|
||||
ok !== undefined && (cache[url].status = ok ? self.LOADED : self.ERROR);
|
||||
cache[url].on_load.execute(url, ok);
|
||||
has_callback_per_item && callback_per_item(url, ok);
|
||||
ok === false && fully && (fully = false);
|
||||
++ loaded == items.length && end(fully);
|
||||
};
|
||||
|
||||
items.forEach(url => {
|
||||
|
||||
if(cache[url]){
|
||||
if(cache[url].status == self.LOADING)
|
||||
cache[url].on_load.add(has_callback_per_item);
|
||||
else
|
||||
on_item_loaded(url);
|
||||
return;
|
||||
};
|
||||
|
||||
const extension = ((url.match(/\.([^\.]+)/) || [])[1] || "").toLowerCase();
|
||||
|
||||
cache[url] = {
|
||||
status : self.LOADING,
|
||||
on_load : new Events()
|
||||
};
|
||||
|
||||
switch(extension){
|
||||
case "jpg":
|
||||
case "jpeg":
|
||||
case "jpge":
|
||||
case "png":
|
||||
case "webp":
|
||||
case "gif":
|
||||
case "tif":
|
||||
case "tiff":
|
||||
case "pcx":
|
||||
case "bmp":
|
||||
|
||||
const image = new Image();
|
||||
|
||||
cache[url].type = "image";
|
||||
cache[url].image = image;
|
||||
|
||||
image.src = url;
|
||||
image.onload = () => on_item_loaded(url, true);
|
||||
image.onerror = () => on_item_loaded(url, false);
|
||||
|
||||
break;
|
||||
default:
|
||||
|
||||
cache[url].type = "unknown";
|
||||
cache[url].status = self.ERROR;
|
||||
on_item_loaded(url, false);
|
||||
|
||||
break;
|
||||
};
|
||||
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
const angle = this.angle = (x, y, randians) => {
|
||||
|
||||
if(typeof x == "object"){
|
||||
|
||||
const line = x.push ? {
|
||||
x : x[0] - y[0],
|
||||
y : x[1] - y[1]
|
||||
} : {
|
||||
x : x.x - y.x,
|
||||
y : x.y - y.y
|
||||
};
|
||||
|
||||
x = line.x;
|
||||
y = line.y;
|
||||
|
||||
};
|
||||
|
||||
let angle = Math.asin(y / ((x ** 2) + (y ** 2)) ** .5);
|
||||
|
||||
// if(x >= 0)
|
||||
// angle += Math.PI / 2;
|
||||
// else
|
||||
// angle = (1.5 * Math.PI) - angle;
|
||||
|
||||
return (x >= 0 ? angle + (Math.PI / 2) : ((1.5 * Math.PI) - angle)) * (randians ? 1 : 180 / Math.PI);
|
||||
};
|
||||
|
||||
const shadow = (data, context) => {
|
||||
|
||||
const z = dx < dy ? _x : _y;
|
||||
|
||||
if(!data.ok){
|
||||
isNaN(data.x) && (data.x = settings(["shadow_x", "x"]));
|
||||
isNaN(data.y) && (data.y = settings(["shadow_y", "y"]));
|
||||
!data.color && (data.color = settings(["shadow_color", "color"]));
|
||||
isNaN(data.blur) && (data.blur = settings(["shadow_blur", "blur"]));
|
||||
data.ok = true;
|
||||
};
|
||||
|
||||
context.shadowOffsetX = z(data.x);
|
||||
context.shadowOffsetY = z(data.y);
|
||||
context.shadowColor = data.color;
|
||||
context.shadowBlur = z(data.blur);
|
||||
|
||||
};
|
||||
|
||||
const border = (data, context) => {
|
||||
|
||||
if(!data.ok){
|
||||
!data.color && (data.color = settings(["border_color", "color"]));
|
||||
isNaN(data.width) && (data.width = settings(["border_width", "width"]));
|
||||
data.ok = true;
|
||||
};
|
||||
|
||||
context.strokeStyle = data.color;
|
||||
context.lineWidth = (dx < dy ? _x : _y)(data.width);
|
||||
|
||||
};
|
||||
|
||||
const components = {
|
||||
rotate : (data, context, kanvas, o) => {
|
||||
if(data.ignore)
|
||||
return;
|
||||
|
||||
if(!data.ok){
|
||||
isNaN(data.x) && (data.x = settings(["rotate_x", "x"]));
|
||||
isNaN(data.y) && (data.y = settings(["rotate_y", "y"]));
|
||||
isNaN(data.degrees) && (data.degrees = settings(["rotate_degrees", "degrees"]));
|
||||
data.ok = true;
|
||||
};
|
||||
|
||||
// console.log(JSON.stringify(data));
|
||||
// console.log(JSON.stringify([_x(data.x + mx), _y(data.y + my)]));
|
||||
|
||||
context.save();
|
||||
context.translate(_x(data.x + o.mx), _y(data.y + o.my));
|
||||
context.rotate(data.degrees * Math.PI / 180);
|
||||
draw(data.childs, context, {mx : 0, my : 0});
|
||||
context.restore();
|
||||
|
||||
},
|
||||
image : (data, context, kanvas, o) => {
|
||||
if(data.ignore)
|
||||
return;
|
||||
|
||||
!data.ok && !data.source && (data.source = data.src || data.url);
|
||||
|
||||
if(cache[data.source]){
|
||||
|
||||
if(!data.ok){
|
||||
if(cache[data.source] && cache[data.source].status == self.LOADED){
|
||||
isNaN(data.swidth) && (data.swidth = cache[data.source].image.width);
|
||||
isNaN(data.sheight) && (data.sheight = cache[data.source].image.height);
|
||||
isNaN(data.width) && (data.width = data.swidth);
|
||||
isNaN(data.height) && (data.height = data.sheight);
|
||||
};
|
||||
isNaN(data.x) && (data.x = settings(["image_x", "x"]));
|
||||
isNaN(data.y) && (data.y = settings(["image_y", "y"]));
|
||||
isNaN(data.alpha) && (data.alpha = settings(["image_alpha", "alpha"]));
|
||||
isNaN(data.sx) && (data.sx = 0);
|
||||
isNaN(data.sy) && (data.sy = 0);
|
||||
isNaN(data.mx) && (data.mx = 0);
|
||||
isNaN(data.my) && (data.my = 0);
|
||||
data.ok = true;
|
||||
};
|
||||
|
||||
if(cache[data.source].status != self.LOADED)
|
||||
return;
|
||||
|
||||
const half_width = data.width / 2,
|
||||
half_height = data.height / 2;
|
||||
|
||||
context.save();
|
||||
context.globalAlpha = data.alpha;
|
||||
context.translate(_x(o.mx + data.x + data.mx + half_width), _y(o.my + data.y + data.my + half_height));
|
||||
context.rotate(data.rotate * Math.PI / 180);
|
||||
context.drawImage(
|
||||
cache[data.source].image,
|
||||
data.sx, data.sy, data.swidth, data.sheight,
|
||||
_x(-half_width), _y(-half_height), _x(data.width), _y(data.height)
|
||||
);
|
||||
draw(data.childs, context, {mx : 0, my : 0});
|
||||
context.restore();
|
||||
|
||||
}else
|
||||
self.preload_cache_items([data.source]);
|
||||
|
||||
},
|
||||
// cache : (data, context, kanvas, o) => {
|
||||
// if(data.ignore)
|
||||
// return;
|
||||
|
||||
// context.save();
|
||||
|
||||
// if(isNaN(data.cache_i)){
|
||||
|
||||
// const cache_canvas = cache_container.appendChild(document.createElement("canvas")),
|
||||
// cache_context = cache_canvas.getContext("2d"),
|
||||
// width = data.width || canvas.width,
|
||||
// height = data.height || canvas.height;
|
||||
// image = new Image();
|
||||
|
||||
// cache_canvas.width = width;
|
||||
// cache_canvas.height = height;
|
||||
|
||||
// get_new_cache_i(data);
|
||||
// cache_context.save();
|
||||
// // cache_context.translate(_x(-o.mx), _y(-o.my));
|
||||
// draw(data.childs, cache_context, {mx : 0, my : 0});
|
||||
// image.src = cache_canvas.toDataURL("image/png");
|
||||
// cache[data.cache_i] = image;
|
||||
// cache_context.restore();
|
||||
|
||||
// cache_canvas.remove();
|
||||
|
||||
// };
|
||||
|
||||
// context.drawImage(cache[data.cache_i], 0, 0);
|
||||
// context.restore();
|
||||
|
||||
// },
|
||||
rectangle : (data, context, kanvas, o) => {
|
||||
if(data.ignore)return;
|
||||
|
||||
const proportion = canvas.width > canvas.height ? canvas.width / canvas.height : canvas.height / canvas.width;
|
||||
|
||||
if(!data.ok){
|
||||
isNaN(data.alpha) && (data.alpha = settings(["rectangle_alpha", "alpha"]));
|
||||
!data.color && (data.color = settings(["rectangle_color", "color"]));
|
||||
isNaN(data.x) && (data.x = settings(["rectangle_x", "x"]));
|
||||
isNaN(data.y) && (data.y = settings(["rectangle_y", "y"]));
|
||||
isNaN(data.width) && (data.width = proportion * c);
|
||||
isNaN(data.height) && (data.height = proportion * c);
|
||||
isNaN(data.mx) && (data.mx = 0);
|
||||
isNaN(data.my) && (data.my = 0);
|
||||
data.ok = true;
|
||||
};
|
||||
|
||||
context.save();
|
||||
data.shadow && (shadow(data.shadow, context));
|
||||
context.globalAlpha = data.alpha;
|
||||
context.fillStyle = data.color;
|
||||
context.translate(_x(o.mx + data.x + data.mx), _y(o.my + data.y + data.my));
|
||||
context.rotate(data.rotate * Math.PI / 180);
|
||||
context.translate(_x(-data.mx), _y(-data.my));
|
||||
context.fillRect(_x(data.x), _y(data.y), _x(data.width), _y(data.height));
|
||||
draw(data.childs, context, {mx : 0, my : 0});
|
||||
context.restore();
|
||||
|
||||
},
|
||||
text : (data, context, kanvas, o) => {
|
||||
if(data.ignore)
|
||||
return;
|
||||
|
||||
if(!data.ok){
|
||||
typeof data.italic != "boolean" && (data.italic = settings(["text_italic", "italic"]));
|
||||
isNaN(data.bold) && typeof data.bold != "boolean" && (data.bold = settings(["text_bold", "bold"]));
|
||||
isNaN(data.size) && (data.size = settings(["text_size", "size"]));
|
||||
data.font && (data.font_family = data.font);
|
||||
!data.font_family && (data.font_family = settings(["text_font_family", "text_font", "font"]));
|
||||
!data.align && (data.align = settings(["text_align", "align"]));
|
||||
isNaN(data.x) && (data.x = settings(["text_x", "x"]));
|
||||
isNaN(data.y) && (data.y = settings(["text_y", "y"]));
|
||||
!data.text && (data.text = "");
|
||||
isNaN(data.alpha) && (data.alpha = settings(["text_alpha", "alpha"]));
|
||||
!data.baseline && (data.baseline = settings(["text_baseline", "baseline"]));
|
||||
data.ok = true;
|
||||
};
|
||||
|
||||
context.save();
|
||||
data.shadow && (shadow(data.shadow, context));
|
||||
context.globalAlpha = data.alpha;
|
||||
context.textAlign = data.align;
|
||||
context.textBaseline = data.baseline;
|
||||
context.font = (
|
||||
(data.italic ? "italic " : "") +
|
||||
(data.bold ? isNaN(data.bold) ? "bold " : data.bold + " " : "") +
|
||||
(dx < dy ? _x : _y)(data.size) + "px " +
|
||||
data.font_family
|
||||
);
|
||||
if(data.color){
|
||||
context.fillStyle = data.color;
|
||||
context.fillText(data.text, _x(data.x + mx), _y(data.y + my));
|
||||
};
|
||||
if(data.border){
|
||||
border(data.border, context);
|
||||
context.strokeText(data.text, _x(data.x + mx), _y(data.y + my));
|
||||
};
|
||||
context.restore();
|
||||
|
||||
},
|
||||
block : (data, context, kanvas, o) => {
|
||||
if(data.ignore)
|
||||
return;
|
||||
|
||||
if(!data.ok){
|
||||
isNaN(data.alpha) && (data.alpha = settings(["block_alpha", "alpha"]));
|
||||
data.ok = true;
|
||||
};
|
||||
|
||||
context.save();
|
||||
context.globalAlpha = data.alpha;
|
||||
draw(data.childs, context, {mx : 0, my : 0});
|
||||
context.restore();
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
this.add_components = (json, overwrite) => {
|
||||
if(!json)
|
||||
return;
|
||||
|
||||
!json.push && (json = [json]);
|
||||
typeof overwrite != "bool" && (overwrite = settings("overwrite"));
|
||||
|
||||
json.forEach((items) => {
|
||||
if(!items)
|
||||
return;
|
||||
if(items.push)
|
||||
self.add_components(items, overwrite);
|
||||
else if(typeof items == "object")
|
||||
for(let key in items)
|
||||
(overwrite || !components[key]) && (components[key] = items[key]);
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
this.extends = (object, overwrite) => {
|
||||
for(const key in self)
|
||||
(overwrite || object[key] === undefined) && (object[key] = self[key]);
|
||||
};
|
||||
|
||||
this.check_mouse = (item, event) => {
|
||||
|
||||
item_self.setAttribute("data-mouse-x", mouse.x = (event.clientX * q * qx / s) - mx);
|
||||
item_self.setAttribute("data-mouse-y", mouse.y = (event.clientY * q * qy / s) - my);
|
||||
|
||||
execute_event("mouse_move");
|
||||
|
||||
};
|
||||
|
||||
const on_event = this.on_event = (name, method, range) => {
|
||||
|
||||
if(typeof method != "function")
|
||||
return null;
|
||||
|
||||
!events[name] && (events[name] = {
|
||||
methods : [],
|
||||
l : 0,
|
||||
ranges : []
|
||||
});
|
||||
|
||||
let i = 0;
|
||||
|
||||
for(; i < events[name].l; i ++)
|
||||
if(!events[name].methods[i])
|
||||
break;
|
||||
|
||||
events[name].methods[i] = method;
|
||||
events[name].ranges[i] = range;
|
||||
events[name].l = events[name].methods.length;
|
||||
|
||||
return i;
|
||||
};
|
||||
|
||||
const remove_event = this.remove_event = (name, i) => events[name] && !isNaN(i) && i >= 0 && i < events[name].l && events[name].methods[i] && (events[name].methods[i] = null);
|
||||
|
||||
const execute_event = this.execute_event = (name, input) => {
|
||||
|
||||
if(events[name] && events[name].l)
|
||||
for(let i = 0; i < events[name].l; i ++)
|
||||
events[name].methods[i] && events[name].methods[i](range_analyze(events[name].ranges[i]), input);
|
||||
|
||||
};
|
||||
|
||||
const event_range = this.event_range = (name, i) => events[name] && !isNaN(i) && i >= 0 && i < events[name].l ? events[name].ranges[i] : null;
|
||||
|
||||
this.on_mouse_move = (method, range) => on_event("mouse_move", method, range);
|
||||
this.on_resize = (method, range) => on_event("resize", method, range);
|
||||
this.on_click = (method, range) => on_event("click", method, range);
|
||||
this.on_key_down = (method, range) => on_event("key_down", method, range);
|
||||
this.on_key_up = (method, range) => on_event("key_up", method, range);
|
||||
|
||||
this.remove_mouse_move = i => {remove_event("mouse_move", i);};
|
||||
this.remove_resize = i => {remove_event("resize", i);};
|
||||
this.remove_click = i => {remove_event("click", i);};
|
||||
this.remove_key_down = i => {remove_event("key_down", i);};
|
||||
this.remove_key_up = i => {remove_event("key_up", i);};
|
||||
|
||||
this.range_mouse_move = i => event_range("mouse_move", i);
|
||||
this.range_resize = i => event_range("resize", i);
|
||||
this.range_click = i => event_range("click", i);
|
||||
this.range_key_down = i => event_range("key_down", i);
|
||||
this.range_key_up = i => event_range("key_up", i);
|
||||
|
||||
this.key_down = (item, event) => execute_event("key_down", {code : event.keyCode});
|
||||
this.key_up = (item, event) => execute_event("key_up", {code : event.keyCode});
|
||||
|
||||
this.get_margins = () => ({x : mx, y : my});
|
||||
this.get_position = () => ({x : position.x, y : position.y});
|
||||
this.get_cells = () => c;
|
||||
this.get_canvas_distance = () => ({x : dx, y : dy});
|
||||
this.get_cell_size = () => s;
|
||||
|
||||
this.get_real_frames_per_second = () => real_frames_per_seconds;
|
||||
this.delta_time = () => delta_time;
|
||||
|
||||
construct();
|
||||
|
||||
};
|
||||
782
Public/ecma/version/30311230/Kanvas.ecma.js
Executable file
782
Public/ecma/version/30311230/Kanvas.ecma.js
Executable file
@ -0,0 +1,782 @@
|
||||
Kanvas = function(input){
|
||||
|
||||
const self = this,
|
||||
default_settings = {
|
||||
quality : 1,
|
||||
quality_x : 1,
|
||||
quality_y : 1,
|
||||
cells : 100,
|
||||
origin : 5, // Posición origen. Mirar teclado numérico para ver los diferentes valores para cada posición.
|
||||
frames_per_second : 60,
|
||||
ratio : null, // Expone la proporción de tamaño del Canvas (16/9 para pantallas WideScreen por ejemplo). Si es equivalente a falso cubrirá todo el área de la capa donde se encuentre.
|
||||
overwrite : false,
|
||||
position : "body",
|
||||
autostart : true,
|
||||
object_name : "kanvas",
|
||||
class : "kanvas",
|
||||
application : "Kanvas",
|
||||
x : 0,
|
||||
y : 0,
|
||||
width : 0,
|
||||
height : 0,
|
||||
color : "#000",
|
||||
blur : 0,
|
||||
italic : false,
|
||||
bold : false,
|
||||
size : 1,
|
||||
font : "Arial",
|
||||
align : "left",
|
||||
alpha : 1,
|
||||
degrees : 0,
|
||||
baseline : "Alphabetic",
|
||||
shadow_x : 0,
|
||||
shadow_y : 0,
|
||||
shadow_color : "#000",
|
||||
shadow_blur : 0,
|
||||
border_color : "#000",
|
||||
border_width : 0,
|
||||
text_italic : false,
|
||||
text_bold : false,
|
||||
text_size : 1,
|
||||
font_family : "Arial",
|
||||
text_color : "#000",
|
||||
text_align : "left",
|
||||
text_alpha : 1,
|
||||
rotate_x : 0,
|
||||
rotate_y : 0,
|
||||
rotate_degrees : 0,
|
||||
image_x : 0,
|
||||
image_y : 0,
|
||||
image_alpha : 1,
|
||||
rectangle_color : "#000",
|
||||
rectangle_alpha : 1,
|
||||
rectangle_x : 0,
|
||||
rectangle_y : 0,
|
||||
text_baseline : "Alphabetic",
|
||||
default_value : null,
|
||||
hash_alphabet : "123456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz",
|
||||
hash_length : 7
|
||||
},
|
||||
cache = [],
|
||||
_screen = {x : 0, y : 0},
|
||||
position = {x : 0, y : 0},
|
||||
events = {},
|
||||
threads = [],
|
||||
hashes = [],
|
||||
attributes = {
|
||||
natives : ["id", "class", "onmousemove", "tabindex", "onkeydown", "onkeyup"]
|
||||
};
|
||||
let q, qx, qy, // Calidad porcentual.
|
||||
c, // Número de celdas en el lado más corto de la pantalla o área de trabajo rectangular.
|
||||
fx, fy, // Posición contra el foco.
|
||||
dx, dy, // Distancia desde los laterales hasta el cuadrado de trabajo.
|
||||
s, // Tamaño de la celda. Solo se mide un lado pues será cuadrada.
|
||||
mx, my, // Posición origen del lienzo.
|
||||
thread = null,
|
||||
timeout = 0,
|
||||
last_time = 0,
|
||||
started = false,
|
||||
cache_container, context, canvas,
|
||||
cache_l = 0,
|
||||
thread_object = null;
|
||||
|
||||
let item_self = this.item_self;
|
||||
let hash_self = this.hash_self;
|
||||
let object_name = this.object_name;
|
||||
let mouse = this.mouse = {x : 0, y : 0};
|
||||
|
||||
this.map = [];
|
||||
|
||||
const null_or_undefined = this.null_or_undefined = value => value === undefined || value === null;
|
||||
|
||||
const allow_nulls = this.allow_nulls = nulls => typeof nulls == "boolean" ? nulls : settings(["nulls", "allow_nulls"], null, false, false);
|
||||
|
||||
const default_value = this.default_value = (_default, nulls) => _default !== undefined && (nulls || _default !== null) ? _default : settings(["default_value", "default", "by_default"], null, null, true);
|
||||
|
||||
const settings = this.settings = (names, inputs, _default, nulls) => {
|
||||
if(!names)
|
||||
return default_value(_default, nulls);
|
||||
|
||||
nulls = allow_nulls(nulls);
|
||||
|
||||
const l = (names.push ? names : names = [names]).length,
|
||||
m = (inputs = (inputs ? inputs.push ? inputs : [inputs] : []).concat([input, default_settings])).length;
|
||||
|
||||
for(let j = 0; j < m; j ++)
|
||||
if(typeof inputs[j] == "object")
|
||||
for(let i = 0; i < l; i ++)
|
||||
if(names[i] && inputs[j][names[i]] !== undefined && (nulls || inputs[j][names[i]] !== null))
|
||||
return inputs[j][names[i]];
|
||||
return default_value(_default, nulls);
|
||||
};
|
||||
|
||||
const threads_function = () => threads.forEach(thread => thread && thread());
|
||||
|
||||
const threads_start = this.threads_start = frames_per_second => thread_object === null && (thread_object = setInterval(threads_function, 1000 / (isNaN(frames_per_second) || frames_per_second < 1 ? settings(["frames_per_second", "fps"]) : frames_per_second)));
|
||||
|
||||
const threads_stop = this.threads_stop = () => {
|
||||
|
||||
if(thread_object === null)
|
||||
return;
|
||||
|
||||
clearInterval(thread_object);
|
||||
thread_object = null;
|
||||
|
||||
};
|
||||
|
||||
const threads_add = this.threads_add = callback => {
|
||||
if(typeof callback != "function")
|
||||
return null;
|
||||
|
||||
let i = 0;
|
||||
const l = threads.length;
|
||||
|
||||
for(; i < l; i ++)
|
||||
if(!threads[i])
|
||||
break;
|
||||
|
||||
threads[i] = callback;
|
||||
|
||||
return i;
|
||||
};
|
||||
|
||||
const threads_remove = this.threads_remove = i => !isNaN(i) && threads[i] && (threads[i] = null);
|
||||
|
||||
const is_html_object = this.is_html_object = variable => typeof variable == "object" && (variable.tagName || variable.nodeName);
|
||||
|
||||
const preload = this.preload = (selector, callback) => {
|
||||
if(typeof callback != "function")
|
||||
return;
|
||||
|
||||
if(!selector){
|
||||
callback(null, false, "NO_SELECTOR");
|
||||
return;
|
||||
};
|
||||
if(is_html_object(selector)){
|
||||
callback(selector, false, "OK");
|
||||
return;
|
||||
};
|
||||
if(!selector.substr){
|
||||
callback(null, false, "BAD_TYPE");
|
||||
return;
|
||||
};
|
||||
|
||||
let item;
|
||||
|
||||
try{
|
||||
if(item = document.querySelector(selector)){
|
||||
callback(item, false, "OK");
|
||||
return;
|
||||
};
|
||||
}catch(exception){
|
||||
callback(null, false, "BAD_SELECTOR");
|
||||
return;
|
||||
};
|
||||
|
||||
const timeout = settings(["preload_timeout", "timeout"]),
|
||||
date = Date.now();
|
||||
let preload = threads_add(() => {
|
||||
if(item = document.querySelector(selector)){
|
||||
threads_remove(preload);
|
||||
callback(item, true, "OK");
|
||||
}else if(Date.now() - date > timeout){
|
||||
threads_remove(preload);
|
||||
callback(null, true, "TIMEOUT");
|
||||
};
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
const hash = this.hash = () => {
|
||||
|
||||
let hash, alphabet = settings(["hash_alphabet", "alphabet"]);
|
||||
const length = settings(["hash_length", "length"]),
|
||||
l = (alphabet.push ? alphabet : alphabet = alphabet.split("")).length;
|
||||
|
||||
do{
|
||||
hash = "";
|
||||
while((hash += alphabet[Math.random() * l >> 0]).length < length);
|
||||
}while(
|
||||
hashes.includes(hash) ||
|
||||
/^\d/.test(hash) ||
|
||||
document.querySelector("." + hash + ",#" + hash + ",[name=" + hash + "]")
|
||||
);
|
||||
hashes.push(hash);
|
||||
|
||||
return hash;
|
||||
};
|
||||
|
||||
const set_attribute = this.set_attribute = (item, custom_attributes) => {
|
||||
if(!is_html_object(item) || typeof custom_attributes != "object")
|
||||
return;
|
||||
|
||||
for(const name in custom_attributes)
|
||||
item.setAttribute((attributes.natives.includes(name) ? "" : "data-") + name.replace(/[^a-z\d-]+/g, "-"), custom_attributes[name]);
|
||||
|
||||
};
|
||||
|
||||
const construct = () => {
|
||||
|
||||
const custom_attributes = {
|
||||
natives : settings("attributes_natives")
|
||||
};
|
||||
|
||||
for(const key in custom_attributes){
|
||||
!attributes[key] && (attributes[key] = []);
|
||||
(custom_attributes ? custom_attributes.push ? custom_attributes : [custom_attributes] : []).forEach(new_attribute => attributes[key].push(new_attribute));
|
||||
};
|
||||
|
||||
object_name = self.object_name = settings("object_name");
|
||||
|
||||
settings("autostart") && self.start();
|
||||
|
||||
};
|
||||
|
||||
const range_analyze = range => !range || (
|
||||
mouse.x >= range.x && mouse.x <= range.x + range.width &&
|
||||
mouse.y >= range.y && mouse.y <= range.y + range.height
|
||||
);
|
||||
|
||||
const on_resize_method = screen => {
|
||||
|
||||
if(_screen.x == item_self.offsetWidth && _screen.y == item_self.offsetHeight)
|
||||
return;
|
||||
|
||||
const width = canvas.width = (_screen.x = item_self.offsetWidth) * q * qx,
|
||||
height = canvas.height = (_screen.y = item_self.offsetHeight) * q * qy;
|
||||
|
||||
if(width < height){
|
||||
s = width / c;
|
||||
dx = 0;
|
||||
dy = -(c - (c * height / width)) / 2;
|
||||
mx = position.x;
|
||||
my = position.y + dy;
|
||||
}else{
|
||||
s = height / c;
|
||||
dx = -(c - (c * width / height)) / 2;
|
||||
dy = 0;
|
||||
mx = position.x + dx;
|
||||
my = position.y;
|
||||
};
|
||||
|
||||
//resize_methods.forEach((method) => {if(method)method();});
|
||||
execute_event("resize");
|
||||
|
||||
};
|
||||
|
||||
const position_set = () => {
|
||||
|
||||
const origin = settings("origin");
|
||||
|
||||
position.x = c * (.5 * ((origin - 1) % 3));
|
||||
position.y = c * (1 - (.5 * ((origin - 1) / 3 >> 0)));
|
||||
|
||||
};
|
||||
|
||||
this.start = () => {
|
||||
|
||||
if(started)
|
||||
return;
|
||||
started = true;
|
||||
|
||||
q = settings(["quality", "q"]);
|
||||
qx = settings(["quality_x", "qx"]);
|
||||
qy = settings(["quality_y", "qy"]);
|
||||
timeout = 1000 / settings("frames_per_second");
|
||||
c = settings("cells");
|
||||
position_set();
|
||||
threads_start();
|
||||
|
||||
preload(settings("position"), (position, asynchronous, error) => {
|
||||
|
||||
if(!position){
|
||||
console.error("ERROR. Position HTML for install GUI CANVAS is bad. [" + error + "]");
|
||||
return;
|
||||
};
|
||||
|
||||
const _class = (hash_self = self.hash_self = hash()) + " " + settings("class");
|
||||
|
||||
!new RegExp("\\b" + default_settings.class + "\\b").test(_class) && (_class += " " + default_settings.class);
|
||||
|
||||
set_attribute(item_self = self.item_self = position.appendChild(document.createElement("div")), {
|
||||
id : hash_self,
|
||||
hash : hash_self,
|
||||
class : _class,
|
||||
application : default_settings.application,
|
||||
onmousemove : object_name + ".check_mouse(this, event);",
|
||||
tabindex : 0,
|
||||
onkeydown : object_name + ".key_down(this, event);",
|
||||
onkeyup : object_name + ".key_up(this, event);"
|
||||
});
|
||||
set_attribute(cache_container = item_self.appendChild(document.createElement("div")), {
|
||||
class : "cache"
|
||||
});
|
||||
set_attribute(canvas = item_self.appendChild(document.createElement("canvas")), {
|
||||
class : "canvas"
|
||||
});
|
||||
context = canvas.getContext("2d");
|
||||
|
||||
thread = threads_add(thread_method);
|
||||
on_resize_thread = threads_add(on_resize_method);
|
||||
item_self.onclick = () => execute_event("click");
|
||||
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
// o = Origin {mx, my}
|
||||
const draw = this.draw = (map, context, o) => map && map.forEach((level, i) => level && (level.push && draw(level, context, o || {mx : mx, my : my}) || (level.type && components[level.type] && components[level.type](level, context, self, o || {mx : mx, my : my}))));
|
||||
|
||||
const refresh_draw = () => {
|
||||
|
||||
if(!context)
|
||||
return;
|
||||
|
||||
context.clearRect(0, 0, canvas.width, canvas.height);
|
||||
draw(self.map, context);
|
||||
|
||||
};
|
||||
|
||||
const thread_method = () => {
|
||||
|
||||
const date = Date.now();
|
||||
|
||||
if(date - last_time < timeout)
|
||||
return;
|
||||
last_time = date;
|
||||
|
||||
refresh_draw();
|
||||
|
||||
};
|
||||
|
||||
// Establecer posición sobre el foco de origen.
|
||||
// Establecer posición sobre los laterales del recuadro o área de trabajo.
|
||||
const value = this.value = (value, quality) => q * value * (quality || 1);
|
||||
// const _x = this._x = value => q * qx * value * s;
|
||||
// const _y = this._y = value => q * qy * value * s;
|
||||
const _x = this._x = value => value * s;
|
||||
const _y = this._y = value => value * s;
|
||||
|
||||
this.cache_set = item => {
|
||||
|
||||
let i = 0;
|
||||
|
||||
for(; i < cache_l; i ++)
|
||||
if(cache[i] === null)
|
||||
break;
|
||||
|
||||
cache[i] = item;
|
||||
cache_l = cache.length;
|
||||
|
||||
return i;
|
||||
};
|
||||
|
||||
const get_new_cache_i = item => item.cache_i = self.cache_set(true);
|
||||
|
||||
this.cache_clean = i => !isNaN(i) && i >= 0 && i < cache.length && cache[i] !== null && (cache[i] = null);
|
||||
|
||||
const preload_cache_items = (items, callback_per_item, callback, i) => {
|
||||
|
||||
if(i >= items.length){
|
||||
typeof callback == "function" && callback();
|
||||
return;
|
||||
};
|
||||
|
||||
const end = () => {
|
||||
typeof callback_per_item == "function" && callback_per_item(i, items[i]);
|
||||
preload_cache_items(items, callback_per_item, callback, i + 1);
|
||||
};
|
||||
|
||||
if(!items[i]){
|
||||
end();
|
||||
return;
|
||||
};
|
||||
|
||||
switch(items[i].type){
|
||||
case "image":
|
||||
|
||||
const source = items[i].source || items[i].value;
|
||||
|
||||
if(!source){
|
||||
end();
|
||||
return;
|
||||
};
|
||||
|
||||
const image = new Image();
|
||||
|
||||
image.src = source;
|
||||
image.crossOrigin = "anonymous";
|
||||
image.onload = () => {
|
||||
items[i].cache_i = self.cache_set(image);
|
||||
// console.log([items[i], items[i].source || items[i].value, cache[items[i].cache_i]]);
|
||||
end();
|
||||
};
|
||||
image.onerror = end;
|
||||
|
||||
break;
|
||||
default:
|
||||
items[i].cache_i = self.cache_set(image);
|
||||
end();
|
||||
break;
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
this.preload_cache_items = (items, callback_per_item, callback) => {
|
||||
|
||||
if(!items){
|
||||
typeof callback == "function" && callback();
|
||||
return;
|
||||
};
|
||||
!items.pus && (items = [items]);
|
||||
|
||||
preload_cache_items(items, callback_per_item, callback, 0);
|
||||
|
||||
};
|
||||
|
||||
const angle = this.angle = (x, y, randians) => {
|
||||
|
||||
if(typeof x == "object"){
|
||||
|
||||
const line = x.push ? {
|
||||
x : x[0] - y[0],
|
||||
y : x[1] - y[1]
|
||||
} : {
|
||||
x : x.x - y.x,
|
||||
y : x.y - y.y
|
||||
};
|
||||
|
||||
x = line.x;
|
||||
y = line.y;
|
||||
|
||||
};
|
||||
|
||||
let angle = Math.asin(y / ((x ** 2) + (y ** 2)) ** .5);
|
||||
|
||||
// if(x >= 0)
|
||||
// angle += Math.PI / 2;
|
||||
// else
|
||||
// angle = (1.5 * Math.PI) - angle;
|
||||
|
||||
return (x >= 0 ? angle + (Math.PI / 2) : ((1.5 * Math.PI) - angle)) * (randians ? 1 : 180 / Math.PI);
|
||||
};
|
||||
|
||||
const shadow = (data, context) => {
|
||||
|
||||
const z = dx < dy ? _x : _y;
|
||||
|
||||
if(!data.ok){
|
||||
isNaN(data.x) && (data.x = settings(["shadow_x", "x"]));
|
||||
isNaN(data.y) && (data.y = settings(["shadow_y", "y"]));
|
||||
!data.color && (data.color = settings(["shadow_color", "color"]));
|
||||
isNaN(data.blur) && (data.blur = settings(["shadow_blur", "blur"]));
|
||||
data.ok = true;
|
||||
};
|
||||
|
||||
context.shadowOffsetX = z(data.x);
|
||||
context.shadowOffsetY = z(data.y);
|
||||
context.shadowColor = data.color;
|
||||
context.shadowBlur = z(data.blur);
|
||||
|
||||
};
|
||||
|
||||
const border = (data, context) => {
|
||||
|
||||
if(!data.ok){
|
||||
!data.color && (data.color = settings(["border_color", "color"]));
|
||||
isNaN(data.width) && (data.width = settings(["border_width", "width"]));
|
||||
data.ok = true;
|
||||
};
|
||||
|
||||
context.strokeStyle = data.color;
|
||||
context.lineWidth = (dx < dy ? _x : _y)(data.width);
|
||||
|
||||
};
|
||||
|
||||
const components = {
|
||||
rotate : (data, context, kanvas, o) => {
|
||||
if(data.ignore)
|
||||
return;
|
||||
|
||||
if(!data.ok){
|
||||
isNaN(data.x) && (data.x = settings(["rotate_x", "x"]));
|
||||
isNaN(data.y) && (data.y = settings(["rotate_y", "y"]));
|
||||
isNaN(data.degrees) && (data.degrees = settings(["rotate_degrees", "degrees"]));
|
||||
data.ok = true;
|
||||
};
|
||||
|
||||
// console.log(JSON.stringify(data));
|
||||
// console.log(JSON.stringify([_x(data.x + mx), _y(data.y + my)]));
|
||||
|
||||
context.save();
|
||||
context.translate(_x(data.x + o.mx), _y(data.y + o.my));
|
||||
context.rotate(data.degrees * Math.PI / 180);
|
||||
draw(data.childs, context, {mx : 0, my : 0});
|
||||
context.restore();
|
||||
|
||||
},
|
||||
image : (data, context, kanvas, o) => {
|
||||
if(data.ignore)
|
||||
return;
|
||||
|
||||
const draw_image = () => {
|
||||
|
||||
if(!data.ok){
|
||||
isNaN(data.swidth) && (data.swidth = cache[data.cache_i].width);
|
||||
isNaN(data.sheight) && (data.sheight = cache[data.cache_i].height);
|
||||
isNaN(data.width) && (data.width = data.swidth);
|
||||
isNaN(data.height) && (data.height = data.sheight);
|
||||
isNaN(data.x) && (data.x = settings(["image_x", "x"]));
|
||||
isNaN(data.y) && (data.y = settings(["image_y", "y"]));
|
||||
isNaN(data.alpha) && (data.alpha = settings(["image_alpha", "alpha"]));
|
||||
isNaN(data.sx) && (data.sx = 0);
|
||||
isNaN(data.sy) && (data.sy = 0);
|
||||
isNaN(data.mx) && (data.mx = 0);
|
||||
isNaN(data.my) && (data.my = 0);
|
||||
data.ok = true;
|
||||
};
|
||||
|
||||
const half_width = data.width / 2,
|
||||
half_height = data.height / 2;
|
||||
|
||||
context.save();
|
||||
context.globalAlpha = data.alpha;
|
||||
context.translate(_x(o.mx + data.x + data.mx + half_width), _y(o.my + data.y + data.my + half_height));
|
||||
context.rotate(data.rotate * Math.PI / 180);
|
||||
context.drawImage(
|
||||
cache[data.cache_i],
|
||||
data.sx, data.sy, data.swidth, data.sheight,
|
||||
_x(-half_width), _y(-half_height), _x(data.width), _y(data.height)
|
||||
);
|
||||
draw(data.childs, context, {mx : 0, my : 0});
|
||||
context.restore();
|
||||
|
||||
};
|
||||
|
||||
if(isNaN(data.cache_i)){
|
||||
|
||||
const i = get_new_cache_i(data);
|
||||
|
||||
cache[i] = new Image();
|
||||
cache[i].src = data.source || data.image;
|
||||
cache[i].crossOrigin = "anonymous";
|
||||
cache[i].onload = draw_image;
|
||||
|
||||
}else
|
||||
draw_image();
|
||||
|
||||
},
|
||||
cache : (data, context, kanvas, o) => {
|
||||
if(data.ignore)
|
||||
return;
|
||||
|
||||
context.save();
|
||||
|
||||
if(isNaN(data.cache_i)){
|
||||
|
||||
const cache_canvas = cache_container.appendChild(document.createElement("canvas")),
|
||||
cache_context = cache_canvas.getContext("2d"),
|
||||
width = data.width || canvas.width,
|
||||
height = data.height || canvas.height;
|
||||
image = new Image();
|
||||
|
||||
cache_canvas.width = width;
|
||||
cache_canvas.height = height;
|
||||
|
||||
get_new_cache_i(data);
|
||||
cache_context.save();
|
||||
// cache_context.translate(_x(-o.mx), _y(-o.my));
|
||||
draw(data.childs, cache_context, {mx : 0, my : 0});
|
||||
image.src = cache_canvas.toDataURL("image/png");
|
||||
cache[data.cache_i] = image;
|
||||
cache_context.restore();
|
||||
|
||||
cache_canvas.remove();
|
||||
|
||||
};
|
||||
|
||||
context.drawImage(cache[data.cache_i], 0, 0);
|
||||
context.restore();
|
||||
|
||||
},
|
||||
rectangle : (data, context, kanvas, o) => {
|
||||
if(data.ignore)return;
|
||||
|
||||
const proportion = canvas.width > canvas.height ? canvas.width / canvas.height : canvas.height / canvas.width;
|
||||
|
||||
if(!data.ok){
|
||||
isNaN(data.alpha) && (data.alpha = settings(["rectangle_alpha", "alpha"]));
|
||||
!data.color && (data.color = settings(["rectangle_color", "color"]));
|
||||
isNaN(data.x) && (data.x = settings(["rectangle_x", "x"]));
|
||||
isNaN(data.y) && (data.y = settings(["rectangle_y", "y"]));
|
||||
isNaN(data.width) && (data.width = proportion * c);
|
||||
isNaN(data.height) && (data.height = proportion * c);
|
||||
isNaN(data.mx) && (data.mx = 0);
|
||||
isNaN(data.my) && (data.my = 0);
|
||||
data.ok = true;
|
||||
};
|
||||
|
||||
context.save();
|
||||
data.shadow && (shadow(data.shadow, context));
|
||||
context.globalAlpha = data.alpha;
|
||||
context.fillStyle = data.color;
|
||||
context.translate(_x(o.mx + data.x + data.mx), _y(o.my + data.y + data.my));
|
||||
context.rotate(data.rotate * Math.PI / 180);
|
||||
context.translate(_x(-data.mx), _y(-data.my));
|
||||
context.fillRect(_x(data.x), _y(data.y), _x(data.width), _y(data.height));
|
||||
draw(data.childs, context, {mx : 0, my : 0});
|
||||
context.restore();
|
||||
|
||||
},
|
||||
text : (data, context, kanvas, o) => {
|
||||
if(data.ignore)
|
||||
return;
|
||||
|
||||
if(!data.ok){
|
||||
typeof data.italic != "boolean" && (data.italic = settings(["text_italic", "italic"]));
|
||||
isNaN(data.bold) && typeof data.bold != "boolean" && (data.bold = settings(["text_bold", "bold"]));
|
||||
isNaN(data.size) && (data.size = settings(["text_size", "size"]));
|
||||
data.font && (data.font_family = data.font);
|
||||
!data.font_family && (data.font_family = settings(["text_font_family", "text_font", "font"]));
|
||||
!data.align && (data.align = settings(["text_align", "align"]));
|
||||
isNaN(data.x) && (data.x = settings(["text_x", "x"]));
|
||||
isNaN(data.y) && (data.y = settings(["text_y", "y"]));
|
||||
!data.text && (data.text = "");
|
||||
isNaN(data.alpha) && (data.alpha = settings(["text_alpha", "alpha"]));
|
||||
!data.baseline && (data.baseline = settings(["text_baseline", "baseline"]));
|
||||
data.ok = true;
|
||||
};
|
||||
|
||||
context.save();
|
||||
data.shadow && (shadow(data.shadow, context));
|
||||
context.globalAlpha = data.alpha;
|
||||
context.textAlign = data.align;
|
||||
context.textBaseline = data.baseline;
|
||||
context.font = (
|
||||
(data.italic ? "italic " : "") +
|
||||
(data.bold ? isNaN(data.bold) ? "bold " : data.bold + " " : "") +
|
||||
(dx < dy ? _x : _y)(data.size) + "px " +
|
||||
data.font_family
|
||||
);
|
||||
if(data.color){
|
||||
context.fillStyle = data.color;
|
||||
context.fillText(data.text, _x(data.x + mx), _y(data.y + my));
|
||||
};
|
||||
if(data.border){
|
||||
border(data.border, context);
|
||||
context.strokeText(data.text, _x(data.x + mx), _y(data.y + my));
|
||||
};
|
||||
context.restore();
|
||||
|
||||
},
|
||||
block : (data, context, kanvas, o) => {
|
||||
if(data.ignore)
|
||||
return;
|
||||
|
||||
if(!data.ok){
|
||||
isNaN(data.alpha) && (data.alpha = settings(["block_alpha", "alpha"]));
|
||||
data.ok = true;
|
||||
};
|
||||
|
||||
context.save();
|
||||
context.globalAlpha = data.alpha;
|
||||
draw(data.childs, context, {mx : 0, my : 0});
|
||||
context.restore();
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
this.add_components = (json, overwrite) => {
|
||||
if(!json)
|
||||
return;
|
||||
|
||||
!json.push && (json = [json]);
|
||||
typeof overwrite != "bool" && (overwrite = settings("overwrite"));
|
||||
|
||||
json.forEach((items) => {
|
||||
if(!items)
|
||||
return;
|
||||
if(items.push)
|
||||
self.add_components(items, overwrite);
|
||||
else if(typeof items == "object")
|
||||
for(let key in items)
|
||||
(overwrite || !components[key]) && (components[key] = items[key]);
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
this.check_mouse = (item, event) => {
|
||||
|
||||
item_self.setAttribute("data-mouse-x", mouse.x = (event.clientX * q * qx / s) - mx);
|
||||
item_self.setAttribute("data-mouse-y", mouse.y = (event.clientY * q * qy / s) - my);
|
||||
|
||||
execute_event("mouse_move");
|
||||
|
||||
};
|
||||
|
||||
const on_event = this.on_event = (name, method, range) => {
|
||||
|
||||
if(typeof method != "function")
|
||||
return null;
|
||||
|
||||
!events[name] && (events[name] = {
|
||||
methods : [],
|
||||
l : 0,
|
||||
ranges : []
|
||||
});
|
||||
|
||||
let i = 0;
|
||||
|
||||
for(; i < events[name].l; i ++)
|
||||
if(!events[name].methods[i])
|
||||
break;
|
||||
|
||||
events[name].methods[i] = method;
|
||||
events[name].ranges[i] = range;
|
||||
events[name].l = events[name].methods.length;
|
||||
|
||||
return i;
|
||||
};
|
||||
|
||||
const remove_event = this.remove_event = (name, i) => events[name] && !isNaN(i) && i >= 0 && i < events[name].l && events[name].methods[i] && (events[name].methods[i] = null);
|
||||
|
||||
const execute_event = this.execute_event = (name, input) => {
|
||||
|
||||
if(events[name] && events[name].l)
|
||||
for(let i = 0; i < events[name].l; i ++)
|
||||
events[name].methods[i] && events[name].methods[i](range_analyze(events[name].ranges[i]), input);
|
||||
|
||||
};
|
||||
|
||||
const event_range = this.event_range = (name, i) => events[name] && !isNaN(i) && i >= 0 && i < events[name].l ? events[name].ranges[i] : null;
|
||||
|
||||
this.on_mouse_move = (method, range) => on_event("mouse_move", method, range);
|
||||
this.on_resize = (method, range) => on_event("resize", method, range);
|
||||
this.on_click = (method, range) => on_event("click", method, range);
|
||||
this.on_key_down = (method, range) => on_event("key_down", method, range);
|
||||
this.on_key_up = (method, range) => on_event("key_up", method, range);
|
||||
|
||||
this.remove_mouse_move = i => {remove_event("mouse_move", i);};
|
||||
this.remove_resize = i => {remove_event("resize", i);};
|
||||
this.remove_click = i => {remove_event("click", i);};
|
||||
this.remove_key_down = i => {remove_event("key_down", i);};
|
||||
this.remove_key_up = i => {remove_event("key_up", i);};
|
||||
|
||||
this.range_mouse_move = i => event_range("mouse_move", i);
|
||||
this.range_resize = i => event_range("resize", i);
|
||||
this.range_click = i => event_range("click", i);
|
||||
this.range_key_down = i => event_range("key_down", i);
|
||||
this.range_key_up = i => event_range("key_up", i);
|
||||
|
||||
this.key_down = (item, event) => execute_event("key_down", {code : event.keyCode});
|
||||
this.key_up = (item, event) => execute_event("key_up", {code : event.keyCode});
|
||||
|
||||
this.get_margins = () => {return {x : mx, y : my};};
|
||||
this.get_position = () => {return {x : position.x, y : position.y};};
|
||||
this.get_cells = () => c;
|
||||
this.get_canvas_distance = () => {return {x : dx, y : dy};};
|
||||
this.get_cell_size = () => s;
|
||||
|
||||
construct();
|
||||
|
||||
};
|
||||
4
Public/git_update.php
Executable file
4
Public/git_update.php
Executable file
@ -0,0 +1,4 @@
|
||||
<?php
|
||||
|
||||
header("content-type: text/plain");
|
||||
echo shell_exec("git pull 2>&1");
|
||||
BIN
Public/images/kanvas-180.png
Executable file
BIN
Public/images/kanvas-180.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
BIN
Public/images/kanvas-192.png
Executable file
BIN
Public/images/kanvas-192.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
BIN
Public/images/kanvas-270.png
Executable file
BIN
Public/images/kanvas-270.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
BIN
Public/images/kanvas-32.png
Executable file
BIN
Public/images/kanvas-32.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 7.7 KiB |
BIN
Public/images/kanvas-512.png
Executable file
BIN
Public/images/kanvas-512.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
BIN
Public/images/kanvas.png
Executable file
BIN
Public/images/kanvas.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
85
Public/test/index.html
Executable file
85
Public/test/index.html
Executable file
@ -0,0 +1,85 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<title>Kanvas - Test</title>
|
||||
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
|
||||
<meta charset="utf-8" />
|
||||
|
||||
<style data-type="text/css" data-language="CSS3" data-rel="stylesheet" charset="utf-8">
|
||||
|
||||
html,body{
|
||||
height : 100%;
|
||||
margin : 0px;
|
||||
}
|
||||
|
||||
body{overflow : hidden;}
|
||||
|
||||
.kanvas{
|
||||
position : absolute;
|
||||
top : 0px;
|
||||
left : 0px;
|
||||
width : 100%;
|
||||
height : 100%;
|
||||
}
|
||||
|
||||
.fps{
|
||||
position : absolute;
|
||||
top : 0px;
|
||||
right : 0px;
|
||||
margin : 10px;
|
||||
font-weight : 900;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script data-type="text/javascript" data-language="ECMAScript 2015" src="/ecma/version/20230707/Kanvas.ecma.js" data-crossorigin="anonymous" charset="utf-8"></script>
|
||||
|
||||
<script data-type="text/javascript" data-language="ECMAScript 2015" charset="utf-8">
|
||||
|
||||
kanvas = new Kanvas({
|
||||
position : "body",
|
||||
quality : 1,
|
||||
fps : 60
|
||||
});
|
||||
|
||||
kanvas.map.push(
|
||||
{type : "cache", name : "main_test", x : -20, y : -20, width : 40, height : 40, childs : [
|
||||
{type : "image", url : "/data/test/hqdefault.jpg", x : -10, y : -10, width : 20, height : 20, cut_x : 100, cut_width : 100, rotate : -15},
|
||||
{type : "rectangle", x : -2, y : -1, width : 4, height : 2, background : [0, 0, 4, 0, [
|
||||
[0, "#F00"],
|
||||
[1, "#00F"]
|
||||
]], rotate : 45, border_color : "#00F", childs : [
|
||||
{type : "rectangle", x : -.5, y : -.5, width : 1, height : 1, background : "#F88", rotate : -35, margin_x : 2, margin_y : 1}
|
||||
]},
|
||||
{type : "cache", name : "test_cache", childs : []}
|
||||
]},
|
||||
{type : "text", background : "#080", border_color : "#F00", text : "Hola, esto es una prueba xD", x : 20, y : 20, size : 5, baseline : "bottom", align : "right", shadow : [
|
||||
[0, 0, 5, "#000"],
|
||||
[1, 1, 2, "#800"]
|
||||
]}
|
||||
);
|
||||
|
||||
with(kanvas.map[1]){
|
||||
align = "left";
|
||||
baseline = "top";
|
||||
};
|
||||
|
||||
kanvas.on_ready.add(() => {
|
||||
|
||||
kanvas.threads_add(() => kanvas.map[1].text = kanvas.get_real_fps().toFixed(2));
|
||||
|
||||
kanvas.on_screen_change.add(() => {
|
||||
console.log("PASA");
|
||||
with(kanvas.map[1]){
|
||||
x = -kanvas.cells_x;
|
||||
y = -kanvas.cells_y;
|
||||
};
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body></body>
|
||||
</html>
|
||||
6
Public/wmd.php
Executable file
6
Public/wmd.php
Executable file
@ -0,0 +1,6 @@
|
||||
<?php
|
||||
|
||||
include __DIR__ . "/../../WMarkDown/PHP/include.php";
|
||||
include __DIR__ . "/../../Secrets/Kanvas.Secrets.php";
|
||||
|
||||
$wmd = new WMarkDown(Kanvas\Secrets::$settings);
|
||||
21
Public/wmd_scripts.php
Executable file
21
Public/wmd_scripts.php
Executable file
@ -0,0 +1,21 @@
|
||||
<?php
|
||||
|
||||
include __DIR__ . "/../../WMarkDown/PHP/include.php";
|
||||
include __DIR__ . "/../PHP/Kanvas.Secrets.php";
|
||||
|
||||
$wmd = new WMarkDown(array_merge([
|
||||
"action" => "update_scripts",
|
||||
"author" => "KyMAN",
|
||||
"project" => "Kanvas",
|
||||
"class" => "Kanvas",
|
||||
"object" => "kanvas",
|
||||
"url" => "https://kanvas.k3y.pw",
|
||||
"project_author" => "KyMAN",
|
||||
"key_words" => "kanvas,canvas,html,js,ecma,script,ecmascript,graphic,engine,library",
|
||||
"logo" => "/images/kanvas.png",
|
||||
"language" => "es",
|
||||
"wmd_file" => "/../WMarkDown/HTML/script.w.md",
|
||||
"wmd_file_empty" => "/../WMarkDown/HTML/file.w.md",
|
||||
"ignore_script_paths" => [],
|
||||
"only" => "/Public"
|
||||
], Kanvas\Secrets::wmarkdown));
|
||||
1
WMD/JSON/html.files.json
Executable file
1
WMD/JSON/html.files.json
Executable file
@ -0,0 +1 @@
|
||||
{"files":["\/mnt\/d\/git\/Kanvas\/Public\/es\/doc\/kanvas.quality.html","\/mnt\/d\/git\/Kanvas\/Public\/es\/doc\/kanvas.settings.html","\/mnt\/d\/git\/Kanvas\/Public\/es\/doc\/kanvas.starting.html","\/mnt\/d\/git\/Kanvas\/Public\/es\/doc\/kanvas.targets.html","\/mnt\/d\/git\/Kanvas\/Public\/es\/index.html","\/mnt\/d\/git\/Kanvas\/Public\/index.html"],"directories":["\/JSON","\/es","\/es\/doc"]}
|
||||
24
WMD/dev/ECMAScript/index.w.md
Executable file
24
WMD/dev/ECMAScript/index.w.md
Executable file
@ -0,0 +1,24 @@
|
||||
[[post_data {
|
||||
"author" : "KyMAN",
|
||||
"since" : 20211225,
|
||||
"version" : 20211225
|
||||
}]]
|
||||
# ECMAScript
|
||||
|
||||
[[header_level 0]]
|
||||
[[include /WMD/dev/Public/Kanvas.ecma.js.w.md]]
|
||||
|
||||
|
||||
|
||||
[[html_data {
|
||||
"title" : "ECMAScript - Kanvas",
|
||||
"url" : "https://kanvas.k3y.pw/dev/ECMAScript/index.html",
|
||||
"author" : "KyMAN",
|
||||
"since" : 20211225,
|
||||
"version" : 20211225,
|
||||
"key_words" : "kanvas,canvas,html,js,ecma,script,ecmascript,graphic,engine,library,developt,desarrollo,programación,ecmascript",
|
||||
"description" : "Parte ECMAScript del Kanvas.",
|
||||
"project" : "Kanvas",
|
||||
"logo" : "/images/kanvas.png",
|
||||
"language" : "es"
|
||||
}]]
|
||||
27
WMD/dev/PHP/index.w.md
Executable file
27
WMD/dev/PHP/index.w.md
Executable file
@ -0,0 +1,27 @@
|
||||
[[post_data {
|
||||
"author" : "KyMAN",
|
||||
"since" : 20211225,
|
||||
"version" : 20211225
|
||||
}]]
|
||||
# PHP
|
||||
|
||||
[[header_level 0]]
|
||||
[[include /WMD/dev/Public/wmd.php.w.md]]
|
||||
|
||||
[[header_level 0]]
|
||||
[[include /WMD/dev/Public/wmd_scripts.php.w.md]]
|
||||
|
||||
|
||||
|
||||
[[html_data {
|
||||
"title" : "PHP - Kanvas",
|
||||
"url" : "https://kanvas.k3y.pw/dev/PHP/index.html",
|
||||
"author" : "KyMAN",
|
||||
"since" : 20211225,
|
||||
"version" : 20211225,
|
||||
"key_words" : "kanvas,canvas,html,js,ecma,script,ecmascript,graphic,engine,library,developt,desarrollo,programación,php",
|
||||
"description" : "Parte PHP del Kanvas.",
|
||||
"project" : "Kanvas",
|
||||
"logo" : "/images/kanvas.png",
|
||||
"language" : "es"
|
||||
}]]
|
||||
958
WMD/dev/Public/Kanvas.ecma.js.w.md
Executable file
958
WMD/dev/Public/Kanvas.ecma.js.w.md
Executable file
@ -0,0 +1,958 @@
|
||||
[[post_data {
|
||||
"author" : "KyMAN",
|
||||
"since" : 20211225,
|
||||
"version" : 20211225
|
||||
}]]
|
||||
# Kanvas.ecma.js
|
||||
|
||||
```txt
|
||||
/Public/Kanvas.ecma.js
|
||||
```
|
||||
|
||||
## [[plain Kanvas.null_or_undefined]]
|
||||
|
||||
[[wdoc
|
||||
Método object.
|
||||
@name Kanvas.null_or_undefined
|
||||
@lang ECMAScript
|
||||
@author KyMAN
|
||||
@since 20211225
|
||||
@version 20211225
|
||||
@access public
|
||||
@hash 719d9b7663b42ce8e70a4b651eb27d92
|
||||
#value - optional Parámetro value
|
||||
#return - - Retorno.
|
||||
]]
|
||||
|
||||
## [[plain Kanvas.allow_nulls]]
|
||||
|
||||
[[wdoc
|
||||
Método object.
|
||||
@name Kanvas.allow_nulls
|
||||
@lang ECMAScript
|
||||
@author KyMAN
|
||||
@since 20211225
|
||||
@version 20211225
|
||||
@access public
|
||||
@hash a1c98a84d6d8b0b8f14fedd400bb007d
|
||||
#nulls - optional Parámetro nulls
|
||||
#return - - Retorno.
|
||||
]]
|
||||
|
||||
## [[plain Kanvas.default_value]]
|
||||
|
||||
[[wdoc
|
||||
Método object.
|
||||
@name Kanvas.default_value
|
||||
@see Kanvas.allow_nulls
|
||||
@lang ECMAScript
|
||||
@author KyMAN
|
||||
@since 20211225
|
||||
@version 20211225
|
||||
@access public
|
||||
@hash 6699f3c074ebd26160e6b3a8794c6493
|
||||
#_default - optional Parámetro _default
|
||||
#nulls - optional Parámetro nulls
|
||||
#return - - Retorno.
|
||||
]]
|
||||
|
||||
## [[plain Kanvas.settings]]
|
||||
|
||||
[[wdoc
|
||||
Método object.
|
||||
@name Kanvas.settings
|
||||
@see Kanvas.default_value
|
||||
@see Kanvas.allow_nulls
|
||||
@lang ECMAScript
|
||||
@author KyMAN
|
||||
@since 20211225
|
||||
@version 20211225
|
||||
@access public
|
||||
@hash c05780df830b296ef8a270d7fcadeb98
|
||||
#names - optional Parámetro names
|
||||
#inputs - optional Parámetro inputs
|
||||
#_default - optional Parámetro _default
|
||||
#nulls - optional Parámetro nulls
|
||||
#return - - Retorno.
|
||||
]]
|
||||
|
||||
## [[plain Kanvas.threads_function]]
|
||||
|
||||
[[wdoc
|
||||
Método object.
|
||||
@name Kanvas.threads_function
|
||||
@lang ECMAScript
|
||||
@author KyMAN
|
||||
@since 20211225
|
||||
@version 20211225
|
||||
@access private
|
||||
@hash 30f4ba8b76dce56fc41434dd6465f058
|
||||
#return - - Retorno.
|
||||
]]
|
||||
|
||||
## [[plain Kanvas.threads_start]]
|
||||
|
||||
[[wdoc
|
||||
Método object.
|
||||
@name Kanvas.threads_start
|
||||
@see Kanvas.settings
|
||||
@see Kanvas.threads_function
|
||||
@lang ECMAScript
|
||||
@author KyMAN
|
||||
@since 20211225
|
||||
@version 20211225
|
||||
@access public
|
||||
@hash cce23b880e33d3e85679d59e082812d8
|
||||
#frames_per_second - optional Parámetro frames_per_second
|
||||
]]
|
||||
|
||||
## [[plain Kanvas.threads_stop]]
|
||||
|
||||
[[wdoc
|
||||
Método object.
|
||||
@name Kanvas.threads_stop
|
||||
@lang ECMAScript
|
||||
@author KyMAN
|
||||
@since 20211225
|
||||
@version 20211225
|
||||
@access public
|
||||
@hash 628fab132ecb593ed3accbec9427a6ea
|
||||
]]
|
||||
|
||||
## [[plain Kanvas.threads_add]]
|
||||
|
||||
[[wdoc
|
||||
Método object.
|
||||
@name Kanvas.threads_add
|
||||
@lang ECMAScript
|
||||
@author KyMAN
|
||||
@since 20211225
|
||||
@version 20211225
|
||||
@access public
|
||||
@hash 98547e004e14d60c8577718368ffe69e
|
||||
#callback - optional Parámetro callback
|
||||
#return - - Retorno.
|
||||
]]
|
||||
|
||||
## [[plain Kanvas.threads_remove]]
|
||||
|
||||
[[wdoc
|
||||
Método object.
|
||||
@name Kanvas.threads_remove
|
||||
@lang ECMAScript
|
||||
@author KyMAN
|
||||
@since 20211225
|
||||
@version 20211225
|
||||
@access public
|
||||
@hash a73d5bb9c37dd290aef7f312f8fa2c81
|
||||
#i - optional Parámetro i
|
||||
]]
|
||||
|
||||
## [[plain Kanvas.is_html_object]]
|
||||
|
||||
[[wdoc
|
||||
Método object.
|
||||
@name Kanvas.is_html_object
|
||||
@lang ECMAScript
|
||||
@author KyMAN
|
||||
@since 20211225
|
||||
@version 20211225
|
||||
@access public
|
||||
@hash f8cca6ce9a87f4ddf2c68884218d1c12
|
||||
#variable - optional Parámetro variable
|
||||
#return - - Retorno.
|
||||
]]
|
||||
|
||||
## [[plain Kanvas.preload]]
|
||||
|
||||
[[wdoc
|
||||
Método object.
|
||||
@name Kanvas.preload
|
||||
@see Kanvas.is_html_object
|
||||
@see Kanvas.settings
|
||||
@see Kanvas.threads_add
|
||||
@see Kanvas.threads_remove
|
||||
@lang ECMAScript
|
||||
@author KyMAN
|
||||
@since 20211225
|
||||
@version 20211225
|
||||
@access public
|
||||
@hash b6298d139217967603995bbc155fa81b
|
||||
#selector - optional Parámetro selector
|
||||
#callback - optional Parámetro callback
|
||||
]]
|
||||
|
||||
## [[plain Kanvas.hash]]
|
||||
|
||||
[[wdoc
|
||||
Método object.
|
||||
@name Kanvas.hash
|
||||
@see Kanvas.settings
|
||||
@lang ECMAScript
|
||||
@author KyMAN
|
||||
@since 20211225
|
||||
@version 20211225
|
||||
@access public
|
||||
@hash cbd619e186a3b4cc88e42b48092e138a
|
||||
#return - - Retorno.
|
||||
]]
|
||||
|
||||
## [[plain Kanvas.set_attribute]]
|
||||
|
||||
[[wdoc
|
||||
Método object.
|
||||
@name Kanvas.set_attribute
|
||||
@see Kanvas.is_html_object
|
||||
@lang ECMAScript
|
||||
@author KyMAN
|
||||
@since 20211225
|
||||
@version 20211225
|
||||
@access public
|
||||
@hash 66c62f05275a277af2cae6fa0ce15bec
|
||||
#item - optional Parámetro item
|
||||
#custom_attributes - optional Parámetro custom_attributes
|
||||
]]
|
||||
|
||||
## [[plain Kanvas.construct]]
|
||||
|
||||
[[wdoc
|
||||
Método object.
|
||||
@name Kanvas.construct
|
||||
@see Kanvas.settings
|
||||
@lang ECMAScript
|
||||
@author KyMAN
|
||||
@since 20211225
|
||||
@version 20211225
|
||||
@access private
|
||||
@hash 37628051533825ee303450db783c043e
|
||||
]]
|
||||
|
||||
## [[plain Kanvas.range_analyze]]
|
||||
|
||||
[[wdoc
|
||||
Método object.
|
||||
@name Kanvas.range_analyze
|
||||
@lang ECMAScript
|
||||
@author KyMAN
|
||||
@since 20211225
|
||||
@version 20211225
|
||||
@access private
|
||||
@hash b70d0d7c55cff052650f923dfff238cf
|
||||
#range - optional Parámetro range
|
||||
#return - - Retorno.
|
||||
]]
|
||||
|
||||
## [[plain Kanvas.on_resize_method]]
|
||||
|
||||
[[wdoc
|
||||
Método object.
|
||||
@name Kanvas.on_resize_method
|
||||
@lang ECMAScript
|
||||
@author KyMAN
|
||||
@since 20211225
|
||||
@version 20211225
|
||||
@access private
|
||||
@hash a76d2493ecfc4e769f416dbf0b6512b3
|
||||
#screen - optional Parámetro screen
|
||||
]]
|
||||
|
||||
## [[plain Kanvas.position_set]]
|
||||
|
||||
[[wdoc
|
||||
Método object.
|
||||
@name Kanvas.position_set
|
||||
@see Kanvas.settings
|
||||
@lang ECMAScript
|
||||
@author KyMAN
|
||||
@since 20211225
|
||||
@version 20211225
|
||||
@access private
|
||||
@hash a5797156cb2c84f1be97d89806ec8ea8
|
||||
]]
|
||||
|
||||
## [[plain Kanvas.start]]
|
||||
|
||||
[[wdoc
|
||||
Método object.
|
||||
@name Kanvas.start
|
||||
@see Kanvas.settings
|
||||
@see Kanvas.position_set
|
||||
@see Kanvas.threads_start
|
||||
@see Kanvas.preload
|
||||
@see Kanvas.hash
|
||||
@see Kanvas.set_attribute
|
||||
@lang ECMAScript
|
||||
@author KyMAN
|
||||
@since 20211225
|
||||
@version 20211225
|
||||
@access public
|
||||
@hash c5c42914486aa98c690dfee43cf0022b
|
||||
]]
|
||||
|
||||
## [[plain Kanvas.draw]]
|
||||
|
||||
[[wdoc
|
||||
Método object.
|
||||
@name Kanvas.draw
|
||||
@see Kanvas.draw
|
||||
@lang ECMAScript
|
||||
@author KyMAN
|
||||
@since 20211225
|
||||
@version 20211225
|
||||
@access public
|
||||
@hash 3e0658a54766de9a8b226dff8e290b09
|
||||
#map - optional Parámetro map
|
||||
#context - optional Parámetro context
|
||||
]]
|
||||
|
||||
## [[plain Kanvas.refresh_draw]]
|
||||
|
||||
[[wdoc
|
||||
Método object.
|
||||
@name Kanvas.refresh_draw
|
||||
@see Kanvas.draw
|
||||
@lang ECMAScript
|
||||
@author KyMAN
|
||||
@since 20211225
|
||||
@version 20211225
|
||||
@access private
|
||||
@hash 13eb2f6574df5ab6d8a4b042ad90f347
|
||||
]]
|
||||
|
||||
## [[plain Kanvas.thread_method]]
|
||||
|
||||
[[wdoc
|
||||
Método object.
|
||||
@name Kanvas.thread_method
|
||||
@see Kanvas.refresh_draw
|
||||
@lang ECMAScript
|
||||
@author KyMAN
|
||||
@since 20211225
|
||||
@version 20211225
|
||||
@access private
|
||||
@hash af433469fec83091580ca5ada20b6bb9
|
||||
]]
|
||||
|
||||
## [[plain Kanvas.value]]
|
||||
|
||||
[[wdoc
|
||||
Método object.
|
||||
@name Kanvas.value
|
||||
@lang ECMAScript
|
||||
@author KyMAN
|
||||
@since 20211225
|
||||
@version 20211225
|
||||
@access public
|
||||
@hash f5494430f37abdc8690b52732565c629
|
||||
#value - optional Parámetro value
|
||||
#quality - optional Parámetro quality
|
||||
#return - - Retorno.
|
||||
]]
|
||||
|
||||
## [[plain Kanvas._x]]
|
||||
|
||||
[[wdoc
|
||||
Método object.
|
||||
@name Kanvas._x
|
||||
@lang ECMAScript
|
||||
@author KyMAN
|
||||
@since 20211225
|
||||
@version 20211225
|
||||
@access public
|
||||
@hash 559ab3da3b95bf8d10a31f3d719b2ea1
|
||||
#value - optional Parámetro value
|
||||
#return - - Retorno.
|
||||
]]
|
||||
|
||||
## [[plain Kanvas._y]]
|
||||
|
||||
[[wdoc
|
||||
Método object.
|
||||
@name Kanvas._y
|
||||
@lang ECMAScript
|
||||
@author KyMAN
|
||||
@since 20211225
|
||||
@version 20211225
|
||||
@access public
|
||||
@hash 559ab3da3b95bf8d10a31f3d719b2ea1
|
||||
#value - optional Parámetro value
|
||||
#return - - Retorno.
|
||||
]]
|
||||
|
||||
## [[plain Kanvas.cache_set]]
|
||||
|
||||
[[wdoc
|
||||
Método object.
|
||||
@name Kanvas.cache_set
|
||||
@lang ECMAScript
|
||||
@author KyMAN
|
||||
@since 20211225
|
||||
@version 20211225
|
||||
@access public
|
||||
@hash 603f76ca5fda76d86b5be256077b25e9
|
||||
#item - optional Parámetro item
|
||||
#return - - Retorno.
|
||||
]]
|
||||
|
||||
## [[plain Kanvas.get_new_cache_i]]
|
||||
|
||||
[[wdoc
|
||||
Método object.
|
||||
@name Kanvas.get_new_cache_i
|
||||
@see Kanvas.cache_set
|
||||
@lang ECMAScript
|
||||
@author KyMAN
|
||||
@since 20211225
|
||||
@version 20211225
|
||||
@access private
|
||||
@hash b0d2a1389083540a4357d495c5f0d08c
|
||||
#item - optional Parámetro item
|
||||
#return - - Retorno.
|
||||
]]
|
||||
|
||||
## [[plain Kanvas.cache_clean]]
|
||||
|
||||
[[wdoc
|
||||
Método object.
|
||||
@name Kanvas.cache_clean
|
||||
@lang ECMAScript
|
||||
@author KyMAN
|
||||
@since 20211225
|
||||
@version 20211225
|
||||
@access public
|
||||
@hash a2b63581e6003dd7d145d86349ed146c
|
||||
#i - optional Parámetro i
|
||||
]]
|
||||
|
||||
## [[plain Kanvas.preload_cache_items]]
|
||||
|
||||
[[wdoc
|
||||
Método object.
|
||||
@name Kanvas.preload_cache_items
|
||||
@see Kanvas.preload_cache_items
|
||||
@lang ECMAScript
|
||||
@author KyMAN
|
||||
@since 20211225
|
||||
@version 20211225
|
||||
@access public
|
||||
@hash 9828faf1c71dd7d96543e60c7b9b9aea
|
||||
#items - optional Parámetro items
|
||||
#callback_per_item - optional Parámetro callback_per_item
|
||||
#callback - optional Parámetro callback
|
||||
]]
|
||||
|
||||
## [[plain Kanvas.angle]]
|
||||
|
||||
[[wdoc
|
||||
Método object.
|
||||
@name Kanvas.angle
|
||||
@lang ECMAScript
|
||||
@author KyMAN
|
||||
@since 20211225
|
||||
@version 20211225
|
||||
@access public
|
||||
@hash f80170728f63e977a7b75020e9a2efb1
|
||||
#x - optional Parámetro x
|
||||
#y - optional Parámetro y
|
||||
#randians - optional Parámetro randians
|
||||
#return - - Retorno.
|
||||
]]
|
||||
|
||||
## [[plain Kanvas.shadow]]
|
||||
|
||||
[[wdoc
|
||||
Método object.
|
||||
@name Kanvas.shadow
|
||||
@see Kanvas.settings
|
||||
@lang ECMAScript
|
||||
@author KyMAN
|
||||
@since 20211225
|
||||
@version 20211225
|
||||
@access private
|
||||
@hash 3e5838dd96848e07e9ec73496e08c62f
|
||||
#data - optional Parámetro data
|
||||
#context - optional Parámetro context
|
||||
]]
|
||||
|
||||
## [[plain Kanvas.border]]
|
||||
|
||||
[[wdoc
|
||||
Método object.
|
||||
@name Kanvas.border
|
||||
@see Kanvas.settings
|
||||
@lang ECMAScript
|
||||
@author KyMAN
|
||||
@since 20211225
|
||||
@version 20211225
|
||||
@access private
|
||||
@hash fab5ac8f9418215b319a17e166843729
|
||||
#data - optional Parámetro data
|
||||
#context - optional Parámetro context
|
||||
]]
|
||||
|
||||
## [[plain Kanvas.draw_image]]
|
||||
|
||||
[[wdoc
|
||||
Método object.
|
||||
@name Kanvas.draw_image
|
||||
@see Kanvas.settings
|
||||
@see Kanvas._x
|
||||
@see Kanvas._y
|
||||
@lang ECMAScript
|
||||
@author KyMAN
|
||||
@since 20211225
|
||||
@version 20211225
|
||||
@access private
|
||||
@hash 109a8296cc4383971af7cc4bd13b46b5
|
||||
]]
|
||||
|
||||
## [[plain Kanvas.add_components]]
|
||||
|
||||
[[wdoc
|
||||
Método object.
|
||||
@name Kanvas.add_components
|
||||
@see Kanvas.settings
|
||||
@see Kanvas.add_components
|
||||
@lang ECMAScript
|
||||
@author KyMAN
|
||||
@since 20211225
|
||||
@version 20211225
|
||||
@access public
|
||||
@hash f55803884eb16241230454adbefa6c6b
|
||||
#json - optional Parámetro json
|
||||
#overwrite - optional Parámetro overwrite
|
||||
]]
|
||||
|
||||
## [[plain Kanvas.check_mouse]]
|
||||
|
||||
[[wdoc
|
||||
Método object.
|
||||
@name Kanvas.check_mouse
|
||||
@lang ECMAScript
|
||||
@author KyMAN
|
||||
@since 20211225
|
||||
@version 20211225
|
||||
@access public
|
||||
@hash 876b893e02510899ca548c73f0adfe56
|
||||
#item - optional Parámetro item
|
||||
#event - optional Parámetro event
|
||||
]]
|
||||
|
||||
## [[plain Kanvas.on_event]]
|
||||
|
||||
[[wdoc
|
||||
Método object.
|
||||
@name Kanvas.on_event
|
||||
@lang ECMAScript
|
||||
@author KyMAN
|
||||
@since 20211225
|
||||
@version 20211225
|
||||
@access public
|
||||
@hash 686ebb7d44d117801dc85b8a30b0bf57
|
||||
#name - optional Parámetro name
|
||||
#method - optional Parámetro method
|
||||
#range - optional Parámetro range
|
||||
#return - - Retorno.
|
||||
]]
|
||||
|
||||
## [[plain Kanvas.remove_event]]
|
||||
|
||||
[[wdoc
|
||||
Método object.
|
||||
@name Kanvas.remove_event
|
||||
@lang ECMAScript
|
||||
@author KyMAN
|
||||
@since 20211225
|
||||
@version 20211225
|
||||
@access public
|
||||
@hash ca7e3e68240c00374b401e488407f8d6
|
||||
#name - optional Parámetro name
|
||||
#i - optional Parámetro i
|
||||
]]
|
||||
|
||||
## [[plain Kanvas.execute_event]]
|
||||
|
||||
[[wdoc
|
||||
Método object.
|
||||
@name Kanvas.execute_event
|
||||
@see Kanvas.range_analyze
|
||||
@lang ECMAScript
|
||||
@author KyMAN
|
||||
@since 20211225
|
||||
@version 20211225
|
||||
@access public
|
||||
@hash 33c8ba6d8e6f32c4c4da1dd60db07513
|
||||
#name - optional Parámetro name
|
||||
#input - optional Parámetro input
|
||||
]]
|
||||
|
||||
## [[plain Kanvas.event_range]]
|
||||
|
||||
[[wdoc
|
||||
Método object.
|
||||
@name Kanvas.event_range
|
||||
@lang ECMAScript
|
||||
@author KyMAN
|
||||
@since 20211225
|
||||
@version 20211225
|
||||
@access public
|
||||
@hash e4b8585c6a74d2b41538b1774d2fee40
|
||||
#name - optional Parámetro name
|
||||
#i - optional Parámetro i
|
||||
#return - - Retorno.
|
||||
]]
|
||||
|
||||
## [[plain Kanvas.on_mouse_move]]
|
||||
|
||||
[[wdoc
|
||||
Método object.
|
||||
@name Kanvas.on_mouse_move
|
||||
@see Kanvas.on_event
|
||||
@lang ECMAScript
|
||||
@author KyMAN
|
||||
@since 20211225
|
||||
@version 20211225
|
||||
@access public
|
||||
@hash e40de2381f36b3c9d8312d6ef8a762f2
|
||||
#method - optional Parámetro method
|
||||
#range - optional Parámetro range
|
||||
#return - - Retorno.
|
||||
]]
|
||||
|
||||
## [[plain Kanvas.on_resize]]
|
||||
|
||||
[[wdoc
|
||||
Método object.
|
||||
@name Kanvas.on_resize
|
||||
@see Kanvas.on_event
|
||||
@lang ECMAScript
|
||||
@author KyMAN
|
||||
@since 20211225
|
||||
@version 20211225
|
||||
@access public
|
||||
@hash b006e249f4d5adf74d0f7ec45978c1f2
|
||||
#method - optional Parámetro method
|
||||
#range - optional Parámetro range
|
||||
#return - - Retorno.
|
||||
]]
|
||||
|
||||
## [[plain Kanvas.on_click]]
|
||||
|
||||
[[wdoc
|
||||
Método object.
|
||||
@name Kanvas.on_click
|
||||
@see Kanvas.on_event
|
||||
@lang ECMAScript
|
||||
@author KyMAN
|
||||
@since 20211225
|
||||
@version 20211225
|
||||
@access public
|
||||
@hash 85d6ad332ff2ceb5cbca13e4546ed361
|
||||
#method - optional Parámetro method
|
||||
#range - optional Parámetro range
|
||||
#return - - Retorno.
|
||||
]]
|
||||
|
||||
## [[plain Kanvas.on_key_down]]
|
||||
|
||||
[[wdoc
|
||||
Método object.
|
||||
@name Kanvas.on_key_down
|
||||
@see Kanvas.on_event
|
||||
@lang ECMAScript
|
||||
@author KyMAN
|
||||
@since 20211225
|
||||
@version 20211225
|
||||
@access public
|
||||
@hash 79025f1cdcb67186db97d1132bb43e62
|
||||
#method - optional Parámetro method
|
||||
#range - optional Parámetro range
|
||||
#return - - Retorno.
|
||||
]]
|
||||
|
||||
## [[plain Kanvas.on_key_up]]
|
||||
|
||||
[[wdoc
|
||||
Método object.
|
||||
@name Kanvas.on_key_up
|
||||
@see Kanvas.on_event
|
||||
@lang ECMAScript
|
||||
@author KyMAN
|
||||
@since 20211225
|
||||
@version 20211225
|
||||
@access public
|
||||
@hash 73067b92317dc0f59adbd3eab025ca50
|
||||
#method - optional Parámetro method
|
||||
#range - optional Parámetro range
|
||||
#return - - Retorno.
|
||||
]]
|
||||
|
||||
## [[plain Kanvas.remove_mouse_move]]
|
||||
|
||||
[[wdoc
|
||||
Método object.
|
||||
@name Kanvas.remove_mouse_move
|
||||
@see Kanvas.remove_event
|
||||
@lang ECMAScript
|
||||
@author KyMAN
|
||||
@since 20211225
|
||||
@version 20211225
|
||||
@access public
|
||||
@hash 2adc625bafbab06d1d6385aab844693c
|
||||
#i - optional Parámetro i
|
||||
]]
|
||||
|
||||
## [[plain Kanvas.remove_resize]]
|
||||
|
||||
[[wdoc
|
||||
Método object.
|
||||
@name Kanvas.remove_resize
|
||||
@see Kanvas.remove_event
|
||||
@lang ECMAScript
|
||||
@author KyMAN
|
||||
@since 20211225
|
||||
@version 20211225
|
||||
@access public
|
||||
@hash f0192c53117c1b3e57ec834096136ad2
|
||||
#i - optional Parámetro i
|
||||
]]
|
||||
|
||||
## [[plain Kanvas.remove_click]]
|
||||
|
||||
[[wdoc
|
||||
Método object.
|
||||
@name Kanvas.remove_click
|
||||
@see Kanvas.remove_event
|
||||
@lang ECMAScript
|
||||
@author KyMAN
|
||||
@since 20211225
|
||||
@version 20211225
|
||||
@access public
|
||||
@hash 696c4277e38f06fae1fd0781622bad53
|
||||
#i - optional Parámetro i
|
||||
]]
|
||||
|
||||
## [[plain Kanvas.remove_key_down]]
|
||||
|
||||
[[wdoc
|
||||
Método object.
|
||||
@name Kanvas.remove_key_down
|
||||
@see Kanvas.remove_event
|
||||
@lang ECMAScript
|
||||
@author KyMAN
|
||||
@since 20211225
|
||||
@version 20211225
|
||||
@access public
|
||||
@hash 63b0a8449fb2a64a6c272aaca90c429b
|
||||
#i - optional Parámetro i
|
||||
]]
|
||||
|
||||
## [[plain Kanvas.remove_key_up]]
|
||||
|
||||
[[wdoc
|
||||
Método object.
|
||||
@name Kanvas.remove_key_up
|
||||
@see Kanvas.remove_event
|
||||
@lang ECMAScript
|
||||
@author KyMAN
|
||||
@since 20211225
|
||||
@version 20211225
|
||||
@access public
|
||||
@hash 8b8f69cc65cec69309d7bbee875c877b
|
||||
#i - optional Parámetro i
|
||||
]]
|
||||
|
||||
## [[plain Kanvas.range_mouse_move]]
|
||||
|
||||
[[wdoc
|
||||
Método object.
|
||||
@name Kanvas.range_mouse_move
|
||||
@see Kanvas.event_range
|
||||
@lang ECMAScript
|
||||
@author KyMAN
|
||||
@since 20211225
|
||||
@version 20211225
|
||||
@access public
|
||||
@hash 7496d8ac7ff8f0b4f0a406317732b4a4
|
||||
#i - optional Parámetro i
|
||||
#return - - Retorno.
|
||||
]]
|
||||
|
||||
## [[plain Kanvas.range_resize]]
|
||||
|
||||
[[wdoc
|
||||
Método object.
|
||||
@name Kanvas.range_resize
|
||||
@see Kanvas.event_range
|
||||
@lang ECMAScript
|
||||
@author KyMAN
|
||||
@since 20211225
|
||||
@version 20211225
|
||||
@access public
|
||||
@hash 5f48d71ce7258c7d8f9c35a6ff24ce9c
|
||||
#i - optional Parámetro i
|
||||
#return - - Retorno.
|
||||
]]
|
||||
|
||||
## [[plain Kanvas.range_click]]
|
||||
|
||||
[[wdoc
|
||||
Método object.
|
||||
@name Kanvas.range_click
|
||||
@see Kanvas.event_range
|
||||
@lang ECMAScript
|
||||
@author KyMAN
|
||||
@since 20211225
|
||||
@version 20211225
|
||||
@access public
|
||||
@hash 4dcfaba4ec9eb40c29226dd21f2b3fbc
|
||||
#i - optional Parámetro i
|
||||
#return - - Retorno.
|
||||
]]
|
||||
|
||||
## [[plain Kanvas.range_key_down]]
|
||||
|
||||
[[wdoc
|
||||
Método object.
|
||||
@name Kanvas.range_key_down
|
||||
@see Kanvas.event_range
|
||||
@lang ECMAScript
|
||||
@author KyMAN
|
||||
@since 20211225
|
||||
@version 20211225
|
||||
@access public
|
||||
@hash 8da99fdb35bb1906c7f00a41ad9ad26d
|
||||
#i - optional Parámetro i
|
||||
#return - - Retorno.
|
||||
]]
|
||||
|
||||
## [[plain Kanvas.range_key_up]]
|
||||
|
||||
[[wdoc
|
||||
Método object.
|
||||
@name Kanvas.range_key_up
|
||||
@see Kanvas.event_range
|
||||
@lang ECMAScript
|
||||
@author KyMAN
|
||||
@since 20211225
|
||||
@version 20211225
|
||||
@access public
|
||||
@hash c628c7bef3b981fb42437f6de0e44ab8
|
||||
#i - optional Parámetro i
|
||||
#return - - Retorno.
|
||||
]]
|
||||
|
||||
## [[plain Kanvas.key_down]]
|
||||
|
||||
[[wdoc
|
||||
Método object.
|
||||
@name Kanvas.key_down
|
||||
@see Kanvas.execute_event
|
||||
@lang ECMAScript
|
||||
@author KyMAN
|
||||
@since 20211225
|
||||
@version 20211225
|
||||
@access public
|
||||
@hash 15ee3af73279aa7b18e41c157a0acdea
|
||||
#item - optional Parámetro item
|
||||
#event - optional Parámetro event
|
||||
]]
|
||||
|
||||
## [[plain Kanvas.key_up]]
|
||||
|
||||
[[wdoc
|
||||
Método object.
|
||||
@name Kanvas.key_up
|
||||
@see Kanvas.execute_event
|
||||
@lang ECMAScript
|
||||
@author KyMAN
|
||||
@since 20211225
|
||||
@version 20211225
|
||||
@access public
|
||||
@hash 426a68043d1c42008c39defe498dfe0e
|
||||
#item - optional Parámetro item
|
||||
#event - optional Parámetro event
|
||||
]]
|
||||
|
||||
## [[plain Kanvas.get_margins]]
|
||||
|
||||
[[wdoc
|
||||
Método object.
|
||||
@name Kanvas.get_margins
|
||||
@lang ECMAScript
|
||||
@author KyMAN
|
||||
@since 20211225
|
||||
@version 20211225
|
||||
@access public
|
||||
@hash e5aa5d927b4260ab1e6a8a4616b7cc8e
|
||||
#return - - Retorno.
|
||||
]]
|
||||
|
||||
## [[plain Kanvas.get_position]]
|
||||
|
||||
[[wdoc
|
||||
Método object.
|
||||
@name Kanvas.get_position
|
||||
@lang ECMAScript
|
||||
@author KyMAN
|
||||
@since 20211225
|
||||
@version 20211225
|
||||
@access public
|
||||
@hash 041721aebc4ba3428c96418025f07272
|
||||
#return - - Retorno.
|
||||
]]
|
||||
|
||||
## [[plain Kanvas.get_cells]]
|
||||
|
||||
[[wdoc
|
||||
Método object.
|
||||
@name Kanvas.get_cells
|
||||
@lang ECMAScript
|
||||
@author KyMAN
|
||||
@since 20211225
|
||||
@version 20211225
|
||||
@access public
|
||||
@hash d6b5083d8473799c6af510fdc459245d
|
||||
#return - - Retorno.
|
||||
]]
|
||||
|
||||
## [[plain Kanvas.get_canvas_distance]]
|
||||
|
||||
[[wdoc
|
||||
Método object.
|
||||
@name Kanvas.get_canvas_distance
|
||||
@lang ECMAScript
|
||||
@author KyMAN
|
||||
@since 20211225
|
||||
@version 20211225
|
||||
@access public
|
||||
@hash 22d705933b1771eed6a395154a1cff24
|
||||
#return - - Retorno.
|
||||
]]
|
||||
|
||||
## [[plain Kanvas.get_cell_size]]
|
||||
|
||||
[[wdoc
|
||||
Método object.
|
||||
@name Kanvas.get_cell_size
|
||||
@lang ECMAScript
|
||||
@author KyMAN
|
||||
@since 20211225
|
||||
@version 20211225
|
||||
@access public
|
||||
@hash b63b90521c2f76ea0c361fea33c23769
|
||||
#return - - Retorno.
|
||||
]]
|
||||
|
||||
[[html_data {
|
||||
"title" : "Kanvas.ecma.js - Kanvas",
|
||||
"url" : "https://kanvas.k3y.pw/Public/Kanvas.ecma.js.html",
|
||||
"author" : "KyMAN",
|
||||
"since" : 20211225,
|
||||
"version" : 20211225,
|
||||
"key_words" : "kanvas,canvas,html,js,ecma,script,ecmascript,graphic,engine,library,developt,desarrollo,programación,cma",
|
||||
"description" : "Kanvas.ecma.js del Kanvas.",
|
||||
"project" : "Kanvas",
|
||||
"logo" : "/images/kanvas.png",
|
||||
"language" : "es"
|
||||
}]]
|
||||
23
WMD/dev/Public/wmd.php.w.md
Executable file
23
WMD/dev/Public/wmd.php.w.md
Executable file
@ -0,0 +1,23 @@
|
||||
[[post_data {
|
||||
"author" : "KyMAN",
|
||||
"since" : 20211225,
|
||||
"version" : 20211225
|
||||
}]]
|
||||
# wmd.php
|
||||
|
||||
```txt
|
||||
/Public/wmd.php
|
||||
```
|
||||
|
||||
[[html_data {
|
||||
"title" : "wmd.php - Kanvas",
|
||||
"url" : "https://kanvas.k3y.pw/Public/wmd.php.html",
|
||||
"author" : "KyMAN",
|
||||
"since" : 20211225,
|
||||
"version" : 20211225,
|
||||
"key_words" : "kanvas,canvas,html,js,ecma,script,ecmascript,graphic,engine,library,developt,desarrollo,programación,main",
|
||||
"description" : "wmd.php del Kanvas.",
|
||||
"project" : "Kanvas",
|
||||
"logo" : "/images/kanvas.png",
|
||||
"language" : "es"
|
||||
}]]
|
||||
23
WMD/dev/Public/wmd_scripts.php.w.md
Executable file
23
WMD/dev/Public/wmd_scripts.php.w.md
Executable file
@ -0,0 +1,23 @@
|
||||
[[post_data {
|
||||
"author" : "KyMAN",
|
||||
"since" : 20211225,
|
||||
"version" : 20211225
|
||||
}]]
|
||||
# wmd_scripts.php
|
||||
|
||||
```txt
|
||||
/Public/wmd_scripts.php
|
||||
```
|
||||
|
||||
[[html_data {
|
||||
"title" : "wmd_scripts.php - Kanvas",
|
||||
"url" : "https://kanvas.k3y.pw/Public/wmd_scripts.php.html",
|
||||
"author" : "KyMAN",
|
||||
"since" : 20211225,
|
||||
"version" : 20211225,
|
||||
"key_words" : "kanvas,canvas,html,js,ecma,script,ecmascript,graphic,engine,library,developt,desarrollo,programación,main",
|
||||
"description" : "wmd_scripts.php del Kanvas.",
|
||||
"project" : "Kanvas",
|
||||
"logo" : "/images/kanvas.png",
|
||||
"language" : "es"
|
||||
}]]
|
||||
89
WMD/dev/index.w.md
Executable file
89
WMD/dev/index.w.md
Executable file
@ -0,0 +1,89 @@
|
||||
[[post_data {
|
||||
"author" : "KyMAN",
|
||||
"since" : 20211225,
|
||||
"version" : 20211225
|
||||
}]]
|
||||
|
||||
# ECMAScript
|
||||
|
||||
- [/dev/ECMAScript#Kanvas-ecma-js-2 /Public/Kanvas.ecma.js]
|
||||
- [/dev/ECMAScript#Kanvas-null-or-undefined-2 Kanvas.null\_or\_undefined]
|
||||
- [/dev/ECMAScript#Kanvas-allow-nulls-2 Kanvas.allow\_nulls]
|
||||
- [/dev/ECMAScript#Kanvas-default-value-2 Kanvas.default\_value]
|
||||
- [/dev/ECMAScript#Kanvas-settings-2 Kanvas.settings]
|
||||
- [/dev/ECMAScript#Kanvas-threads-function-2 Kanvas.threads\_function]
|
||||
- [/dev/ECMAScript#Kanvas-threads-start-2 Kanvas.threads\_start]
|
||||
- [/dev/ECMAScript#Kanvas-threads-stop-2 Kanvas.threads\_stop]
|
||||
- [/dev/ECMAScript#Kanvas-threads-add-2 Kanvas.threads\_add]
|
||||
- [/dev/ECMAScript#Kanvas-threads-remove-2 Kanvas.threads\_remove]
|
||||
- [/dev/ECMAScript#Kanvas-is-html-object-2 Kanvas.is\_html\_object]
|
||||
- [/dev/ECMAScript#Kanvas-preload-2 Kanvas.preload]
|
||||
- [/dev/ECMAScript#Kanvas-hash-2 Kanvas.hash]
|
||||
- [/dev/ECMAScript#Kanvas-set-attribute-2 Kanvas.set\_attribute]
|
||||
- [/dev/ECMAScript#Kanvas-construct-2 Kanvas.construct]
|
||||
- [/dev/ECMAScript#Kanvas-range-analyze-2 Kanvas.range\_analyze]
|
||||
- [/dev/ECMAScript#Kanvas-on-resize-method-2 Kanvas.on\_resize\_method]
|
||||
- [/dev/ECMAScript#Kanvas-position-set-2 Kanvas.position\_set]
|
||||
- [/dev/ECMAScript#Kanvas-start-2 Kanvas.start]
|
||||
- [/dev/ECMAScript#Kanvas-draw-2 Kanvas.draw]
|
||||
- [/dev/ECMAScript#Kanvas-refresh-draw-2 Kanvas.refresh\_draw]
|
||||
- [/dev/ECMAScript#Kanvas-thread-method-2 Kanvas.thread\_method]
|
||||
- [/dev/ECMAScript#Kanvas-value-2 Kanvas.value]
|
||||
- [/dev/ECMAScript#Kanvas-x-2 Kanvas.\_x]
|
||||
- [/dev/ECMAScript#Kanvas-y-2 Kanvas.\_y]
|
||||
- [/dev/ECMAScript#Kanvas-cache-set-2 Kanvas.cache\_set]
|
||||
- [/dev/ECMAScript#Kanvas-get-new-cache-i-2 Kanvas.get\_new\_cache\_i]
|
||||
- [/dev/ECMAScript#Kanvas-cache-clean-2 Kanvas.cache\_clean]
|
||||
- [/dev/ECMAScript#Kanvas-preload-cache-items-2 Kanvas.preload\_cache\_items]
|
||||
- [/dev/ECMAScript#Kanvas-preload-cache-items-2 Kanvas.preload\_cache\_items]
|
||||
- [/dev/ECMAScript#Kanvas-angle-2 Kanvas.angle]
|
||||
- [/dev/ECMAScript#Kanvas-shadow-2 Kanvas.shadow]
|
||||
- [/dev/ECMAScript#Kanvas-border-2 Kanvas.border]
|
||||
- [/dev/ECMAScript#Kanvas-draw-image-2 Kanvas.draw\_image]
|
||||
- [/dev/ECMAScript#Kanvas-add-components-2 Kanvas.add\_components]
|
||||
- [/dev/ECMAScript#Kanvas-check-mouse-2 Kanvas.check\_mouse]
|
||||
- [/dev/ECMAScript#Kanvas-on-event-2 Kanvas.on\_event]
|
||||
- [/dev/ECMAScript#Kanvas-remove-event-2 Kanvas.remove\_event]
|
||||
- [/dev/ECMAScript#Kanvas-execute-event-2 Kanvas.execute\_event]
|
||||
- [/dev/ECMAScript#Kanvas-event-range-2 Kanvas.event\_range]
|
||||
- [/dev/ECMAScript#Kanvas-on-mouse-move-2 Kanvas.on\_mouse\_move]
|
||||
- [/dev/ECMAScript#Kanvas-on-resize-2 Kanvas.on\_resize]
|
||||
- [/dev/ECMAScript#Kanvas-on-click-2 Kanvas.on\_click]
|
||||
- [/dev/ECMAScript#Kanvas-on-key-down-2 Kanvas.on\_key\_down]
|
||||
- [/dev/ECMAScript#Kanvas-on-key-up-2 Kanvas.on\_key\_up]
|
||||
- [/dev/ECMAScript#Kanvas-remove-mouse-move-2 Kanvas.remove\_mouse\_move]
|
||||
- [/dev/ECMAScript#Kanvas-remove-resize-2 Kanvas.remove\_resize]
|
||||
- [/dev/ECMAScript#Kanvas-remove-click-2 Kanvas.remove\_click]
|
||||
- [/dev/ECMAScript#Kanvas-remove-key-down-2 Kanvas.remove\_key\_down]
|
||||
- [/dev/ECMAScript#Kanvas-remove-key-up-2 Kanvas.remove\_key\_up]
|
||||
- [/dev/ECMAScript#Kanvas-range-mouse-move-2 Kanvas.range\_mouse\_move]
|
||||
- [/dev/ECMAScript#Kanvas-range-resize-2 Kanvas.range\_resize]
|
||||
- [/dev/ECMAScript#Kanvas-range-click-2 Kanvas.range\_click]
|
||||
- [/dev/ECMAScript#Kanvas-range-key-down-2 Kanvas.range\_key\_down]
|
||||
- [/dev/ECMAScript#Kanvas-range-key-up-2 Kanvas.range\_key\_up]
|
||||
- [/dev/ECMAScript#Kanvas-key-down-2 Kanvas.key\_down]
|
||||
- [/dev/ECMAScript#Kanvas-key-up-2 Kanvas.key\_up]
|
||||
- [/dev/ECMAScript#Kanvas-get-margins-2 Kanvas.get\_margins]
|
||||
- [/dev/ECMAScript#Kanvas-get-position-2 Kanvas.get\_position]
|
||||
- [/dev/ECMAScript#Kanvas-get-cells-2 Kanvas.get\_cells]
|
||||
- [/dev/ECMAScript#Kanvas-get-canvas-distance-2 Kanvas.get\_canvas\_distance]
|
||||
- [/dev/ECMAScript#Kanvas-get-cell-size-2 Kanvas.get\_cell\_size]
|
||||
|
||||
# PHP
|
||||
|
||||
- [/dev/PHP#wmd-php-2 /Public/wmd.php]
|
||||
- [/dev/PHP#wmd-scripts-php-2 /Public/wmd_scripts.php]
|
||||
|
||||
|
||||
[[html_data {
|
||||
"title" : "Código - Kanvas",
|
||||
"url" : "https://kanvas.k3y.pw/dev/index.html",
|
||||
"author" : "KyMAN",
|
||||
"since" : 20211225,
|
||||
"version" : 20211225,
|
||||
"key_words" : "kanvas,canvas,html,js,ecma,script,ecmascript,graphic,engine,library,developt,desarrollo,programación,todo,all",
|
||||
"description" : "Parte Todo del Kanvas.",
|
||||
"project" : "Kanvas",
|
||||
"logo" : "/images/kanvas.png",
|
||||
"language" : "es"
|
||||
}]]
|
||||
32
WMD/es/20230707/index.w.md
Executable file
32
WMD/es/20230707/index.w.md
Executable file
@ -0,0 +1,32 @@
|
||||
[[post_data {
|
||||
"author" : "KyMAN",
|
||||
"since" : 20230707,
|
||||
"version" : 20230707
|
||||
}]]
|
||||
# Kanvas
|
||||
|
||||
El proyecto Kanvas no es más que un pequeño motor gráfico basado en CANVAS para gestionar gráficos en 2D, basado en el sistema que usa JavaScript y CSS para interpretar los mismos: un mapeado de parámetros que determinan el GUI. En este caso se unifican los diferentes tipos de gráficos que se puedan establecer como básicos, y sobre éstos, éste trabaja.
|
||||
|
||||
La idea es compactar todos los gráficos sobre un simple JSON, y mediante la accesibilidad de los elementos, irlos variando, siendo más libiano modificar parámetros sobre unn entorno de interpretación que ejecutar cambios sobre el mismo.
|
||||
|
||||
A nivel de HTML se trata de un DIV que contiene un DIV para elementos cacheados y un elemento CANVAS el cual será el GUI.
|
||||
|
||||
A la hora de gestionar los gráficos, Kanvas puede hacer uso de bloques que se cachean en otros componentes CANVAS, los cuales se almacenarán en el DIV caché.
|
||||
|
||||
Por otro lado, en caso de quererse añadir cosas al bloque HTML Kanvas, éstos pueden ser agregados sin problema.
|
||||
|
||||
El objeto Kanvas viene siendo un objeto JavaScript basado en función y no en clase. Puede ser extendido mediante la función "extends" sobre otros objetos. El objeto Kanvas consta de 3 fases iniciales las cuales:
|
||||
|
||||
1. **Constructor**:
|
||||
|
||||
[[html_data {
|
||||
"title" : "Kanvas - Manual",
|
||||
"url" : "https://kanvas.k3y.pw/es/20230707/",
|
||||
"author" : "KyMAN",
|
||||
"since" : 20230707,
|
||||
"version" : 20230707,
|
||||
"key_words" : "kanvas,canvas,kyman,2d,graphics",
|
||||
"description" : "Manual del proyecto Kanvas.",
|
||||
"project" : "Kanvas",
|
||||
"logo" : "https://kanvas.k3y.pw/images/kanvas.png"
|
||||
}]]
|
||||
76
WMD/es/doc/kanvas.idea.w.md
Executable file
76
WMD/es/doc/kanvas.idea.w.md
Executable file
@ -0,0 +1,76 @@
|
||||
[[post_data {
|
||||
"author" : "KyMAN",
|
||||
"since" : 20211230,
|
||||
"version" : 20211230
|
||||
}]]
|
||||
# Idea
|
||||
|
||||
La idea del proyecto es hacer un motor que se encargue de crear imágenes a partir de un Array de
|
||||
diccionarios con anidamiento que contiene las formas, gráficos, bloques y grupos que dan en sí la
|
||||
imagen final. Las imágenes se refrescarán cada X tiempo según configuración o según rendimiento del
|
||||
equipo o navegador donde se esté ejecutando. Con ello facilitará a nivel de proceso iteraciones y
|
||||
dinamismos con la imagen final, que será lo que vea el usuario, haciendo que con una simple
|
||||
variación de uno o más valores dentro del Array de diccionarios se permita visualizar este cambio,
|
||||
permitiendo con ello, movimientos y cualquier otro tipo de interactuación con el entorno.
|
||||
|
||||
El motor constará de un gestor de formas, objetos, etc. Unos serán por defecto y otros pueden ser
|
||||
añadidos por el usuario, de esta forma permitimos un sistema simplificado de formas y objetos, así
|
||||
como conjuntos que se repiten y así poder hacer reciclaje de objetos y elementos sin que el usuario
|
||||
tenga que hacer un sistema en esprofeso para ello. También constará de los eventos que permitan no
|
||||
solo interactuar al programador o a los elementos entre sí, sino también a los usuarios que consuman
|
||||
el producto final.
|
||||
|
||||
Todo ello se moverá en JSON con Arrays que contengan diccionarios u objetos. Los Arrays pueden tener
|
||||
anidados Arrays para hacer capas o bloques, y los objetos pueden tener hijos, por lo general es el
|
||||
atributo "childs". El orden de las capas se otorga al orden en que se encuentren en los Arrays,
|
||||
siendo los índices más bajos los que estén al fondo y los que tengan el índica más alto los que
|
||||
estén más al frente.
|
||||
|
||||
También ha de mencionarse el posicionamiento, que en el plano principal constará de 9 posiciones de
|
||||
inicio por el hecho de que estamos hablando de un entorno dinámico que muy posiblemente no tenga un
|
||||
tamaño preestablecido y que se adapte a la pantalla, variando si ésta varía, no siendo igual empezar
|
||||
a dibujar desde el centro que desde un lado u otro. Las posiciones se basan en el teclado numérico
|
||||
de un teclado normal de PC de 105 teclas, con los valores del 1 al 9. Es importante destacar que
|
||||
esto es para empezar el dibujado, a partir de ahí, todo se iniciará en el punto 0x0 desde el objeto,
|
||||
es decir, si un objeto se pone en la posición 3x5, el punto 0x0 de un elemento hijo será el punto
|
||||
3x5 del padre, y si se anida otro objeto en el hijo, siendo el nieto del objeto maestro sería la
|
||||
suma de la posición del hijo y la del padre, y así sucesivamente. Por lo que hay que tener especial
|
||||
cuidado en las anidaciones, incluso la rotación y el efecto Alpha se heredan. Todo ello no impide
|
||||
que se pueda trabajar desde el objeto base y anidar con simples Array, lo que sería realmente
|
||||
agrupar, como sucede en el juego [https://xgravity.k3y.pw/ XGravity].
|
||||
|
||||
Las iteracciones humanas con el entorno se harán a partir de eventos sobre el objeto HTML CANVAS,
|
||||
por lo que ha de estar disponible cara el usuario sin que halla elementos por delante, si se monta
|
||||
un objeto por delante, éste impedirá que se interactúe con el objeto HTML CANVAS en la parte que
|
||||
éste ocupe. Los eventos recogen posición por lo que se pueden hacer rangos y analizar si se
|
||||
encuentra en una posición concreta o no, como por ejemplo, para hacer botones o interactuar como
|
||||
Shooter contra objetos en pantalla.
|
||||
|
||||
Finalmente, nos encontramos ante un entorno gráfico que intenta representar lo mismo en cualquier
|
||||
proporción y resolución, aunque halla recortes en los lados o extremos superiores e inferiores, así
|
||||
como variación de calidad por resolución. Para ello se basa en un entorno cuadrado que se conforma
|
||||
con un lado equivalente al lado más estrecho, es decir, si estamos en un entorno visual horizontal,
|
||||
el cuadrado se adaptará a la altura del mismo; mientras que si es un entorno vertical se adaptará al
|
||||
ancho, de esta forma, simplemente ha de extenderse la imagen o el procesado fuera del rango
|
||||
cuadrado, permitiendo que la parte importante, que es el cuadrado que centra la imagen sea completo.
|
||||
Con respecto a la resolución se utiliza un sistema de celdas que indica los puntos que tiene el
|
||||
dibujo (No confundir los puntos de dibujado que son áreas con un número X de píxeles con los propios
|
||||
píxels), lo que permite que en cualquier resolución salga el mismo dibujo puesto que el dibujo
|
||||
ocupará Y celdas o cuadrados de dibujo; y cada celda ocupará X píxeles de dibujo.
|
||||
|
||||
Con todo esto, se entiende que la idea es hacer un sistema muy ágil de interpretación del esquema de
|
||||
dibujo (Arrays y diccionarios), lo que daría lugar a que la complejidad de proceso sea el número de
|
||||
partículas (Imágenes, formas, etc.) y no los dinamismos ni las interactuaciones humanas sobre el
|
||||
entorno.
|
||||
|
||||
[[html_data {
|
||||
"title" : "Kanvas - Objetivos",
|
||||
"url" : "https://kanvas.k3y.pw/es/doc/kanvas.idea.html",
|
||||
"author" : "KyMAN",
|
||||
"since" : 20211230,
|
||||
"version" : 20211230,
|
||||
"key_words" : "kanvas,canvas,kyman,2d,graphics,idea,planteamiento",
|
||||
"description" : "La idea del proyecto Kanvas.",
|
||||
"project" : "Kanvas",
|
||||
"logo" : "https://kanvas.k3y.pw/images/kanvas.png"
|
||||
}]]
|
||||
108
WMD/es/doc/kanvas.quality.w.md
Executable file
108
WMD/es/doc/kanvas.quality.w.md
Executable file
@ -0,0 +1,108 @@
|
||||
[[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"
|
||||
}]]
|
||||
275
WMD/es/doc/kanvas.settings.w.md
Executable file
275
WMD/es/doc/kanvas.settings.w.md
Executable file
@ -0,0 +1,275 @@
|
||||
[[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"
|
||||
}]]
|
||||
69
WMD/es/doc/kanvas.starting.w.md
Executable file
69
WMD/es/doc/kanvas.starting.w.md
Executable file
@ -0,0 +1,69 @@
|
||||
[[post_data {
|
||||
"author" : "KyMAN",
|
||||
"since" : 20210620,
|
||||
"version" : 20210620
|
||||
}]]
|
||||
# Iniciando
|
||||
|
||||
Kanvas no es más que una pequeña librería ECMAScript 2015 totalmente autosuficiente, por lo que sólo
|
||||
requiere de la implementación en HTML de dicha librería para poder ser iniciada. Para ello podemos
|
||||
hacer uso de cualquiera de las direcciones puestas al principio del manual ([/es/#Kanvas]). El
|
||||
siguiente ejemplo HTML muestra la creación de un Kanvas vacío que ocupa todo el marco HTML del
|
||||
navegador.
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<title>Kanvas - Test</title>
|
||||
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
|
||||
<meta charset="utf-8" />
|
||||
|
||||
<style data-type="text/css" data-language="CSS3" data-rel="stylesheet" charset="utf-8">
|
||||
|
||||
html,body{
|
||||
height : 100%;
|
||||
margin : 0px;
|
||||
}
|
||||
|
||||
body{overflow : hidden;}
|
||||
|
||||
.kanvas{
|
||||
position : absolute;
|
||||
top : 0px;
|
||||
left : 0px;
|
||||
width : 100%;
|
||||
height : 100%;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script data-type="text/javascript" data-language="ECMAScript 2015" src="/Kanvas.ecma.js" data-crossorigin="anonymous" charset="utf-8"></script>
|
||||
|
||||
<script data-type="text/javascript" data-language="ECMAScript 2015" charset="utf-8">
|
||||
|
||||
kanvas = new Kanvas();
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body></body>
|
||||
</html>
|
||||
```
|
||||
|
||||
Como podemos ver en el ejemplo, que el propio Kanvas es una clase objeto con la cual creamos un
|
||||
objeto el cual será el objeto que gestiona todo lo que se verá en este manual. Cada instancia Kanvas
|
||||
gestionará un único Kanvas en el GUI, permitiendo poder hacer uso de más de un elemento al mismo
|
||||
tiempo dentro del entorno HTML.
|
||||
|
||||
[[html_data {
|
||||
"title" : "Kanvas - Iniciando",
|
||||
"url" : "https://kanvas.k3y.pw/es/doc/kanvas.starting.html",
|
||||
"author" : "KyMAN",
|
||||
"since" : 20210620,
|
||||
"version" : 20210620,
|
||||
"key_words" : "kanvas,canvas,kyman,2d,graphics,iniciar,implementar,incluir",
|
||||
"description" : "Manual para iniciar Kanvas.",
|
||||
"project" : "Kanvas",
|
||||
"logo" : "https://kanvas.k3y.pw/images/kanvas.png"
|
||||
}]]
|
||||
29
WMD/es/doc/kanvas.targets.w.md
Executable file
29
WMD/es/doc/kanvas.targets.w.md
Executable file
@ -0,0 +1,29 @@
|
||||
[[post_data {
|
||||
"author" : "KyMAN",
|
||||
"since" : 20210621,
|
||||
"version" : 20211229
|
||||
}]]
|
||||
# Objetivos
|
||||
|
||||
Aquí aparecerán reflejadas todas las tareas acerca de las tareas que hay que llevar a cabo en el
|
||||
Kanvas.
|
||||
|
||||
- [X] Crear logo.
|
||||
- [-] Documentar Kanvas.
|
||||
- *Repasar funcionalidad.*
|
||||
- [ ] Generar ejemplos para la documentación del Kanvas.
|
||||
- [ ] Generar Delta Time Constant.
|
||||
- [ ] Deslimitar los FPS de forma opcional, reduciendo la tasa de refresco de los 4ms por defecto de
|
||||
los Intervals.
|
||||
|
||||
[[html_data {
|
||||
"title" : "Kanvas - Objetivos",
|
||||
"url" : "https://kanvas.k3y.pw/es/doc/kanvas.targets.html",
|
||||
"author" : "KyMAN",
|
||||
"since" : 20210621,
|
||||
"version" : 20211229,
|
||||
"key_words" : "kanvas,canvas,kyman,2d,graphics,objetivos,tareas",
|
||||
"description" : "Tareas a realizar o realizadas en el proyecto Kanvas.",
|
||||
"project" : "Kanvas",
|
||||
"logo" : "https://kanvas.k3y.pw/images/kanvas.png"
|
||||
}]]
|
||||
55
WMD/es/index.w.md
Executable file
55
WMD/es/index.w.md
Executable file
@ -0,0 +1,55 @@
|
||||
[[post_data {
|
||||
"author" : "KyMAN",
|
||||
"since" : 20210620,
|
||||
"version" : 20211230
|
||||
}]]
|
||||
# Kanvas
|
||||
|
||||
El proyecto Kanvas no es más que una pequeña librería JavaScript en ECMAScript 2015 que nos permite
|
||||
crear y gestionar gráficos 2D sobre un elemento CANVAS gestionado dentro de una etiqueta de capa
|
||||
DIV, de forma sencilla y limpia, basado en un mapeado Array anidado que nos permite tener tanto la
|
||||
profundidad como agrupar elementos en diferentes niveles de profundidad, todos ellos ordenados entre
|
||||
sí. Dichos elementos también están gestionados dentro de la propia librería como elementos de dibujo
|
||||
o para dibujar. Para poder descargar o hacer uso como CDN de ésta librería se puede utilizar los
|
||||
siguientes links:
|
||||
|
||||
- https://kanvas.k3y.pw/Kanvas.ecma.js
|
||||
- https://git.k3y.pw/KyMAN/Kanvas/-/raw/master/Public/Kanvas.ecma.js
|
||||
|
||||
La idea es crear un mapa de los gráficos que se quieren representar en un Array a partir de los
|
||||
componentes de dibujo que contenga la librería, si hay alguno del cual se quiera hacer uso y no lo
|
||||
tiene, éste ha de ser implementado por el usuario desarrollador, permitiendo dicha metodología la
|
||||
reutilización de código para diversos fines. En JavaScript, los objetos almacenados en una variable
|
||||
funcionan por Mark and Sweep, por tanto son elementos referenciados en memoria y por ello, podemos
|
||||
moverlos a diferentes puntos del código enviándolo funcionalmente como parámetro donde podrá ser
|
||||
tratado tanto por Kanvas como por el desarrollador simultáneamente.
|
||||
|
||||
[[header_level 0]]
|
||||
[[include /WMD/es/doc/kanvas.idea.w.md]]
|
||||
|
||||
[[header_level 0]]
|
||||
[[include /WMD/es/doc/kanvas.starting.w.md]]
|
||||
|
||||
[[header_level 0]]
|
||||
[[include /WMD/es/doc/kanvas.settings.w.md]]
|
||||
|
||||
[[header_level 0]]
|
||||
[[include /WMD/es/doc/kanvas.quality.w.md]]
|
||||
|
||||
[[header_level 0]]
|
||||
[[include /WMD/es/doc/kanvas.targets.w.md]]
|
||||
|
||||
[[header_level 0]]
|
||||
[[wdictionaries Diccionario https://wdictionaries.k3y.pw/?es/users,values,own_projects,projects,digital,common]]
|
||||
|
||||
[[html_data {
|
||||
"title" : "Kanvas - Manual",
|
||||
"url" : "https://kanvas.k3y.pw/es/",
|
||||
"author" : "KyMAN",
|
||||
"since" : 20210620,
|
||||
"version" : 20211230,
|
||||
"key_words" : "kanvas,canvas,kyman,2d,graphics",
|
||||
"description" : "Manual del proyecto Kanvas.",
|
||||
"project" : "Kanvas",
|
||||
"logo" : "https://kanvas.k3y.pw/images/kanvas.png"
|
||||
}]]
|
||||
25
WMD/index.w.md
Executable file
25
WMD/index.w.md
Executable file
@ -0,0 +1,25 @@
|
||||
[[post_data {
|
||||
"author" : "KyMAN",
|
||||
"since" : 20210620,
|
||||
"version" : 20211230
|
||||
}]]
|
||||
# Kanvas
|
||||
|
||||
[[links_group [{
|
||||
"images" : ["https://i.imgur.com/im1o0gc.png"],
|
||||
"link" : "/es/",
|
||||
"text" : "Español",
|
||||
"self" : true
|
||||
}] ]]
|
||||
|
||||
[[html_data {
|
||||
"title" : "Kanvas - Manual",
|
||||
"url" : "https://kanvas.k3y.pw/es/",
|
||||
"author" : "KyMAN",
|
||||
"since" : 20210620,
|
||||
"version" : 20211230,
|
||||
"key_words" : "kanvas,canvas,kyman,2d,graphics",
|
||||
"description" : "Manual del proyecto Kanvas.",
|
||||
"project" : "Kanvas",
|
||||
"logo" : "https://kanvas.k3y.pw/images/kanvas.png"
|
||||
}]]
|
||||
12
push.bat
Executable file
12
push.bat
Executable file
@ -0,0 +1,12 @@
|
||||
@echo off
|
||||
|
||||
if "%~1" == "" (
|
||||
set /p text="Text commit: "
|
||||
) else (
|
||||
set text=%~1
|
||||
)
|
||||
|
||||
git pull
|
||||
git add .
|
||||
git commit -m "%text%"
|
||||
git push
|
||||
Loading…
Reference in New Issue
Block a user