płótno w div z wyświetlaczem none nie działa

Question

Mam problem z elementem canvas. Nie pokazuje, kiedy jest ukryty div, a div jest przełączany. lepsze wyjaśnienie i przykładem

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

to się dzieje w FF i Chrome (nie testowane innymi). Czy ktoś może mi powiedzieć, dlaczego/jak rozwiązać ten problem.

Answer 1

Problem polega na tym, że dygraphy wykrywają szerokość/wysokość div jako 0/0 i nie uczą się inaczej, dopóki nie zostaną przerysowane (nie ma zdarzenia JS, które jest uruchamiane, gdy zmieniany jest pojedynczy element DOM).

Najprostszym rozwiązaniem jest po prostu wyraźnie niech dygraph wiedzieć powinien zaktualizować swoją wielkość i od nowa się po div jest przełączany za pomocą g.resize();

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

zaktualizowałem swoją jsfiddle http://jsfiddle.net/78sJT/13/

Answer 2

prostu hit tego wydać w Chrome 37.0.2062.124 m, odpowiadając problemowi opisanemu w pytaniu OP. Jednak nie używam żadnej konkretnej biblioteki graficznej, tylko rysuję na płótnie. I ponownie rysowałem płótno, gdy zmieniał się rozmiar otaczającego DIV.

Uważam, że jeśli szerokość lub wysokość płótna jest ustawiona na zero, staje się niewiarygodne. Gdy następnym razem ustawisz szerokość i wysokość na wartości niezerowe, dowolny rysunek, który na nim wykonasz, zostanie natychmiast zignorowany, mimo że jego szerokość i wysokość są teraz niezerowe i można je zobaczyć w drzewie elementów (i najechaniu kursorem myszy). wyróżnione na stronie) w debugerze Chrome.

Więc oprócz doradztwa w odpowiedzi benni_mac_b za musisz:

• użycie setTimeout lub podobny do opóźnienia rysunek na płótnie, więc nie rób tego od razu po ustawieniu szerokość/wysokość, lub
• Upewnij się, że nigdy nie ustawisz płótna na zero szerokości/wysokości. Upewnij się, że jest to co najmniej 1 piksel.

Zrobiłem później dla prostoty i rozwiązuje problem.

Podsumowując:

Płótno że właśnie uprawia od (0, 0) do (1000, 1000), nie można wyciągnąć natychmiast - ignoruje wszystkie instrukcje rysowania. Ale jeśli tylko wyrosło z (1, 1) do (1000, 1000), możesz natychmiast narysować to wszystko.