javascript - 将 Canvas 拉伸(stretch)至完整宽度和高度以动态调整大小

Question

我有一个页面，其中元素动态添加到彼此下方(并且可以拖动)。当元素数量超过视口(viewport)高度时，页面的高度就会变长。与用户将其拖出正常范围相同 - 它会变得更宽。

我可以通过什么事件来跟踪此事件？ $(window).resize() 不起作用，因为窗口并未真正调整大小。是否有一个我可以处理的事件，而不是在拖动或添加元素时检查宽度和高度之类的事情？

Fiddle of what I'm talking about .

Answer 1

在点击事件中，您想要将高度重新设置为文档高度。

canvas.height = $(document).height();

See Fiddle

<小时/>

或者您可以:

$(document).bind('DOMSubtreeModified', function(e) {
    canvas.height = $(document).height();
});

但不建议这样做，因为几乎每次 DOM 发生问题时它都会设置高度。你可以想象这是多么过分。因此，最好对您知道会扩展页面内容的事件调用函数。

另请注意，这在 IE 中可能不起作用，因为您可能希望创建自己的函数来以某个时间间隔(例如 50 毫秒)检查文档的高度。

See Fiddle