A pintar con Raphaël

No es uno de los arcángeles, no es una de las tortugas ninja, no es un pintor renacentista. Es un una librería hecha en javascript que nos permite integrar y manejar el formato gráfico SVG dentro de una página Web. Esta interesante librería nos permite trabajar con esos mapas en SVG y hacer distintas cosas interactúando con los objetos del XML que compone el SVG.

Dmitry Baranovskiy escribió Raphaël. Y ya está en la versión 2.1.0. Todo se basa en un objeto Raphael que permite la creación de canvas sobre el cual se puede pintar usando los path de un SVG o simplemente pintar a nuestro gusto. Raphaël, usa SVG para los navegadores recientes y usa VML para los navegadores antiguos. Un dato curioso es que el logo de Raphaël es un SVG. Lógicamente dibujado con la propia librería.

El trabajo con Raphaël es sencillo, a continuación detallo un ejemplo en el cual pintaré un mapa de mí país Colombia usando Raphaël:

1. Obtén la librería JS de Raphaël: 

http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js

2. Crea tu HTML, en mi caso me basé en un ejemplo de la página de Raphaël sobre Australia (que tiene menos entidades territoriales que Colombia)

<script type="text/javascript" charset="utf-8">
        window.onload = function () {
            var R = Raphael("paper", 2000, 2000);
            var attr = {
                fill: "#333",
                stroke: "#666",
                "stroke-width": 1,
                "stroke-linejoin": "round"
            };
            var col = {};
            col.dp1 = R.path("m 276.8341,977.12038 c 1.9777...."z").attr(attr);

3. Hay que crear un elemento del vector de paths por cada departamento o gráfica que quiera aparecer.

4. Se recorre el arreglo y se agrega una función para el evento onmouseover y onmouseout para el cambio de colores.

var current = null;
            for (var state in col) {
                col[state].color = Raphael.getColor();
                (function (st, state) {
                    st[0].style.cursor = "pointer";
                    st[0].onmouseover = function () {
                        current && col[current].animate({fill: "#333", stroke: "#666"}, 500) && (document.getElementById(current).style.display = "");
                        st.animate({fill: st.color, stroke: "#ccc"}, 500);
                        st.toFront();
                        R.safari();
                        document.getElementById(state).style.display = "block";
                        current = state;
                    };
                    st[0].onmouseout = function () {
                        st.animate({fill: "#333", stroke: "#666"}, 500);
                        st.toFront();
                        R.safari();
                    };
                })(col[state], state);
            }
        };
        </script>
5. Ubicamos los div que contendrán el canvas y listo.
<body>
        <div id="canvas">
            <div id="paper"></div>
        </div>
    </body>

He aquí el ejemplo con el código usando el mapa de Colombia

Artículos relacionados