Descripción: Creación de polígonos dinámicamente con efectos de transición.
A continuación mostramos los apuntes asociados a este extra:
// Descripción para sindicación:
/*
[rss]Creación de polígonos dinámicamente con efectos de transición.[/rss]
*/
svgns = "http://www.w3.org/2000/svg";
xlinkns = "http://www.w3.org/1999/xlink";
polis = {};
reverses = {};
tiempo = 4000;
relleno = "none";
function inicio_dibujos() {
poner_evento(tag("pon_chi"), "change", p_china);
poner_evento(tag("pon_rus"), "change", p_rusia);
poner_evento(tag("pon_oce"), "change", p_oceania);
poner_evento(tag("pon_bra"), "change", p_brasil);
poner_evento(tag("pon_can"), "change", p_canada);
poner_evento(tag("pon_tiempo"), "change", p_tiempo);
poner_evento(tag("pon_tipo"), "change", p_tipo);
poner_evento(tag("pon_color"), "change", p_color);
var xmin, xmax, ymin, ymax;
ps = tag("originales").getElementsByTagNameNS(svgns, "polygon");
for (i = 0, t = ps.length; i < t; i++) {
item = {};
puntos = ps[i].getAttributeNS(null, "points");
item.id = ps[i].getAttributeNS(null, "id");
item.puntos = puntos;
coors = puntos.split(",");
ymax = ymin = parseInt(coors.pop());
xmax = xmin = parseInt(coors.pop());
while (coors.length > 0) {
y = parseInt(coors.pop());
x = parseInt(coors.pop());
if (x < xmin) xmin = x;
if (x > xmax) xmax = x;
if (y < ymin) ymin = y;
if (y > ymax) ymax = y;
};
item.xmin = xmin;
item.xmax = xmax;
item.ymin = ymin;
item.ymax = ymax;
polis[item.id] = item;//.push(item);
}
}
function p_bola(id, x, y) {
c = document.createElementNS(svgns, "circle");
c.setAttributeNS(null, "id", "id_" + x + "_" + y);
c.setAttributeNS(null, "cx", x);
c.setAttributeNS(null, "cy", y);
c.setAttributeNS(null, "r", 2);
g.setAttributeNS(null, "stroke", "black");
g.setAttributeNS(null, "stroke-width", "1");
c.setAttributeNS(null, "fill", relleno);
tag(id).appendChild(c);
}
function q_bola(id, x, y) {
c = tag("id_" + x + "_" + y);
tag(id).removeChild(c);
}
function p_puntos(que) {
puntos = polis[que].puntos.split(",");
incre = tiempo / (puntos.length / 2);
lapso = 0;
g = document.createElementNS(svgns, "g");
g.setAttributeNS(null, "id", "soy_" + que);
tag("nuevos_polis").appendChild(g);
while (puntos.length > 1) {
x = puntos.shift();
y = puntos.shift();
setTimeout("p_bola('soy_" + que + "'," + x + "," + y + ")", lapso+=incre);
}
}
function q_puntos(que) {
puntos = polis[que].puntos.split(",");
incre = tiempo / (puntos.length / 2);
lapso = 0;
tag("nuevos_polis").appendChild(g);
while (puntos.length > 1) {
y = puntos.pop();
x = puntos.pop();
setTimeout("q_bola('soy_" + que + "'," + x + "," + y + ")", lapso+=incre);
}
setTimeout("tag('nuevos_polis').removeChild(tag('soy_" + que + "'))", lapso++);
}
function poly(id, puntos){
tag(id).setAttributeNS(null, "points", puntos);
}
function p_poli(que) {
puntos = polis[que].puntos.split(",");
incre = tiempo / (puntos.length / 2);
lapso = 0;
g = document.createElementNS(svgns, "polygon");
g.setAttributeNS(null, "id", "soy_" + que);
g.setAttributeNS(null, "fill", relleno);
g.setAttributeNS(null, "stroke", "black");
g.setAttributeNS(null, "stroke-width", "2");
tag("nuevos_polis").appendChild(g);
coors = [];
coors.push(puntos.shift());
coors.push(puntos.shift());
while (puntos.length > 0) {
coors.push(puntos.shift());
coors.push(puntos.shift());
setTimeout("poly('soy_" + que + "','" + coors + "')", lapso+=incre);
}
}
function q_poli(que) {
puntos = polis[que].puntos.split(",");
incre = tiempo / (puntos.length / 2);
lapso = 0;
g = tag("soy_" + que);
while (puntos.length > 0) {
fantasma = puntos.pop();
fantasma = puntos.pop();
setTimeout("poly('soy_" + que + "','" + puntos + "')", lapso+=incre);
}
setTimeout("tag('nuevos_polis').removeChild(tag('soy_" + que + "'))", lapso++);
}
function p_line(que) {
puntos = polis[que].puntos.split(",");
puntos.push(puntos[0]);
puntos.push(puntos[1]);
incre = tiempo / (puntos.length / 2);
lapso = 0;
g = document.createElementNS(svgns, "polyline");
g.setAttributeNS(null, "id", "soy_" + que);
g.setAttributeNS(null, "fill", relleno);
g.setAttributeNS(null, "stroke", "black");
g.setAttributeNS(null, "stroke-width", "2");
coors = [];
coors.push(puntos.shift());
coors.push(puntos.shift());
tag("nuevos_polis").appendChild(g);
while (puntos.length > 0) {
coors.push(puntos.shift());
coors.push(puntos.shift());
setTimeout("poly('soy_" + que + "','" + coors + "')", lapso+=incre);
}
}
function q_line(que) {
puntos = polis[que].puntos.split(",");
incre = tiempo / (puntos.length / 2);
lapso = 0;
g = tag("soy_" + que);
while (puntos.length > 0) {
x = puntos.pop();
y = puntos.pop();
setTimeout("poly('soy_" + que + "','" + puntos + "')", lapso+=incre);
}
setTimeout("tag('nuevos_polis').removeChild(tag('soy_" + que + "'))", lapso++);
}
function p_tarta(que) {
puntos = polis[que].puntos.split(",");
x = (polis[que].xmin + polis[que].xmax) / 2;
y = (polis[que].ymin + polis[que].ymax) / 2;
incre = tiempo / (puntos.length / 2);
lapso = 0;
g = document.createElementNS(svgns, "polygon");
g.setAttributeNS(null, "id", "soy_" + que);
coors = [];
coors.push(x);
coors.push(y);
g.setAttributeNS(null, "fill", relleno);
g.setAttributeNS(null, "stroke", "black");
g.setAttributeNS(null, "stroke-width", "2");
tag("nuevos_polis").appendChild(g);
while (puntos.length > 0) {
coors.push(puntos.shift());
coors.push(puntos.shift());
setTimeout("poly('soy_" + que + "','" + coors + "')", lapso+=incre);
}
x = coors.shift();
y = coors.shift();
setTimeout("poly('soy_" + que + "','" + coors + "')", lapso+=incre);
}
function q_tarta(que) {
puntos = polis[que].puntos.split(",");
x = (polis[que].xmin + polis[que].xmax) / 2;
y = (polis[que].ymin + polis[que].ymax) / 2;
puntos.unshift(y);
puntos.unshift(x);
incre = tiempo / (puntos.length / 2);
lapso = 0;
g = tag("soy_" + que);
while (puntos.length > 2) {
y = puntos.pop();
x = puntos.pop();
setTimeout("poly('soy_" + que + "','" + puntos + "')", lapso+=incre);
}
setTimeout("tag('nuevos_polis').removeChild(tag('soy_" + que + "'))", lapso++);
}
function p_china() {
tag("pon_chi").disabled = true;
setTimeout("tag('pon_chi').disabled = false", tiempo);
if (this.checked) {
tipo = tag("pon_tipo").value;
reverses["china"] = tipo.replace("p_", "q_");
window[tipo]("china");
}
else
window[reverses["china"]]("china");
}
function p_rusia() {
tag("pon_rus").disabled = true;
setTimeout("tag('pon_rus').disabled = false", tiempo);
if (this.checked) {
tipo = tag("pon_tipo").value;
reverses["rusia"] = tipo.replace("p_", "q_");
window[tipo]("rusia");
}
else
window[reverses["rusia"]]("rusia");
}
function p_oceania() {
tag("pon_oce").disabled = true;
setTimeout("tag('pon_oce').disabled = false", tiempo);
if (this.checked) {
tipo = tag("pon_tipo").value;
reverses["oceania"] = tipo.replace("p_", "q_");
window[tipo]("oceania");
}
else
window[reverses["oceania"]]("oceania");
}
function p_brasil() {
tag("pon_bra").disabled = true;
setTimeout("tag('pon_bra').disabled = false", tiempo);
if (this.checked) {
tipo = tag("pon_tipo").value;
reverses["brasil"] = tipo.replace("p_", "q_");
window[tipo]("brasil");
}
else
window[reverses["brasil"]]("brasil");
}
function p_canada() {
tag("pon_can").disabled = true;
setTimeout("tag('pon_can').disabled = false", tiempo);
if (this.checked) {
tipo = tag("pon_tipo").value;
reverses["canada"] = tipo.replace("p_", "q_");
window[tipo]("canada");
}
else
window[reverses["canada"]]("canada");
}
function p_tiempo() {
tiempo = parseInt(this.value) * 1000;
}
function p_tipo() {
//alert("cambiando de dibujo");
}
function p_color() {
relleno = this.value;
}
poner_evento(window, "load", inicio_dibujos);
Este código ha sido leído en 115 ocasiones.
Esta extra aún no tiene comentarios.
Valoración de esta página: (extra.script.dibujando_mapas)
Listados: imágenes, categorías, etiquetas, extras | Anuarios: 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021, 2022, 2023, 2024 | Otros enlaces: buscador