lienzo en un div con pantalla ninguno no funciona

Question

Tengo un problema con un elemento canvas. No se muestra cuando está en un div oculto y el div se alterna. mejor explicación y el ejemplo aquí

http://jsfiddle.net/78sJT/10/

Esto está ocurriendo en (otros no probado) ff y cromo. ¿Alguien podría decirme por qué/cómo superar este problema?

Answer 1

El problema es que Dygraphs detecta el ancho/alto del div como 0/0 y no aprende de otra manera hasta que se vuelve a dibujar (no hay evento JS que se dispara cuando se cambia el tamaño de un elemento DOM individual).

La solución más fácil es dejar simplemente explícitamente la dygraph sabe que debe actualizar su tamaño y volver a dibujar en sí después de la div se modifica utilizando g.resize();

$(document).ready(function(){ 
     $('.click').click(function(){ 
     $('#hidden').toggle(); 
     g.resize(); 
     }); 
    }); 

He actualizado su jsFiddle http://jsfiddle.net/78sJT/13/

Answer 2

me acaba de golpear este problema en Chrome 37.0.2062.124 m, que coincide con el problema descrito en la pregunta del OP. Sin embargo, no estoy usando ninguna biblioteca gráfica en particular, solo dibujo en lienzo. Y ya estaba volviendo a dibujar el lienzo cuando cambió el tamaño del DIV adjunto.

Me parece que si el ancho o alto de un lienzo se establece en cero, se vuelve poco confiable. La próxima vez que configure el ancho y el alto en valores distintos de cero, cualquier dibujo que realice inmediatamente se ignorará, aunque su ancho y alto no sean cero y se puede ver en el árbol de elementos (y resaltado en la página) en el depurador de Chrome.

Así, además de los consejos de la respuesta de benni_mac_b debe:

• uso setTimeout o similar a retrasar el dibujo sobre la tela, por lo que no lo hace inmediatamente después de ajustar la anchura/altura, o
• asegúrate de nunca configurar el lienzo en cero ancho/alto. Asegúrate de que tenga al menos 1 píxel.

Hago lo posterior por simplicidad y resuelve el problema.

En resumen:

un lienzo que solo ha crecido a partir de (0, 0) a (1000, 1000) no se pueden sacar de inmediato - no tiene en cuenta todas las instrucciones de dibujo. Pero si ha crecido desde (1, 1) hasta (1000, 1000), puede recurrir inmediatamente a todo.