在调整大小时使KineticJS阶段变宽或更新阶段

Question

我创建了一个小型KineticJS动画,你可以在这个地址看到:

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

我想找到一种方法,让这个动画始终设置为窗口宽度的100%.(它将是另一个元素的"背景"区域.)

我可以通过将jQuery中的宽度设置为$(window).width()来做初始设置(可能有其他方法可以做到这一点,但jQuery已经被使用了),但我无法弄清楚如何重绘/在调整大小或方向更改时重置舞台.

那么,有没有办法做以下任何事情来实现这一目标:

1. 我能以某种方式将舞台设置为可变宽度(100%)吗？(我假设答案是否定的,但即使是肯定的,我也不确定动画是否能够相对缩放.)
2. 我可以清除动画并在调整大小或方向更改时重新创建它吗？这听起来并不是非常有效,当我尝试在resize和orientationchange上使用layer.remove()时,它几乎挂起了浏览器.
3. 或者是否有一种简单的方法将此图像转换为SVG文件,然后使用jQuery SVG来完成同样的事情？(前提是所有内容仍可用于调整大小和方向更改.)
4. 或者还有其他我没想到的东西？

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();
});