製作可變寬度或更新階段的KineticJS舞臺上調整

Question

我創建了一個小KineticJS動畫，你可以在此地址查看：

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

我想找到一種方法，這種動畫始終設置爲窗口寬度的100％。 （這將是另一種元素「背景」區域。）

我可以從jQuery的寬度設置爲$（窗口）.WIDTH（）做初始設置（有可能是這樣做的其他方式，但jQuery將被使用），但我無法弄清楚如何重新繪製/重置舞臺上的調整大小或orientationchange。

那麼，有沒有辦法做到以下任何一種來實現：

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