Lona de Rafael llenando un contenedor div

En lugar de especificar el ancho y la altura de un lienzo de Rafael, necesito que sea 100% del tamaño de su contenedor. Así que podría hacer un Raphael ("contenedor", containerElement.width, containerElement.height) y configurar la función onresize para restablecer esos valores. Pero luego el contenido se pone muy nervioso y agitado mientras cambio el tamaño de la ventana o contenedor porque las barras de desplazamiento (que quiero si se vuelve demasiado pequeña) aparecen y desaparecen.Lona de Rafael llenando un contenedor div

¿Es esta la manera correcta de unir el lienzo de Raphael con el tamaño completo de un contenedor? También me gustaría ofrecer la opción de hacer que el lienzo de Raphael "a pantalla completa" ocupe toda la ventana del navegador.

Fuente

2010-11-15 at.

Si está utilizando un div, entonces podría usar CSS para establecerlo al 100% del ancho y alto. A continuación, utilice Raphael("container", "100%", "100%")

En cuanto a la pantalla completa, la mayoría de los navegadores tienen un comando para hacerlo. Entonces, si realmente está haciendo 100%, entonces cuando presiona el botón de comando, p. (F11 en Firefox) se convertirá en pantalla COMPLETA.

Fuente

2010-11-15 10:35:31

Me dio la impresión de leer los documentos y otras publicaciones en el foro de discusión de sus grupos de google que tenía que ingresar un número (para el número de píxeles) en el constructor de Raphael, no un porcentaje. Intentaré eso, gracias. En cuanto a la pantalla completa, me refería a la pantalla completa de la ventana del navegador, por lo que 100%, 100% lo permitirá. –

La documentación de Raphael muestra el uso de tamaños específicos, pero el uso de porcentajes funciona, desde la experiencia propia. Supongo que conoce la documentación de Raphael, pero aquí hay un enlace si no: http://raphaeljs.com/reference.html –

Gracias Adam, parece que esta es la respuesta. Leí la documentación, pero específicamente dije que teníamos que poner una cantidad de píxeles allí. –

Raphael("container", "100%", "100%"); llenará el lienzo de ancho/alto del contenedor DIV. Esto funciona bien en Chrome y Safari. Para llevar Firefox a bordo necesitarás darle a body y html 100% de ancho/alto en el CSS, de lo contrario, se recortará el vector.

Fuente

2012-02-14 05:57:17 gnat

¿No es la misma respuesta exacta que la aceptada? –

no, la respuesta aceptada no dice nada sobre 100% html y body en firefox – supercrabtree

Un poco tarde en este caso, pero lo publicaré aquí para que otras personas lo busquen.

var h = $('container').height(); //get the container height into variable h  
    var w = $('container').width(); //get the container width into variable w 
    //set your Raphael canvas to the variables 
    var contpaper = Raphael("container", w, h); 
    var doit; 
    //function to reload the page and/or do other adjustments 
    function resizedw(){ 
     document.location.reload()     
    } 
    //call function 200 ms after resize is complete. 
    $(window).resize(function(){clearTimeout(doit); 
     doit = setTimeout(function() { 
     resizedw(); 
    }, 200)});

Esta solución es compatible con varios navegadores y dispositivos móviles para que pueda usar esto para incorporar un diseño receptivo. Al agregar advertencias para ancho de ventana o alto a su javascript en forma de sentencias if, puede definir todas sus formas en base a las mismas variables.

Fuente

2013-07-25 02:17:19 Jerimio

Lona de Rafael llenando un contenedor div

Respuesta

Cuestiones relacionadas