代码之家 › 专栏 › 技术社区 › T. Stone

在矩形中旋转点

cos sin rotation javascript

T. Stone · 技术社区 · 14 年前

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

在x下面,y类似于1,3,在我将90传递给方法之后,它将返回3,1。

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

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

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

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

2 回复 | 直到 12 年前

Guffa 14 年前

应该这样做:

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 };
}

Chris Lercher 14 年前

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

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

(没有正确检查语法,但数学是基于旋转矩阵)

推荐文章

Niko · 边框css更改速度快于变换旋转

6 年前

NOOBAF · 将数组传递给函数(C)

6 年前

Axel M · WPF自动旋转无极边界线ArgRadientBrush顺时针旋转,不旋转其余部分

6 年前

Mevia · 画布水平旋转img

6 年前

ThePurpleArcher · 统一if语句中四元数和eulerAngles的问题

6 年前

Nikolay Baranenko · Kafka循环垃圾收集日志

6 年前

E. Huckabee · SceneKit:使用平移手势将相机朝其面对的方向移动

6 年前

Thomas Schütt · javafx-如何将偏航、俯仰和滚动增量(而不是euler)应用于节点旋转轴,而不是场景旋转轴?

6 年前

Vinayak B · 确定片段重新启动是由于屏幕旋转还是浏览页面滑动?

6 年前

user9187461 · 管线旋转30度

6 年前