logoExtra: script.dibujando_mapas

Descripción: Creación de polígonos dinámicamente con efectos de transición.


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

SVG: Dibujando mapas
mapear una imagen ahora es fácil y preciso
// 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 10 ocasiones.

Zona de comentarios

Esta extra aún no tiene comentarios.

Evaluación

Valoración de esta página: (extra.script.dibujando_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