logoExtra: script.zoom_mapas

Descripción: Zoom en imágenes SVG.


A continuación mostramos los apuntes asociados a este extra:

SVG: Zoom en mapa de imagen
Hacer zoom en una imagen SVG es más fácil de lo que se puede pensar. Recomendamos para obtener el mapa nuestra aplicación "Capturar áreas en imágenes".
// 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 20 ocasiones.

Zona de comentarios

Esta extra aún no tiene comentarios.

Evaluación

Valoración de esta página: (extra.script.zoom_mapas) valor

Valoración evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar

Respuesta: Zona de mensajes (proceso de evaluación)

Listados: imágenes, categorías, etiquetas, extras | Anuarios: 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017 | Otros enlaces: buscador