javascript - Get rotated rectangle points from x, y, width, height and rotation - Stack Overflow

admin管理员组

文章数量:1026989

I have a rectangle which is rotated (in this case 45 degrees) and looks like this:

And I know that X is from the top left corner of the rectangle (if it were unrotated, in this case the point at the top of the picture). Y is also from the top left corner. I have the width and the height and the bounding box. I want to find out what the other points of this rectangle are. The top left (technically the X position in this case), the top right, the bottom right and the bottom left. I was trying to use a transformation matrix but I can't seem to wrap my head around it.

How would one find the other points of this rectangle? Technically I am working in JavaScript but any language should be able to deal with this problem.

I have a rectangle which is rotated (in this case 45 degrees) and looks like this:

And I know that X is from the top left corner of the rectangle (if it were unrotated, in this case the point at the top of the picture). Y is also from the top left corner. I have the width and the height and the bounding box. I want to find out what the other points of this rectangle are. The top left (technically the X position in this case), the top right, the bottom right and the bottom left. I was trying to use a transformation matrix but I can't seem to wrap my head around it.

How would one find the other points of this rectangle? Technically I am working in JavaScript but any language should be able to deal with this problem.

• javascript
• math
• geometry
• trigonometry

Share Improve this question Follow asked Jul 10, 2016 at 22:42 JohnstonJohnston 20.9k2222 gold badges7676 silver badges124124 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

for anybody else looking for this. Here is a function to do so.

x,y,height and width are as shown in the picture below. ang is the angle between the x,y point and the Y-Axis. if you want the one between the x,y point and the X-Axis simply do so: ang = 90 - ang before sending it to the function

isDeg is simply whether you are sending the ang in Radians or Degrees.

function getRectFourPoints(x,y, width, height, ang, isDeg = false) {
  	
	if(isDeg) ang = ang * (Math.PI / 180)

	const points = {first: {x,y}}
	const sinAng = Math.sin(ang)	
	const cosAng = Math.cos(ang)
	
	let upDiff = sinAng * width
	let sideDiff = cosAng * width
	const sec = {x: x + sideDiff, y: y + upDiff}
	points.sec = sec
	
	upDiff = cosAng * height
	sideDiff = sinAng * height
	points.third = {x: x + sideDiff, y: y - upDiff}
	
	const fourth = {x: sec.x + sideDiff, y: sec.y - upDiff}
	points.fourth = fourth
	return points
}

The rotation matrix can help to calculate its current position based on its previous one. If it's rotating clockwise, the 2D rotation matrix is as follows:

which makes

I have a rectangle which is rotated (in this case 45 degrees) and looks like this:

And I know that X is from the top left corner of the rectangle (if it were unrotated, in this case the point at the top of the picture). Y is also from the top left corner. I have the width and the height and the bounding box. I want to find out what the other points of this rectangle are. The top left (technically the X position in this case), the top right, the bottom right and the bottom left. I was trying to use a transformation matrix but I can't seem to wrap my head around it.

How would one find the other points of this rectangle? Technically I am working in JavaScript but any language should be able to deal with this problem.

I have a rectangle which is rotated (in this case 45 degrees) and looks like this:

And I know that X is from the top left corner of the rectangle (if it were unrotated, in this case the point at the top of the picture). Y is also from the top left corner. I have the width and the height and the bounding box. I want to find out what the other points of this rectangle are. The top left (technically the X position in this case), the top right, the bottom right and the bottom left. I was trying to use a transformation matrix but I can't seem to wrap my head around it.

How would one find the other points of this rectangle? Technically I am working in JavaScript but any language should be able to deal with this problem.

• javascript
• math
• geometry
• trigonometry

Share Improve this question Follow asked Jul 10, 2016 at 22:42 JohnstonJohnston 20.9k2222 gold badges7676 silver badges124124 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

for anybody else looking for this. Here is a function to do so.

x,y,height and width are as shown in the picture below. ang is the angle between the x,y point and the Y-Axis. if you want the one between the x,y point and the X-Axis simply do so: ang = 90 - ang before sending it to the function

isDeg is simply whether you are sending the ang in Radians or Degrees.

function getRectFourPoints(x,y, width, height, ang, isDeg = false) {
  	
	if(isDeg) ang = ang * (Math.PI / 180)

	const points = {first: {x,y}}
	const sinAng = Math.sin(ang)	
	const cosAng = Math.cos(ang)
	
	let upDiff = sinAng * width
	let sideDiff = cosAng * width
	const sec = {x: x + sideDiff, y: y + upDiff}
	points.sec = sec
	
	upDiff = cosAng * height
	sideDiff = sinAng * height
	points.third = {x: x + sideDiff, y: y - upDiff}
	
	const fourth = {x: sec.x + sideDiff, y: sec.y - upDiff}
	points.fourth = fourth
	return points
}

The rotation matrix can help to calculate its current position based on its previous one. If it's rotating clockwise, the 2D rotation matrix is as follows:

which makes

本文标签：