問題描述

我在一個矩形中有一個點，我需要旋轉任意角度并找到該點的 x y.我如何使用 javascript 來做到這一點.

I have a point in a rectangle that I need to rotate an arbitrary degree and find the x y of the point. How can I do this using javascript.

在 x,y 下方會是 1,3，在我將 90 傳遞給方法后，它將返回 3,1.

Below the x,y would be something like 1,3 and after I pass 90 into the method it will return 3,1.

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

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

基本上我正在尋找這種方法的勇氣

Basically I am looking for the guts to this method

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

推薦答案

應該這樣做:

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

這篇關于在矩形中旋轉點的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！