在显示无div的div中的画布不起作用 [英] canvas in a div with display none does not work

问题描述

我遇到了canvas元素的问题。它没有显示它何时在隐藏的div中并且div被切换。更好的解释和示例

http：// jsfiddle。 net / 78sJT / 10 /

这种情况发生在ff和chrome（未测试其他人）。谁能告诉我为什么/如何克服这个问题。

解决方案

问题是dygraphs将div的宽度/高度检测为0 / 0并且在重新绘制之前不会学习（没有JS事件在单个DOM元素调整大小时触发）。

最简单的解决方法是明确让dygraph知道它应该更新它的大小并在使用 g.resize（）;

<切换div后重绘自己pre> $（document）.ready（function（）{
$（'。click'）。click（function（）{
$（'＃hidden' ）.toggle（）;
g.resize（）;
}）;
}）;


我更新了你的jsfiddle http://jsfiddle.net/78sJT/13/

I am having a problem with a canvas element. It does not show when it is in a hidden div and the div is toggled. better explanation and example here

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

This is happening in ff and chrome (not tested others). Could anyone tell me why / how to overcome this issue.

解决方案

The issue is that dygraphs detects the div's width/height as 0/0 and doesn't learn otherwise until it's redrawn (there is no JS event which fires when an individual DOM element is resized).

The easiest workaround is to just explicitly let the dygraph know it should update its size and redraw itself after the div is toggled using g.resize();

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

I updated your jsfiddle http://jsfiddle.net/78sJT/13/

这篇关于在显示无div的div中的画布不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！