HTML Canvas - вращать элементы - PullRequest
Новая
       5

HTML Canvas - вращать элементы

0 голосов
/ 16 октября 2019

Я хочу повернуть массив прямоугольников вокруг их центра на заданный угол.

HTML: 

<div class="canvas-wrapper">
    <canvas id="hall_elements" style="border: 2px solid rgb(0, 0, 0); width: 700px; height: 300px;" width="700" height="300"></canvas>
</div>

JS: 

var hall_elements = [
{x: 20, y: 20},
{x: 60, y: 60},
{x: 20, y: 60}
];
var hall_canvas=document.getElementById("hall_elements");
var hall_ctx = hall_canvas.getContext("2d");

function draw() {
  hall_ctx.clearRect(0, 0, 700, 300);

  for(var i=0;i<hall_elements.length;i++){
    var r=hall_elements[i];
    if(r) {                
      rect(r.x, r.y, 20, 20,0,"#0000FF");              
    }
  }
  for(var i=0;i<hall_elements.length;i++){
    var r=hall_elements[i];
    if(r) {
      rect(r.x, r.y, 20, 20,45,"#00FF00");              
    }
  }              

}

function rect(x,y,w,h,angle = 0, color ) {
        hall_ctx.save();

        if(angle>0) {                      
            hall_ctx.translate( parseInt(x)+parseInt(parseInt(w)/2), parseInt(y)+parseInt(parseInt(h)/2) );
            hall_ctx.rotate(angle*Math.PI/180);

            x -= parseInt(w/2);
            y -= parseInt(h/2);

        }

        hall_ctx.beginPath();

        hall_ctx.rect(x,y,w,h);

        hall_ctx.closePath();
        hall_ctx.fillStyle = color;
        hall_ctx.fill();    


        hall_ctx.restore();
    }

draw();

Здесь у меня естьскрипка https://jsfiddle.net/h8ouctwv/

Я хочу, чтобы эти синие прямоугольники поворачивались на 45 градусов. Но результат (зеленые прямоугольники) неуместен по сравнению с синими прямоугольниками.

Что я делаю не так?

ОБНОВЛЕНИЕ С РЕШЕНИЕМ (спасибо @somethinghere): 

function rect(x,y,w,h,angle = 0, color ) {
        hall_ctx.save();

        if(angle>0) {                      
            hall_ctx.translate( parseInt(x)+parseInt(parseInt(w)/2), parseInt(y)+parseInt(parseInt(h)/2) );
            hall_ctx.rotate(angle*Math.PI/180);

//*** CHANGE ***///
            x = -parseInt(w/2);
            y = -parseInt(h/2);
//*** END CHANGE ***///

        }

        hall_ctx.beginPath();

        hall_ctx.rect(x,y,w,h);

        hall_ctx.closePath();
        hall_ctx.fillStyle = color;
        hall_ctx.fill();    


        hall_ctx.restore();
    }
...