javascript - Find vertices of rectangle after rotating it - Stack Overflow

admin管理员组

文章数量:1429882

So I admit I didn't really know how to phrase the question. But a full explanation should help shed some light. Here is what I know. I have a rectanlge drawn on an HTML5 Canvas. I know the points of all 4 corners and the width and height. From this I can calculate the mid-point. What I want to know is if I rotate the rectangle n degress, what the new points will be. So for example I want to rotate it 45deg from the center point. What will the new vertices of the four corners be? Hopefully that fully explains what I'm looking for. Code examples, preferably in JavaScript, would be great. Thanks in advance.

So I admit I didn't really know how to phrase the question. But a full explanation should help shed some light. Here is what I know. I have a rectanlge drawn on an HTML5 Canvas. I know the points of all 4 corners and the width and height. From this I can calculate the mid-point. What I want to know is if I rotate the rectangle n degress, what the new points will be. So for example I want to rotate it 45deg from the center point. What will the new vertices of the four corners be? Hopefully that fully explains what I'm looking for. Code examples, preferably in JavaScript, would be great. Thanks in advance.

• javascript
• math
• geometry

Share Improve this question Follow asked Mar 7, 2014 at 21:51 selanac82selanac82 3,01055 gold badges2828 silver badges3737 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

This function calculates what you need. `pivot' is the origin of the rotation (the center of the rectangle in your case).

function rotatePoint(pivot, point, angle) {
  // Rotate clockwise, angle in radians
  var x = Math.round((Math.cos(angle) * (point[0] - pivot[0])) -
                     (Math.sin(angle) * (point[1] - pivot[1])) +
                     pivot[0]),
      y = Math.round((Math.sin(angle) * (point[0] - pivot[0])) +
                     (Math.cos(angle) * (point[1] - pivot[1])) +
                     pivot[1]);
  return [x, y];
};

To convert the degrees to randians:

function degToRad(deg) {
  return deg * Math.PI / 180;
}

本文标签： javascriptFind vertices of rectangle after rotating itStack Overflow