javascript - 在调整大小时制作可变宽度的 KineticJS 阶段或更新阶段

Question

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

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

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

我可以通过从 jQuery 将宽度设置为 $(window).width() 来完成初始设置(可能还有其他方法可以做到这一点，但 jQuery 已经被使用了)，但我不知道如何在调整大小或方向更改时重绘/重置舞台。

那么，有没有一种方法可以执行以下任一操作来实现此目的:

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

Answer 1

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

受此答案启发:Detect when a window is resized using 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();
});