холст в div с отображением никто не работает

Question

У меня проблема с элементом canvas.Он не показывает, когда он находится в скрытом div и div переключается.лучшее объяснение и пример здесь

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

Это происходит в ff и chrome (не проверено другими).Может ли кто-нибудь сказать мне, почему / как преодолеть эту проблему.

Answer 1

Проблема в том, что dygraphs распознает ширину / высоту div как 0/0 и не учит иначе, пока не будет перерисован (нет события JS, которое запускается при изменении размера отдельного элемента DOM).

Самый простой обходной путь - просто явно указать, что dygraph должен обновить свой размер и перерисовать себя после переключения div, используя g.resize();

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

Я обновил ваш jsfiddle http://jsfiddle.net/78sJT/13/

Answer 2

Я только что столкнулся с этой проблемой в Chrome 37.0.2062.124 m, что соответствует проблеме, описанной в вопросе OP.Однако я не использую какую-либо конкретную графическую библиотеку, просто рисую на холсте.И я уже перерисовывал холст, когда размер окружающего DIV изменился.

Я обнаружил, что если ширина или высота холста установлена ​​на ноль, он становится ненадежным.В следующий раз, когда вы установите ненулевые значения ширины и высоты, любой чертеж, который вы делаете на нем немедленно, будет игнорироваться, даже если его ширина и высота теперь ненулевые, и его можно увидеть в дереве элементов (и при наведениивыделено на странице) в отладчике Chrome.

Так что в дополнение к совету в ответе benni_mac_b вы должны либо:

• использовать setTimeout, либо аналогично задержке рисования на холсте,поэтому вы не делаете это сразу после установки ширины / высоты, или
• убедитесь, что вы никогда не устанавливаете холст на нулевую ширину / высоту.Удостоверьтесь, что это по крайней мере 1 пиксель.

Я делаю позже для простоты, и это решает проблему.

В итоге:

Холст, который только что вырос с (0, 0) до (1000, 1000), не может быть нарисован немедленно - он игнорирует все инструкции рисования.Но если он только что вырос с (1, 1) до (1000, 1000), вы можете сразу же нарисовать все это.