javascript - 如何在分形绘图递归函数中创建延迟

Question

我正在使用 Eloquent JavaScript 中遇到的分形绘图递归函数。 .

我想为每个分支的绘制设置一个延迟 - 以便在我修改此函数及其参数时可视化分支/递归调用的流程。

我用过的方式setTimeout下面的代码似乎不起作用，我很困惑为什么。

我预计cx.fillRect(...)每次延迟绘制一个分支；而不是堆叠在队列中，因为 setTimeout 之外没有其他代码等待。

下面我首先包含了工作分形绘图 html/js 代码，没有尝试包含延迟。第二段代码是我尝试包含 setTimeout延迟。

我尝试使用 setTimeout 进行非工作尝试:

<canvas width="600" height="300"></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");

  function branch(length, angle, scale) {
    setTimeout(() => {
      cx.fillRect(0, 0, 1, length);
      if (length < 8) return;
      cx.save();
      cx.translate(0, length);
      cx.rotate(-angle);
      branch(length * scale, angle, scale);
      cx.rotate(2 * angle);
      branch(length * scale, angle, scale);
      cx.restore();
    }, 80);
  }
  cx.translate(300, 0);
  branch(60, 0.5, 0.8);
</script>

无延迟地工作代码:

<canvas width="600" height="300"></canvas>
<script>
  let cx = document.querySelector("canvas").getContext("2d");

  function branch(length, angle, scale) {
    cx.fillRect(0, 0, 1, length);
    if (length < 8) return;
    cx.save();
    cx.translate(0, length);
    cx.rotate(-angle);
    branch(length * scale, angle, scale);
    cx.rotate(2 * angle);
    branch(length * scale, angle, scale);
    cx.restore();
  }
  cx.translate(300, 0);
  branch(60, 0.5, 0.8);
</script>

Answer 1

使用 setTimeout 的尝试会延迟第一次调用，然后为其具有相同超时的子树生成两个递归调用，导致它们相互遍历，依此类推。

所有递归调用都需要等待整个左子树完成绘制，然后才能继续绘制右子树，这也需要在调用解析之前完成，并让父级继续进行下一个操作(右子树或解析) 。您不能让两个不同的调用框架同时干扰同一个 Canvas 堆栈。

我会使用 promise 来做到这一点；这使您可以管理 setTimeout 的顺序，并使用 sleep 函数设置所需的延迟，基本上是一个 promise 的 setTimeout。

const sleep = ms => new Promise(
  resolve => setTimeout(resolve, ms)
);

const cx = document.querySelector("canvas").getContext("2d");

async function branch(length, angle, scale) {
  cx.fillRect(0, 0, 1, length);

  if (length < 8) {
    return;
  }

  await sleep(50); // delay in ms, good to make into a parameter
  cx.save();
  cx.translate(0, length);
  cx.rotate(-angle);
  await branch(length * scale, angle, scale);
  cx.rotate(2 * angle);
  await branch(length * scale, angle, scale);
  cx.restore();
}

cx.translate(300, 0);
branch(60, 0.5, 0.8);

<canvas width="600" height="300"></canvas>

为了进行比较，以下是您如何在没有 promise 的情况下使用回调来完成此操作，每个子级都会触发该回调以向其父级发出信号，表明其已完成，以便父级知道何时绘制下一个子树或解析:

const cx = document.querySelector("canvas").getContext("2d");

function branch(length, angle, scale, done) {
  cx.fillRect(0, 0, 1, length);

  if (length < 8) {
    done && done();
    return;
  }

  setTimeout(() => {
    cx.save();
    cx.translate(0, length);
    cx.rotate(-angle);
    branch(length * scale, angle, scale, () => {
      cx.rotate(2 * angle);
      branch(length * scale, angle, scale, () => {
        cx.restore();
        done && done();
      });
    });    
  }, 50);
}

cx.translate(300, 0);
branch(60, 0.5, 0.8);

<canvas width="600" height="300"></canvas>

由于您要在 Canvas 上制作动画，因此您可能会考虑使用 requestAnimationFrame 来循环遍历绘制每个帧的生成器函数。英国皇家空军提供 better-quality animations than setTimeout .

const cx = document.querySelector("canvas").getContext("2d");

function *branch(length, angle, scale) {
  cx.fillRect(0, 0, 1, length);

  if (length < 8) {
    return;
  }

  yield;
  cx.save();
  cx.translate(0, length);
  cx.rotate(-angle);
  yield *branch(length * scale, angle, scale);
  cx.rotate(2 * angle);
  yield *branch(length * scale, angle, scale);
  cx.restore();
}

cx.translate(300, 0);
const branchGen = branch(60, 0.5, 0.8);
const speedMs = 50;
let lastTime = 0;
let done = false;

(function drawFrame(time) {
  !done && requestAnimationFrame(drawFrame);

  if (time && lastTime === 0) {
    lastTime = time;
  }
  else if (lastTime > 0 && time >= lastTime + speedMs) {
    ({done} = branchGen.next());
    lastTime += speedMs;
  }
})();

<canvas width="600" height="300"></canvas>