Question

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

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

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

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

那么，有没有办法完成以下任何任务：

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

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

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

1 个答案: