Поворот пользовательского объекта Canvas вокруг собственного центра - PullRequest
Новая
       43

Поворот пользовательского объекта Canvas вокруг собственного центра

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

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

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

  ctx.save();
  ctx.translate(x,y);
  ctx.rotate(rotation*Math.PI/180);
  //ctx.moveTo(x + hex_size * Math.cos(0), y + hex_size * Math.sin(0));
  ctx.moveTo(0,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();
}

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

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

Проблема в том, что я НЕ могу заставить Пользовательскую Форму (Шестиугольник) вращаться вокруг центра (его собственной оси).Я понял, что это как-то связано с translate() и циклом for, где рисуются линии.

Опять же, весь Код здесь.

1 Ответ

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

Неважно ... понял, я забыл вычесть половину ширины фигуры из точки перевода, а также порядок кажется более важным, чем я думал.

Рабочий код 

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

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