title: Calculate corners of rotated rectangle in container
body: <p>I'm having some issues calculating the corners of a rotated rectangle within a rotated container with both having offset x/y co-ords.</p>
  
  <p>The pivot is off but I'm not sure of the solution. The following scenarios work:</p>
  
  <pre><code>(x, y, rotation)
  image = 0, 0, 45
  container = 100, 100, 45
  
  image = 200, 0, 45
  container = 100, 100, 0
  </code></pre>
  
  <p>however setting the rotation of the container, and the image co-ords messes up the pivot e.g.</p>
  
  <pre><code>image = 200, 0, 45
  container = 100, 100, 45
  </code></pre>
  
  <p>Below is the code for calculating the corners of the image in global co-ordinate space:</p>
  
  <pre><code>public get corners() {
          const worldData = this.worldData;
          //Get angle of object in radians;
          const radAngle = worldData.rotation * Math.PI / 180;
          const pivotX = worldData.pivotX;
          const pivotY = worldData.pivotY;
          const width = this.sourceWidth * worldData.scaleX;
          const height = this.sourceHeight * worldData.scaleY;
          const x = worldData.x;//this.x;
          const y = worldData.y;//this.y;
  
          //Get the corners
          const c1 = this.getCorner(pivotX, pivotY, x, y, radAngle);
          const c2 = this.getCorner(pivotX, pivotY, x + width, y, radAngle);
          const c3 = this.getCorner(pivotX, pivotY, x + width, y + height, radAngle);
          const c4 = this.getCorner(pivotX, pivotY, x, y + height, radAngle);
  
          return {c1, c2, c3, c4};
      }
  
      public get worldData() {
          let x = this.x;
          let y = this.y;
          let pivotX = this.x;
          let pivotY = this.y;
          let rotation = this.rotation;
          let scaleX = this.scaleX;
          let scaleY = this.scaleY;
          let parent = this.parent;
  
          while(parent) {
              x += parent.x;
              y += parent.y; 
              pivotX += parent.x;
              pivotY += parent.y;
              rotation += parent.rotation;
              scaleX *= parent.scaleX;
              scaleY *= parent.scaleY;
              parent = parent.parent;
          }
  
          return {x, y, scaleX, scaleY, rotation, pivotX, pivotY}
      }
  
      protected getCorner(pivotX:number, pivotY:number, cornerX:number, cornerY:number, angle:number) {
          let x, y, distance, diffX, diffY;
  
          /// get distance from center to point
          diffX = cornerX - pivotX;
          diffY = cornerY - pivotY;
          distance = Math.sqrt(diffX * diffX + diffY * diffY);
  
          /// find angle from pivot to corner
          angle += Math.atan2(diffY, diffX);
  
          /// get new x and y and round it off to integer
          x = pivotX + distance * Math.cos(angle);
          y = pivotY + distance * Math.sin(angle);
  
          return {x, y};
      }
  </code></pre>