Empecé a usar Raphael.js hace un par de días y estoy disfrutando. La única cosa que yo no he sido capaz de averiguar es cómo conseguir el «papel» o svg/vml etiqueta para llenar la ventana del navegador como un archivo swf. Vea este ejemplo.

Nota la forma en que el ejemplo anterior se redimensiona con la ventana del navegador

Yo era capaz de conseguir el «papel» para cambiar el tamaño con la ventana del navegador, pero sin suerte de llegar a todos los gráficos vectoriales para ajustar su tamaño. Cualquier comentario sería muy apreciada.

EDITAR

He intentado un montón de diferentes rutas con esto. viewBox funcionaba de maravilla, pero su SVG sólo. Me di cuenta de cómo hacerlo usando Rafael conjuntos y un poco de código en la ventana.evento onresize. Voy a publicar mis hallazgos más tarde esta noche o mañana. Yo todavía me gusta ver otras soluciones a la pregunta si hay alguna.

InformationsquelleAutor Zevan | 2010-12-01

5 Comentarios

  1. 37

    Me tomó un rato, pero finalmente se llegó a una solución a este problema. He envuelto la solución en un pequeño archivo js que puede ser utilizado con Raphael. Usted puede obtener el archivo js, junto con algunas simples de la documentación aquí. Ver en acción.

    Cómo funciona:

    1. uso viewBox para svg
    2. envolver todos los vml nodos en un nodo de grupo
    3. envuelva el constructor Rafael arriba de modo que el vml nodo de grupo se pasa al constructor Rafael
    4. alterar algunas propiedades css cuando el papel se cambia de tamaño para lidiar con el centrado, el recorte y el mantenimiento de la relación de aspecto correcta.

    Cualquier comentario sería muy apreciada.

    • Que es impresionante!
    • La URL está mal.
    • fijo yo estaba abajo
    • el enlace es hacia abajo de nuevo..
    • puede que sólo tenga una instancia de ScaleRaphael?? … Me estoy poniendo .archivos svg en miniaturas … la original .svg son acerca de 400×400, pero las imagenes se 75×75 … he estado utilizando una única instancia de Raphael( container_id ) para cada dedo. … PERO parece que cuando me cambie a new ScaleRaphael( container_id , 75, 75), todos los pulgares están recibiendo agrupan en un elemento visual.
    • Quiero darte un beso ahora mismo! La lib hizo que mi día!

  2. 7

    Bien hola Zévan,

    He encontrado una buena respuesta, hecha por un hombre llamado Zevan. Sin embargo, he encontrado el código demasiado complicado para mi gusto (se Requiere jquery, hizo extraño cosas como «$(this)», etc).

    Así que me simplificado. Ahora es lo suficientemente corto como para caber en stackoverflow ;):

    var paper;
    
    window.ScaleRaphael = function(container, width, height) {
        var wrapper = document.getElementById(container);
        wrapper.style.width = width + "px";
        wrapper.style.height = height + "px";
        wrapper.style.overflow = "hidden";
    
        wrapper.innerHTML = "<div id='svggroup'><\/div>";
        var nestedWrapper = document.getElementById("svggroup");
    
        paper = new Raphael(nestedWrapper, width, height);
        paper.w = width;
        paper.h = height;
        paper.canvas.setAttribute("viewBox", "0 0 "+width+" "+height);
        paper.changeSize = function() {
            var w = window.innerWidth
            var h = window.innerHeight
            var ratioW = w / width;
            var ratioH = h / height;
            var scale = ratioW < ratioH ? ratioW : ratioH;
    
            var newHeight = Math.floor(height * scale);
            var newWidth = Math.floor(width * scale);
    
            wrapper.style.width = newWidth + "px";
            wrapper.style.height = newHeight + "px";
            paper.setSize(newWidth, newHeight);
        }
        window.onresize = function() {
            paper.changeSize();
        }
    
        paper.changeSize();
    
        return paper;
    }

    El único inconveniente de su versión es que requiere SVG, no VML. Es esto un problema?

    Lo estoy usando con una versión simplificada de la página de demostración:

    <!DOCTYPE html> 
    <html lang="en"> 
    <head>
    <title>ScaleRaphaël Demo 1</title>
    <meta charset="utf-8"> 
    
    <script type="text/javascript" src="raphael.js"></script>
    <script type="text/javascript" src="scale.raphael.js"></script>
    <script type="text/javascript">
    
        window.onload = function() {
            var paper = new ScaleRaphael("wrap", 600, 400);
    
            //draw some random vectors:
            var path = "M " + paper.w / 2 + " " + paper.h / 2;
            for (var i = 0; i < 100; i++){
                var x = Math.random() * paper.w;
                var y = Math.random() * paper.h;
                paper.circle(x, y,
                    Math.random() * 60 + 2).
                    attr("fill", "rgb("+Math.random() * 255+",0,0)").
                    attr("opacity", 0.5);
                path += "L " + x + " " + y + " ";
            }
    
            paper.path(path).attr("stroke","#ffffff").attr("stroke-opacity", 0.2);
    
            paper.text(200,100,"Resize the window").attr("font","30px Arial").attr("fill","#ffffff");
        }
    
          </script>
    <style type="text/css">
        body, html {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    
        #wrap{
            background-color: orange;
        }
    </style>
    
    </head>
    <body>

    • sé que no vml apoyo, es por eso de su función de cambiar el tamaño no está configurado para IE? Para mí, una gran parte de Rafael es el VML apoyo… y por lo que el cambio de tamaño de ventana método de necesidades para trabajar en IE
    • Excelente respuesta y el código. Esto sólo me salvó de una enorme cantidad de ensayo y error. Gracias!
  3. 2

    Podría recorrer todos los caminos y de la escala (las) de acuerdo a la nueva escala del documento, después de cambiar su tamaño.

    • +1 yo pensé acerca de eso, pregunto si hay otra forma.
    • Nope, no creo que haya una solución mágica aquí.
    • resulta que no hay necesidad de bucle si el uso de un conjunto y hacer myset.escala(2,2,0,0)
    • Muy interesante! No me fijé en conjuntos cuando he usado raphaël.
    • Me habló de pronto. Desafortunadamente, si la escala de un conjunto de objetos en el sistema de coordenadas no se conservó que puede estropear cualquier animación que podría estar pasando. Significado de la cx y cy cambiar dependiendo de la escala. Estoy bastante seguro de que esto podría evitarse si Rafael utilizando la transformación() SVG cosas. No sé por qué escala se realiza de forma manual en lugar de con construido en SVG funcionalidad. Quizás tiene algo que ver con tener el código sea fácilmente compatible con VML. Voy a seguir buscando en él. Peor de los casos voy a escribir algún tipo de plug-in.
  4. 2

    Se podría agregar un ‘viewBox’ atributo en el svg elemento raíz para definir el sistema de coordenadas, las formas, y luego escalar a cualquier tamaño de contenedor. No está seguro de cómo lidiar con el VML lado de las cosas, aunque. Te sugiero que informa de un problema para él, https://github.com/DmitryBaranovskiy/raphael/issues.

    • Genial voy a intentarlo – y voy a mirar en el VML lado de las cosas.
    • Esto realmente funciona muy bien. El equivalente en VML parece ser la envoltura de todos los objetos en un grupo de nodos. Hice esto y lo que realmente funcionó bien. El único problema es que Rafael no era capaz de relleno o el estilo de los objetos más. Supongo que debido al cambio de la VML estructura.
    • Supongo que en parte, es decir, la anchura y la altura de la de papel se podría establecer una expresión que calcula las dimensiones del elemento padre.
  5. 1

    Este podría ser demasiado vieja de un hilo, pero Raphael 2.0 tiene al menos un setViewBox método — http://raphaeljs.com/reference.html#Paper.setViewBox

    Usted todavía necesita para establecer el real tamaño del lienzo al 100%, por lo que el contenedor escalas a la ventana, pero las llamadas a setViewBox con w/h) en la ventana.cambiar el tamaño de devolución de llamada debe hacer el truco.

    • aquí está una igualmente al azar de edad ejemplo del uso de setViewBox «zoom» en la rueda del ratón: jsfiddle.net/9zu4U/2

Dejar respuesta

Please enter your comment!
Please enter your name here