围绕中心点旋转对象坐标

如何解决围绕中心点旋转对象坐标

编辑：正在工作的 jsfiddle：https://jsfiddle.net/Harry999/xy9uq7ed/56/

我正在制作一个 HTML 画布游戏。

https://jsfiddle.net/Harry999/xy9uq7ed/53/

我的目标是围绕一个中心点旋转多个形状。

形状的 x 和 y 坐标必须随着形状旋转以进行碰撞检测。

如何使形状围绕中心点旋转？ (centerX,centerY)

如何设置形状旋转的速度？ （速度）

如何从形状旋转的中心点设置半径？ （半径）

var rotationAmount = 10;
var rect = new rectangle(20,20,200,10,2);

var gameArea = {
  canvas: document.createElement("canvas"),create: function() {
     this.canvas.width = 400;
     this.canvas.height = 400;
     this.context = this.canvas.getContext("2d");
     document.body.insertBefore(this.canvas,document.body.childNodes[0]);
  },start: function() {
     this.interval = setInterval(redraw,20);
  },clear: function() {
     this.context.clearRect(0,this.canvas.width,this.canvas.height);
  }
}

// runs every  20ms
function redraw() {
   gameArea.clear();
   rect.update();
}

function rectangle(width,height,x,y,radius,speed) {
    this.gamearea = gameArea;
    this.width = width;
    this.height = height;
    this.x = x;
    this.y = y;
    this.radians = Math.PI;
  
    // I want these to be the center points of the rotation
    this.centerX = x;
    this.centerY = y;
    // I want this to be the distance at which the rect rotates from the center
    this.radius = radius;
    // I want this to be the speed at which the rect rotates
    this.speed = speed;
  
    this.update = function() {
    // iterate rotation amount through 10 - 360 degrees 
    if (rotationAmount < 360) {
       rotationAmount += 10;
    } else {
       rotationAmount = 10;
    }
  
    // update radians
    this.radians = rotationAmount * (Math.PI / 180);
        
    // adjust x and y coordinates
    this.x = this.x + this.width * Math.sin(this.radians);
    this.y = this.y + this.width * Math.cos(this.radians);

    // draw rectangle
    gameArea.context.fillStyle = "red";
    gameArea.context.fillRect(this.x-this.width/2,this.y-this.height/2,this.width,this.height);
    
    // draw center point
    gameArea.context.fillStyle = "black";
    gameArea.context.fillRect(this.centerX-2,this.centerY-2,4,4);
  }
}

// run game
gameArea.create();
gameArea.start();

解决方法

class Point
{
    constructor(x,y,pos=false)
    {
        if(pos==false)
        {
            this.pos=[x,y];
        }
        else
        {
            this.pos=pos;
        }
    }
    rotate(angle,cx,cy)
    {
        angle=angle*3.14/180;
        let newX = Math.cos(angle)*this.pos[0]-Math.sin(angle)*this.pos[1]+cx;
        let newY = Math.sin(angle)*this.pos[0]+Math.cos(angle)*this.pos[1]+cy;
        this.pos=[newX,newY];
    }
    size(x,y)
    {
        this.pos=[this.pos[0]*x,this.pos[1]*y];
    }
    draw(x,y)
    {
        window.ctx.fillRect(this.pos[0]+x,this.pos[1]+y,1,1);
    }
}```
cx,cy - point of rotating
more angle you use - faster it rotates
distance from point to center is radius,if you want to make it lower than just edit coords

,

我想通了。工作示例jsfiddle：

https://jsfiddle.net/Harry999/xy9uq7ed/56/

var rect = new rectangle(20,20,200,40,10);
var rect2 = new rectangle(20,10,20);

var gameArea = {
  canvas: document.createElement("canvas"),create: function() {
    this.canvas.width = 400;
    this.canvas.height = 400;
    this.context = this.canvas.getContext("2d");
    document.body.insertBefore(this.canvas,document.body.childNodes[0]);
  },// start interval that redraws canvas once every 20 ms
  start: function() {
    this.interval = setInterval(redraw,20);
  },clear: function() {
    this.context.clearRect(0,this.canvas.width,this.canvas.height);
  }
}

// runs every  20ms
function redraw() {
  gameArea.clear();
  rect.update();
  rect2.update();
}


function rectangle(width,height,centerX,centerY,radius,speed) {
  this.gamearea = gameArea;
  this.width = width;
  this.height = height;
  // Center points of the rotation
  this.centerX = centerX;
  this.centerY = centerY;
  // The distance at which the rect rotates from the center
  this.radius = radius;
  // The coordinates of the shape
  this.x = this.centerX + this.radius;
  this.y = this.centerY + this.radius;
  // The speed at which the shape rotates
  this.speed = speed;
  // this.angle is calculated in radians
  this.angle = this.speed * (Math.PI / 180);

  this.update = function() {
    // adjust x and y coordinates
    var x2 = this.centerX + (this.x - this.centerX) * Math.cos(this.angle) - (this.y - this.centerY) * Math.sin(this.angle);
    var y2 = this.centerY + (this.x - this.centerX) * Math.sin(this.angle) + (this.y - this.centerY) * Math.cos(this.angle);
        // update x and y coordinates
    this.x = x2;
    this.y = y2;
    // draw rectangle
    gameArea.context.fillStyle = "red";
    gameArea.context.fillRect(this.x - this.width / 2,this.y - this.height / 2,this.width,this.height);

    // draw center point
    gameArea.context.fillStyle = "black";
    gameArea.context.fillRect(this.centerX - 2,this.centerY - 2,4,4);
  }
}

// run game
gameArea.create();
gameArea.start();