如何将一个对象旋转到另一个对象（慢慢地）

Question

我一直在寻找这个功能，但到目前为止我找不到任何我能理解的东西。我已经有一个旋转函数来使它等于位置，但慢慢地证明使用 0-360 和所有的位置有点困难。

我正在使用 html canvas 2d 上下文在笛卡尔坐标系上渲染对象。

我希望 object1 以转弯速率 (R) 面对 positionX 和 positionY，相当简单。

我无需提供任何代码，因为无论如何您都可能自己编写代码。但无论如何我都会给你：

let faceAt = function (thisObject,positionX,positionY) {
  let desiredLocationX = positionX - thisObject.transform.x;
  let desiredLocationY =  positionY -thisObject.transform.y;
  thisObject.transform.rotation = Math.degrees(Math.atan2(desiredLocationY, desiredLocationX));
};

(Math.degrees) 函数将弧度转换为度数。

这个帖子说明了一切：https://www.google.ca/amp/s/jibransyed.wordpress.com/2013/09/05/game-maker-gradually-rotating-an-object-towards-a-target/amp/

Answer 1

这个问题很不清楚。但是，我假设您实际上只是想围绕 HTML5 画布上的任意点旋转元素。

在画布上，一次只能绘制一个元素。您无法真正操纵单个元素 - 例如，您无法自行旋转元素。相反，您需要旋转整个画布。这将始终围绕画布的中心旋转，但如果您移动画布原点，那么您将在画布的不同部分进行绘制；从而允许您围绕一个点旋转。

查看以下示例。您可以单击画布上的任意位置，使正方形围绕该点旋转。希望这就是你所追求的：

let cv = document.getElementById("cv");
let ctx = cv.getContext("2d");
let angle = 0;

//Variables you can change:
let speed = 1; //Degrees to rotate per frame
let pointX = 250; //The x-coord to rotate around
let pointY = 250; //The y-coord to rotate around

ctx.fillStyle = "#000";

setInterval(()=>{ //This code runs every 40ms; so that the animation looks smooth
  angle = (angle + speed) % 360; //Increment the angle. Bigger changes here mean that the element will rotate faster. If we go over 360deg, reset back to 0.
  
  ctx.clearRect(0, 0, 400, 400); //Clear away the previous frame.
  
  //Draw the point we are rotating around
  ctx.beginPath();
  ctx.arc(pointX,pointY,5,0,2*Math.PI);
  ctx.fill();
  ctx.closePath();
  
  ctx.save(); //Save the state before we transform and rotate the canvas; so we can go back to the unrotated canvas for the next frame
  
  ctx.translate(pointX, pointY); //Move the origin (0, 0) point of the canvas to the point to rotate around. The canvas always rotates around the origin; so this will allow us to rotate around that point
  ctx.rotate(angle*Math.PI/180); //Rotate the canvas by the current angle. You can use your Math.degrees function to convert between rads / degs here.
  
  ctx.fillStyle = "#f00"; //Draw in red. This is also restored when ctx.restore() is called; hence the point will always be black; and the square will always be red.
  
  ctx.fillRect(0, 0, 50, 50); //Draw the item we want rotated. You can draw anything here; I just draw a square.
  
  ctx.restore(); //Restore the canvas state
  
}, 40);





//Boring event handler stuff
//Move the point to where the user clicked
//Not too robust; relys on the body padding not changing
//Really just for the demo


cv.addEventListener("click", (event)=>{
    pointX = event.clientX - 10;
    pointY = event.clientY - 10;
});

#cv {
  border:solid 1px #000; /*Just so we can see the bounds of the canvas*/
  padding:0;
  margin:0;
}

body {
  padding:10px;
  margin:0;
}

<canvas id="cv" width="400" height="400"></canvas><br>
Click on the canvas above to make the rectangle rotate around the point that was clicked.