Rotate UIView based on UITouch

Question

I'm working on a drawing app.

I want the user to be able to "drop" a shape on the screen and then move, resize or rotate it as desired.

The problem is with the rotation. I have the moving and resizing working fine.

I did this before with a rather complex and memory/processor-intensive process, which I am now trying to improve.

I've searched and searched but haven't found an answer similar to what I'm trying to do.

Basically, let's say the user drops a square on the "surface". Then, they tap it and get some handles. They can touch anywhere and pan to move the square around (working already), touch and drag on a resize handle to resize the square (working already), or grab the rotation handle to have the square rotate around its center.

I've looked into drawing the square using UIBezierPath or just having it be a subclass of UIView that I fill.

In either case, I'm trying to rotate the UIView itself, not some contents inside. Every time I try to rotate the view, either nothing happens, the view vacates the screen or it rotates just a little bit and stops.

Here's some of the code I've tried (this doesn't work, and I've tried a lot of different approaches to this):

- (void) rotateByAngle:(CGFloat)angle
{

CGPoint cntr = [self center];

CGAffineTransform move  = CGAffineTransformMakeTranslation(-1 * cntr.x, -1 * cntr.y);
[[self path] applyTransform:move];

CGAffineTransform rotate = CGAffineTransformMakeRotation(angle * M_PI / 180.0);
[[self path] applyTransform:rotate];

[self setNeedsDisplay];
CGAffineTransform moveback = CGAffineTransformMakeTranslation(cntr.x, cntr.y);
[[self path] applyTransform:moveback];

}

In case it isn't obvious, the thinking here it to move the view to the origin (0,0), rotate around that point and then move it back.

In case you're wondering, "angle" is calculated correctly. I've also wrapped the code above in a [UIView beginAnimations:nil context:NULL]/[UIView commitAnimations] block.

Is it possible to rotate a UIView a "custom" amount? I've seen/done it before where I animate a control to spin, but in those examples, the control always ended up "square" (i.e., it rotated 1 or more full circles and came back to its starting orientation).

Is it possible to perform this rotation "real-time" in response to UITouches? Do I need to draw the square as an item in the layer of the UIView and rotate the layer instead?

Just so you know, what I had working before was a shape drawn by a set of lines or UIBezierPaths. I would apply a CGAffineTransform to the data and then call the drawRect: method, which would re-draw the object inside of a custom UIView. This UIView would host quite a number of these items, all of which would need to be re-drawn anytime one of them needed it.

So, I'm trying to make the app more performant by creating a bunch of UIView subclasses, which will only get a command to re-draw when the user does something with them. Apple's Keynote for the iPad seems to accomplish this using UIGestureRecognizers, since you have to use two fingers to rotate an added shape. Is this the way to go?

Thoughts?

Thanks!

Answer 1

-(void)rotate{
    CGAffineTransform transform;
    [UIView beginAnimations:nil context:NULL];
    [UIView setAnimationDuration:1.0];
    [UIView setAnimationCurve:UIViewAnimationOptionBeginFromCurrentState];
    myView.alpha = 1;
    transform = CGAffineTransformRotate(myView.transform,0.5*M_PI);
    [myView setUserInteractionEnabled:YES];
    myView.transform = transform;
    [UIView commitAnimations];
}

This might help.

Answer 2

for just simple rotation you might leave out the Animation:

-(void)rotate:(CGFloat)angle
{
    CGAffineTransform  transform = CGAffineTransformRotate( myView.transform, angle * M_PI / 180.0 );
    myView.transform = transform;
}

I use a simple NSTimer to control a animation.