Paper.js 缩放变换在 onFrame 事件之外继续

问题描述

我在使用 Paper.js 时遇到了一个奇怪的问题 - 我正在使用该库在播放音频时缩放随机生成的花朵的“花瓣”。

如果花朵正在“生长”并且用户导航到浏览器中的不同选项卡，问题就会出现。尽管当窗口不在视野中时 onFrame 事件似乎没有触发，但此时当前正在缩放的花瓣将继续无限期地缩放。

我什至尝试使用一个特殊的 js 库来确定窗口是否在视图中，但仍然无法让花瓣停止缩放。

您可以在此处查看演示，因为我什至无法在纸草图中复制它：https://demos2.paperbeatsscissors.com/

还包括我的 onFrame 代码，以防问题对某人很明显：

view.onFrame = function(event) {
    
    // See if something is playing
    if (playing > -1) {

      // Get the active flower
      var activeFlower = garden[playing],activeData = activeFlower.data;

      // Active layer and petal
      var activeLayer = getEl(activeFlower,activeData.lIndex),activePetal = getEl(activeLayer,activeData.pIndex);

      // Variables
      var time = activeData.audio.seek(),scaleAmount = (1 / (activeData.timing / event.delta.toFixed(3))) * 2;

      // Petal progression
      if (!activeData.completed) {
        if (activePetal.scaling.x < 1 && activePetal.scaling.y < 1) {
          activePetal.pivot = {x: 0,y: activePetal.height / 2};
          activePetal.scaling.x = activePetal.scaling.x + scaleAmount;
          activePetal.scaling.y = activePetal.scaling.y + scaleAmount;
        } else {
          if (activeData.pIndex < (activeLayer.children.length - 1)) {
            // If the petal is scaled,jump to a new petal
            activeData.pIndex += 1;
          } else {
            if (activeData.lIndex > 0) {
              // When all petals are bloomed,jump to a new layer
              activeData.pIndex = 0;
              activeData.lIndex -= 1;
            } else {
              // Set the flower as completed
              activeData.completed = true;
            }
          }
        }
      }

      activeFlower.rotate(.125,activeData.center);

      // Reset the playing variable if the audio clip is complete and the flower has completed
      if (!activeData.audio.playing() && time === 0 && activeData.completed) {
        playing = -1;
      }
    }
  }

真的很难过这个，所以非常感谢任何帮助！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascript paperjs