macos - Objective-c: How to rotate CGRect

Question

I've tried to rotate my rectangle, but it does not work properly.

Here is part of my code, I found it in another post:

#define DEGREES_TO_RADIANS(x) (M_PI * x / 180.0)
-(void)drawRect:(NSRect)rect
{
   CGContextRef cRef = [[NSGraphicsContext currentContext] graphicsPort];

   // points[] - this is a CGPoints array, length_one is a double value
   CGRect rect_one = CGRectMake(points[0].x, points[0].y, (CGFloat)length_one, 40);

   // I've print out the origin of old one and new one
   NSLog(@"old rect -- %f, %f", rect_one.origin.x, rect_one.origin.y);

  float centerX = rect_one.origin.x + (rect_one.size.width / 2.0);
  float centerY = rect_one.origin.y + (rect_one.size.height / 2.0);

  CGAffineTransform rotation = CGAffineTransformMakeRotation(DEGREES_TO_RADIANS(10));
  CGAffineTransform moveAnchor = CGAffineTransformMakeTranslation(centerX, centerY);

  CGAffineTransform centeredRotation = CGAffineTransformConcat(moveAnchor, rotation);

  CGRect rotatedRect = CGRectApplyAffineTransform(rect_one, centeredRotation);
  CGContextAddRect(cRef, rotatedRect);

  // new one
  NSLog(@"new rect -- %f, %f", rotatedRect.origin.x, rotatedRect.origin.y);
}

And the origin changed a lot even I can not find my new rectangle from the view. Old origin is (x = 263.3, y = 502.8) and the new origin is (x=506.1, y=1132.0) How does this system work especially how to assign the angle of rotation? If possible, could you guys help me brief explain it. Thanks a lot!!!!

Answer 1

As others have said, an NSRect or CGRect is always an axis-aligned rectangle. CGRectApplyAffineTransform returns the axis-aligned bounding box of the translated rectangle:

Note that the new rectangle (the bounding box) is likely to have different dimensions than the original rectangle, if you applied a rotation. This means it's useless to apply a transform to a rectangle if you want to draw the transformed rectangle.

Instead, you need to transform the coordinate system of the graphics context. Think of it like this: you're drawing on a sheet of paper on a desk. You always draw a rectangle that is aligned to the edges of the desk. To draw a rotated rectangle, you rotate the paper, then draw a rectangle as usual. Changing the CTM is like rotating (or moving or shrinking or expanding) the sheet of paper.

-(void)drawRect:(NSRect)rect {
    CGContextRef gc = [[NSGraphicsContext currentContext] graphicsPort];

    // points[] - this is a CGPoints array, length_one is a double value
    CGRect rect = CGRectMake(points[0].x, points[0].y, (CGFloat)length_one, 40);

    CGFloat xMid = CGRectGetMidX(rect);
    CGFloat yMid = CGRectGetMidY(rect);

    CGContextSaveGState(gc); {
        // Translate the origin to the midpoint of the rectangle, because rotations
        // always happen around the origin.
        CGContextTranslateCTM(gc, xMid, yMid);

        // Rotate the coordinate system by 10 degrees.
        CGContextRotateCTM(gc, 10 * M_PI / 180);

        // Prepare a new rectangle, with the same size as the original rectangle
        // but centered on the origin.
        CGRect newRect = rect;
        newRect.origin.x = -newRect.size.width / 2;
        newRect.origin.y = -newRect.size.height / 2;

        // Add the rectangle to the context's path.
        CGContextAddRect(gc, newRect);

        // Draw the new rectangle.
        CGContextSetFillColorWithColor(gc, [NSColor lightGrayColor].CGColor);
        CGContextSetStrokeColorWithColor(gc, [NSColor blackColor].CGColor);
        CGContextSetLineWidth(gc, 2);
        CGContextSetLineJoin(gc, kCGLineJoinMiter);
        CGContextDrawPath(gc, kCGPathFillStroke);
    } CGContextRestoreGState(gc);

}