requestAnimationFrame 进入无限循环

Question

我正在根据 codepen.io 上的这个示例对画布进行简单的缩放和平移：

codepen.io 示例

所需的内容已正确绘制，但是当我添加 requestAnimationFrame 时，它会进入无限循环。

也许我不明白 requestAnimationFrame 是如何工作的，但是是什么触发了它的运行？我做错了什么？

这是代码：

function draw ()
{
  // Translate to the canvas centre before zooming - so you'll always zoom on what you're looking direc\
tly at
  let ctx = c.getContext('2d');
  ctx.translate( d_role.offsetWidth / 2, d_role.offsetHeight / 2 )
  ctx.scale(cameraZoom, cameraZoom)
  ctx.translate( -d_role.innerWidth / 2 + cameraOffset.x, -d_role.innerHeight / 2 + cameraOffset.y )

  let trx1 = d_role.offsetWidth / 2;
  let try1 = d_role.offsetHeight / 2;
  let trx2 = -d_role.offsetWidth / 2 + cameraOffset.x;
  let try2 = -d_role.offsetHeight / 2 + cameraOffset.y;

    create_tree(
      top_individuals,
      x_individuals
    );

  requestAnimationFrame(draw() );
}

这是绘制从对象生成的值中获取的图表的函数：

  function create_tree(
    top_individuals,
    x_individuals
    ) {

    const c = document.getElementById('canvas_tree');
    let ctx = c.getContext('2d');
    const font_size = 12;
    ctx.font = font_size + 'px monospace';
    console.log('got here AAA000', c);

    // Draw the rectangles
    for (let key in top_individuals) {
      console.log('got here AAA000', c);
      let y = top_individuals[key];
      let x = x_individuals[key];
      console.log('got here AAA111', x, y);
      ctx.beginPath();
      let x1 = x;
      let x2 = x + input_width;
      let y1 = y;
      let y2 = y + input_height;
      ctx.roundRect(x, y, input_width, input_height, 3);
      ctx.stroke();
      ctx.moveTo(x, y);
      let x_text = x + 2;
      let y_text = y - 2 + ((input_height + font_size) / 2);
      let text = key + ", x=" + x + ", y=" + y;
      ctx.fillText(text, x_text, y_text);
    }

    for (let key in top_individuals) {
      let even_key = is_even(key);
      console.log('key', key, even_key);
      if (even_key) {
        let key_divided_by_two = key / 2;
        console.log('key_divided_by_two', key_divided_by_two);
        let x1 = x_individuals[key_divided_by_two];
        let top1 = top_individuals[key_divided_by_two];
        let x2 = x_individuals[key];
        let top2 = top_individuals[key];
        let key_plus_one = key;
        ++key_plus_one;
        console.log('key_plus_one', key_plus_one);
        let x3 = x_individuals[key_plus_one];
        let top3 = top_individuals[key_plus_one];
        console.log('HELLO', x1, top1, x2, top2, x3, top3);
        connect_3_points(x1, top1, x2, top2, x3, top3, input_height, input_width)
      } else {
        continue;
      }
    }

    // Number is even or odd
    function is_even (number) {
      return number % 2 === 0;
    }

    function connect_3_points (x1, top1, x2, top2, x3, top3, input_height, input_width) {
      // Recalculate the coordinates
      const c = document.getElementById('canvas_tree');
      let ctx = c.getContext('2d');
      let new_x1 = x1 + input_width;
      let new_top1 = top1 + (input_height / 2);
      let new_x2 = x2;
      let new_top2 = top2 + (input_height / 2);
      let new_x3 = x3;
      let new_top3 = top3 + (input_height / 2);
      let new_x4 = new_x1 + (space_between_columns / 2);
      let new_top4 = new_top2;
      let new_x5 = new_x4;
      let new_top5 = new_top3;

      console.log("OLD", x1, top1, x2, top2, x3, top3);
      console.log("NEW", new_x1, new_top1, new_x2, new_top2, new_x3, new_top3, new_x4, new_top4, new_x5\
, new_top5);
      // Draw lines
      ctx.beginPath();
      ctx.moveTo(new_x2, new_top2);
      ctx.lineTo(new_x4, new_top4);
      ctx.lineTo(new_x4, new_top3);
      ctx.lineTo(new_x3, new_top3)
      ctx.moveTo(new_x1, new_top1)
      ctx.lineTo(new_x4, new_top1)
      ctx.stroke();
    }
  }

谢谢！

Answer 1

在调用

requestAnimationFrame

时，需要传入一个函数作为参数。在这里，您调用

draw

并将返回值传递给

requestAnimationFrame

。将

draw

的最后一行更改为

requestAnimationFrame(draw);