Calculate the bounding box’s X, Y, Height and Width of a rotated element via JavaScript

by

I know this is a bit late, but I’ve written a fiddle for exactly this problem, on an HTML5 canvas:

http://jsfiddle.net/oscarpalacious/ZdQKg/

I hope somebody finds it useful!

I’m actually not calculating your x,y for the upper left corner of the container. It’s calculated as a result of the offset (code from the fiddle example):

this.w = Math.sin(this.angulo) * rotador.h + Math.cos(this.angulo) * rotador.w;
this.h = Math.sin(this.angulo) * rotador.w + Math.cos(this.angulo) * rotador.h;
// The offset on a canvas for the upper left corner (x, y) is
// given by the first two parameters for the rect() method:
contexto.rect(-(this.w/2), -(this.h/2), this.w, this.h);

Cheers

More Related Contents:

  1. How to calculate rotation angle from rectangle points?
  2. When we using alert vs popup div tag? [closed]
  3. Download the text over image using jquery
  4. How to dynamically create CSS class in JavaScript and apply?
  5. JS Client-Side Exif Orientation: Rotate and Mirror JPEG Images
  6. React Js conditionally applying class attributes
  7. Get element CSS property (width/height) value as it was set (in percent/em/px/etc)
  8. iOS 8 removed “minimal-ui” viewport property, are there other “soft fullscreen” solutions?
  9. How to Include CSS and JS files via HTTPS when needed?
  10. How to close an open collapsed navbar when clicking outside of the navbar element in Bootstrap 3?
  11. Use images like checkboxes
  12. Trigger CSS transition on appended element
  13. How to stretch images with no antialiasing
  14. JavaScript: Find DIV’s line-height, not CSS property but actual line-height
  15. How can I generate the opposite color according to current color?
  16. Load less.js rules dynamically
  17. Check browser CSS property support with JavaScript?
  18. Can I access the value of invalid/custom CSS properties from JavaScript?
  19. scrollTop animation without jquery [duplicate]
  20. Resize a div on border drag and drop without adding extra markup
  21. How to swipe top down JQuery mobile
  22. Jquery: How to check if the element has certain css class/style
  23. link element onload
  24. What is the difference between window.innerWidth and screen.width?
  25. Google Maps not rendering completely on page?
  26. jQuery: Slide left and slide right
  27. Generate dynamic css based on variables angular
  28. Dynamically loading css file using javascript with callback without jQuery
  29. How to Bootstrap navbar static to fixed on scroll?
  30. Toggle divs without using Javascript

Leave a Comment