Databases
StackOverflow2013
Postsdbo
POHow to find the x,y coordinates of a rotated vector
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to find the x,y coordinates of a rotated vector
    text
    copied!<p>I found the best way of calculating the width and height of the bounding box of a vector post-rotation from a different stack overflow post. This worked great. My problem now is calculating the new x,y coordinates of the rotated vector's bounding box. Here is the my javascript. The <code>newWidth, newHeight</code> variables are correct -- the <code>rotatedXPos, rotatedYPos</code> are not correct, however, and it's because <code>x0, y0</code> -- which I think should be the rotating middle of the vector -- are also incorrect (They're set to just the x,y coordinates of the upper-right/left of the vector, which I know is wrong).</p> <pre><code>this.options.rotationAngle = parseInt(this.options.lastRotationAngle); var degreesAsRadians = this.options.rotationAngle*Math.PI/180; var points = new Array(); points.push({x:0, y:0}); points.push({x:this.options.width, y:0}); points.push({x:0, y:this.options.height}); points.push({x:this.options.width, y:this.options.height}); var bb = new Array(); bb['left'] = 0; bb['right'] = 0; bb['top'] = 0; bb['bottom'] = 0; $A(points).each(function(p) { var newX = Math.abs(parseInt(p.x * Math.cos(degreesAsRadians) + p.y * Math.sin(degreesAsRadians))); var newY = Math.abs(parseInt(p.x * Math.sin(degreesAsRadians) + p.y * Math.cos(degreesAsRadians))); bb['left'] = Math.min(bb['left'], newX); bb['right'] = Math.max(bb['right'], newX); bb['top'] = Math.min(bb['top'], newY); bb['bottom'] = Math.max(bb['bottom'], newY); }); var newWidth = parseInt(Math.abs(bb['right'] - bb['left'])); var newHeight = parseInt(Math.abs(bb['bottom'] - bb['top'])); Object.extend(this.options, { rotatedWidth: newWidth ,rotatedHeight: newHeight }); var x0 = this.options.xPos; var y0 = this.options.yPos; this.options.rotatedXPos = x0+(this.options.xPos-x0)*Math.cos(degreesAsRadians)+(this.options.yPos-y0)*Math.sin(degreesAsRadians); this.options.rotatedYPos = y0-(this.options.xPos-x0)*Math.sin(degreesAsRadians)+(this.options.yPos-y0)*Math.cos(degreesAsRadians); </code></pre> <p><a href="http://screencast.com/t/MjAxNzZhN" rel="nofollow noreferrer">And here is a video.</a> In the video, the red box shows the newWidth, newHeight correctly, but the <code>rotatedXPos</code>, and <code>rotatedYPos</code> are not being calculated at the top/left of the newly rotated vector. I'd love any help, thanks much!</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload