在圆的圆周上旋转矩形（iOS）？

Question

I am trying to rotate the rectangle around the circle. So far after putting together some code I found in various places (mainly here: https://stackoverflow.com/a/4657476/861181 ) , I am able to rotate rectangle around it's center axis.

How can I make it rotate around the circle?

Here is what I have: OverlaySelectionView.h

#import <QuartzCore/QuartzCore.h>

@interface OverlaySelectionView : UIView {
@private
    UIView* dragArea;
    CGRect dragAreaBounds;

    UIView* vectorArea;
    UITouch *currentTouch;
    CGPoint touchLocationpoint;
    CGPoint PrevioustouchLocationpoint;

}
@property    CGRect vectorBounds;
@end

OverlaySelectionView.m

#import "OverlaySelectionView.h"

@interface OverlaySelectionView()
@property (nonatomic, retain) UIView* vectorArea;
@end

@implementation OverlaySelectionView

@synthesize vectorArea, vectorBounds;
@synthesize delegate;

- (void) initialize {

    self.userInteractionEnabled = YES;
    self.multipleTouchEnabled = NO;
    self.backgroundColor = [UIColor clearColor];
    self.opaque = NO;
    self.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;

    UIPanGestureRecognizer *panRecognizer = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(rotateVector:)];

    panRecognizer.maximumNumberOfTouches = 1;
    [self addGestureRecognizer:panRecognizer];

}

- (id) initWithCoder: (NSCoder*) coder {
    self = [super initWithCoder: coder];
    if (self != nil) {
        [self initialize];
    }
    return self;
}

- (id) initWithFrame: (CGRect) frame {
    self = [super initWithFrame: frame];
    if (self != nil) {
        [self initialize];
    }
    return self;
}

- (void)drawRect:(CGRect)rect {

    if (vectorBounds.origin.x){

    UIView* area = [[UIView alloc] initWithFrame: vectorBounds];
    area.backgroundColor = [UIColor grayColor];
    area.opaque = YES;

    area.userInteractionEnabled = NO;
    vectorArea = area;
    [self addSubview: vectorArea];
    }

}


- (void)rotateVector: (UIPanGestureRecognizer *)panRecognizer{


    if (touchLocationpoint.x){

            PrevioustouchLocationpoint  = touchLocationpoint;
    }

    if ([panRecognizer numberOfTouches] >= 1){
        touchLocationpoint = [panRecognizer locationOfTouch:0 inView:self];
    }

    CGPoint origin;
    origin.x=240;
    origin.y=160;
    CGPoint previousDifference = [self vectorFromPoint:origin toPoint:PrevioustouchLocationpoint];
    CGAffineTransform newTransform =CGAffineTransformScale(vectorArea.transform, 1, 1);
    CGFloat previousRotation = atan2(previousDifference.y, previousDifference.x);
    CGPoint currentDifference = [self vectorFromPoint:origin toPoint:touchLocationpoint];
    CGFloat currentRotation = atan2(currentDifference.y, currentDifference.x);
    CGFloat newAngle = currentRotation- previousRotation;

    newTransform = CGAffineTransformRotate(newTransform, newAngle);
    [self animateView:vectorArea toPosition:newTransform];

}


-(CGPoint)vectorFromPoint:(CGPoint)firstPoint toPoint:(CGPoint)secondPoint
{
    CGPoint result;
    CGFloat x = secondPoint.x-firstPoint.x;
    CGFloat y = secondPoint.y-firstPoint.y;
    result = CGPointMake(x, y);
    return result;
}


-(void)animateView:(UIView *)theView toPosition:(CGAffineTransform) newTransform
{
    [UIView setAnimationsEnabled:YES];
    [UIView beginAnimations:nil context:NULL];
    [UIView setAnimationCurve:UIViewAnimationCurveLinear];
    [UIView setAnimationBeginsFromCurrentState:YES];
    [UIView setAnimationDuration:0.0750];
    vectorArea.transform = newTransform;
    [UIView commitAnimations];

}



@end

here is attempt to clarify. I am creating the rectangle from a coordinates on a map. Here is the function that creates that rectangle in the main view. Essentially it is the middle of the screen:

overlay is the view created with the above code.

- (void)mapView:(MKMapView *)mapView didUpdateUserLocation:(MKUserLocation *)userLocation
{

    if (!circle){
    circle = [MKCircle circleWithCenterCoordinate: userLocation.coordinate radius:100];

        [mainMapView addOverlay:circle];
        CGPoint centerPoint = [mapView convertCoordinate:userLocation.coordinate toPointToView:self.view];

        CGPoint upPoint = CGPointMake(centerPoint.x, centerPoint.y - 100);

        overlay = [[OverlaySelectionView alloc] initWithFrame: self.view.frame];

        overlay.vectorBounds = CGRectMake(upPoint.x, upPoint.y, 30, 100);

        [self.view addSubview: overlay];


    }


}

Here is the sketch of what I am trying to achieve:

Answer 1

Introduction
A rotation is always done around (0,0).
What you already know:
To rotate around the center of the rectangle you translate the rect to origin, rotate and translate back.

Now for your question:
to rotate around a center point of a circle, simply move the center of the rectangle such that the circle is at (0,0) then rotate, and move back.

start positioning the rectangle at 12 o clock, with the center line at 12.

1) as explained you always rotate around 0,0, so move the center of the circle to 0,0

  CGAffineTransform trans1 =  CGAffineTransformTranslation(-circ.x, -circ.y);

2) rotate by angle

CGAffineTransform transRot =  CGAffineTransformRotation(angle); // or -angle try out.

3) Move back

CGAffineTransform transBack = CGAffineTransformTranslation(circ.x, circ.y);

Concat these 3 rotation matrices to one combibed matrix, and apply it to the rectangle.

CGAffineTransformation tCombo = CGAffineTransformConcat(trans1, transRot);
tCombo = CGTransformationConcat(tCombo, transback);

Apply

rectangle.transform = tCombo;

You probably should also read the chapter about Transformation matrices in Quartz docu.

This code is written with a text editor only, so expect slighly different function names.