在矩形中旋转点答案

【问题标题】：Rotate point in rectangle在矩形中旋转点
【发布时间】：2010-03-12 12:10:50
【问题描述】：

我在一个矩形中有一个点，我需要旋转任意角度并找到该点的 x y。我如何使用 javascript 来做到这一点。

在 x,y 下方会是 1,3，在我将 90 传递给方法后，它将返回 3,1。

|-------------|
|  *          |
|             |
|             |
|-------------|
 _____
|    *|
|     |
|     |
|     |
|     |
 _____

|-------------|
|             |
|             |
|            *|
|-------------|
 _____
|     |
|     |
|     |
|     |
|*    |
 _____

基本上我正在寻找这种方法的勇气

function Rotate(pointX,pointY,rectWidth,rectHeight,angle){
   /*magic*/    
   return {newX:x,newY:y};
}

【问题讨论】：

标签： javascript rotation trigonometry

【解决方案1】：

应该这样做：

function Rotate(pointX, pointY, rectWidth, rectHeight, angle) {
  // convert angle to radians
  angle = angle * Math.PI / 180.0
  // calculate center of rectangle
  var centerX = rectWidth / 2.0;
  var centerY = rectHeight / 2.0;
  // get coordinates relative to center
  var dx = pointX - centerX;
  var dy = pointY - centerY;
  // calculate angle and distance
  var a = Math.atan2(dy, dx);
  var dist = Math.sqrt(dx * dx + dy * dy);
  // calculate new angle
  var a2 = a + angle;
  // calculate new coordinates
  var dx2 = Math.cos(a2) * dist;
  var dy2 = Math.sin(a2) * dist;
  // return coordinates relative to top left corner
  return { newX: dx2 + centerX, newY: dy2 + centerY };
}

【讨论】：

你忘记了数学。关于 atan2、cos 和 sin，但这是完美的！

【解决方案2】：

newX = Math.cos(angle) * pointX - Math.sin(angle) * pointY;
newY = Math.sin(angle) * pointX + Math.cos(angle) * pointY;

确保指定相对于旋转原点的坐标！

（没有准确检查语法，但数学是基于旋转矩阵）

【讨论】：