3

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

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

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

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

那么，有没有办法执行以下任何操作来完成此操作：

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

1 回答 1

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();
});
于 2013-01-09T22:55:09.900 回答