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

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

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

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

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

那么,是否有办法执行以下任何操作来完成此任务：

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

解决方法:

我想我找到了解决方案.尝试检测.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,javascript,jquery,svg,canvas
来源： https://codeday.me/bug/20190725/1536075.html