Вращение объекта в цикле анимации - PullRequest
Новая
       53

Вращение объекта в цикле анимации

0 голосов
/ 31 мая 2018

Я создал несколько функций, они будут рисовать прямоугольники, круги, шестиугольники и т. Д. Одна из них выглядит следующим образом: 

rotation = 45;
function hex(hex_sides, hex_size, hex_color){
  x = ctx.canvas.width/2;
  y = ctx.canvas.height/2;

  ctx.save();
  ctx.rotate(rotation*Math.PI/180);
  ctx.translate(ctx.canvas.width/2, ctx.canvas.height/2);
  ctx.moveTo(x + hex_size * Math.cos(0), y + hex_size * Math.sin(0));
  ctx.restore();

  for (i = 0; i < hex_sides+1; i++) {
    ctx.lineTo(x + hex_size * Math.cos(i * 2 * Math.PI / hex_sides), y + hex_size * Math.sin(i * 2 * Math.PI / hex_sides));
  }

  ctx.strokeStyle = hex_color;
  ctx.stroke();
}

Теперь я вызываю функции для рисования фигур внутри моего цикла анимации. 

function loop() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  circle(200);
  circle(220);
  hex(6, 180, "#fff");
  rotation += 0.4;
  requestAnimationFrame(loop);
}

Я увеличиваю var rotation внутри цикла, но он вращает не всю фигуру, а только одну ее линию.Другие формы, которые я вообще не могу вращать.Я думаю, что у меня неправильный подход, возможно, из-за моей путаницы в отношении .save () и .restore() или .beginPath() и .closePath().

В общем, поведение очень странное, когда я начинаю использовать .translate() и .rotate()

Весь код здесь.

ОБНОВЛЕНИЕ Это определенно что-то в этой строке: 

ctx.translate(ctx.canvas.width/2, ctx.canvas.height/2);

Как-то не правильно переводится.Вращение теперь происходит почти вокруг середины, но я хочу, чтобы Объект вращался вокруг своей собственной оси.

Я изменил функцию hex() на: 

ctx.save();
ctx.translate(ctx.canvas.width/2, ctx.canvas.height/2);
ctx.rotate(rotation*Math.PI/180);
ctx.moveTo(x + hex_size * Math.cos(0), y + hex_size * Math.sin(0));
for (i = 0; i < hex_sides+1; i++) {
  ctx.lineTo(x + hex_size * Math.cos(i * 2 * Math.PI / hex_sides), y + hex_size * Math.sin(i * 2 * Math.PI / hex_sides));
}
ctx.strokeStyle = hex_color;
ctx.stroke();
ctx.restore();
...