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

时间:2013-01-09 22:28:51

标签: javascript jquery canvas svg kineticjs

我创建了一个小型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. 或者还有其他我没想到的东西?

1 个答案:

答案 0 :(得分:8)

我想我找到了解决方案。尝试检测.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();
});