Descripción: Zoom en imágenes SVG.
A continuación mostramos los apuntes asociados a este extra:
// Descripción para sindicación:
/*
[rss]Zoom en imágenes SVG.[/rss]
*/
svgns = "http://www.w3.org/2000/svg";
xlinkns = "http://www.w3.org/1999/xlink";
polis = {};
function inicio_zoom() {
poner_evento(tag("flexible"), "change", goma);
poner_evento(tag("z_mapamundi"), "change", marca);
zonas = ["rusia", "china", "oceania", "brasil", "canada"];
for (i = 0; i < zonas.length; i++) {
poner_evento(tag(zonas[i]), "dblclick", zoom);
poner_evento(tag("z_" + zonas[i]), "change", marca);
}
var xmin, xmax, ymin, ymax;
ps = tag("mapamundi").getElementsByTagNameNS(svgns, "polygon");
item = {};
item.id = "mapamundi";
item.viewBox = "0,0,700,356";
polis["mapamundi"] = item;
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.viewBox = (xmin - 2) + "," + (ymin - 2) + "," + (xmax - xmin + 4) + "," + (ymax - ymin + 4);
polis[item.id] = item;
}
}
tiempo = 1000;
incre = 25;
incre_t = tiempo / incre;
function transitar(id, ini, fin) {
lapso = 0;
inis = ini.split(",");
oo = parseInt(inis[0]);
nn = parseInt(inis[1]);
ee = parseInt(inis[2]);
ss = parseInt(inis[3]);
fins = fin.split(",");
inc_o = (parseInt(fins[0]) - oo) / incre;
inc_n = (parseInt(fins[1]) - nn) / incre;
inc_e = (parseInt(fins[2]) - ee) / incre;
inc_s = (parseInt(fins[3]) - ss) / incre;
vista = (oo+=inc_o) + "," + (nn+=inc_n) + "," + (ee+=inc_e) + "," + (ss+=inc_s);
vistas = [];
vistas.push(vista);
for (i = 1; i < incre - 1; i++) {
vistas.push((oo+=inc_o) + "," + (nn+=inc_n) + "," + (ee+=inc_e) + "," + (ss+=inc_s));
}
vistas.push(fin);
while (vistas.length > 0) {
vista = vistas.shift();
poner = "tag('" + id + "').setAttributeNS(null, 'viewBox', '" + vista + "')";
cuando = lapso += incre_t;
setTimeout(poner, cuando);
}
}
function marca() {
zona = this.id.substr(2);
puesto = tag("mapamundi").getAttributeNS(null, "viewBox");
poner = polis[zona].viewBox;
transitar("mapamundi", puesto, poner);
}
function zoom() {
soy = polis[this.id];
poner = soy.viewBox;
puesto = tag("mapamundi").getAttributeNS(null, "viewBox");
if (poner == puesto) {
transitar("mapamundi", puesto, "0,0,700,356");
tag("z_mapamundi").checked = true;
}
else {
transitar("mapamundi", puesto, poner);
tag("z_" + this.id).checked = true;
}
}
function goma() {
modo = (this.checked) ? "none" : "xMidYMid meet";
tag("mapamundi").setAttributeNS(null, "preserveAspectRatio", modo);
}
poner_evento(window, "load", inicio_zoom);
Este código ha sido leído en 171 ocasiones.
Esta extra aún no tiene comentarios.
Valoración de esta página: (extra.script.zoom_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