使KineticJS舞台变宽或在调整大小时更新舞台

Question

我已经创建了一个小的KineticJS动画，你可以在这个地址看到:

http://sandbox-ben.kimbiaservices.com/kineticjs/index.html

我想找到一种方法，这个动画总是被设置为100%的窗口宽度。(它将是另一个元素的"背景"区域。)

我可以通过将宽度设置为jQuery的$(window).width()来进行初始设置(可能有其他方法，但jQuery已经被使用)，但我不知道如何在调整大小或方向变化时重新绘制/重置舞台。

那么，有没有一种方法可以做到这一点:

1. 我可以将舞台设置为可变宽度(100%)吗?(我假设答案是否定的，但即使是肯定的，我也不确定动画是否能够相对缩放。)
2. 我可以只是清除动画和重新创建它的大小或方向的变化?这听起来不是很有效，当我试图使用layer.remove()来调整大小和方向时，它几乎挂起了浏览器。
或者是否有一种简单的方法将此图像转换为SVG文件，然后使用jQuery SVG来完成同样的事情?(前提是一切仍然工作在调整大小和方向变化)或者还有什么我没有想到的?

Answer 1

我想我找到解决办法了。尝试检测.on('resize')的问题是，调整窗口大小的行为会导致事件触发无数次，从而拖拽浏览器。

受到这个答案的启发:检测何时使用JavaScript调整窗口大小?—我能够创建一个jQuery事件，检测(或多或少)何时调整大小完成。完成后，清空容器元素并重新启动初始绘制脚本。下面的代码实现了这个功能:

$(window).on('resize',function(){
    if(this.resizeTO) clearTimeout(this.resizeTO);
    this.resizeTO = setTimeout(function(){
        $(this).trigger('resizeEnd');
    },500);
});
$(window).on('resizeEnd orientationchange',function(){
    $('#container').empty();
    RunHeaderAnim();
});