iphone : How to rotate a rectangle image with touch events?

Question

transform a square image or round image is easy to do...

But what if a rectangle image ???

This is the image I want to transform with touch event .

enter image description here

The circle center is (30 , 236) , if I touch any place on the screen

Imageview will transform the arrow to my touch point.

But the circle center still the same place .

I try to transform the image use a test angle

It will become like this ...

enter image description here

How to adjust the image ?

Also the code is here

- (void)viewDidLoad {
    CGRect arrowImageRect = CGRectMake(20.0f, 20.0f, 15.0f, 220.0f);
    arrow = [[UIImageView alloc] initWithFrame:arrowImageRect];
    [arrow setImage:[UIImage imageNamed:@"arrow.png"]];
    arrow.opaque = YES;
    [self.view addSubview:arrow];
    [super viewDidLoad];
}

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{
    UITouch *touch = [touches anyObject];
    CGPoint touchPoint = [touch locationInView:self.view];
    NSLog(@"Position X: %f \n, Y: %f",touchPoint.x,touchPoint.y);
    CGAffineTransform transform = CGAffineTransformIdentity;
    arrow.transform = CGAffineTransformRotate(transform, ?????? );
}

The ?????? part should be the last solution ...

Or Maybe I need to resize the imageview ???

Thanks for any reply or answer :-)

Webber

score 2 · Accepted Answer · answered Nov 04 '11 at 04:09

Here is the final solution I figure this problem

check this code

-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
    UITouch *touch=[[event allTouches]anyObject];

    [self transformSpinnerwithTouches:touch];
}

-(void)transformSpinnerwithTouches:(UITouch *)touchLocation
{
    CGPoint touchLocationpoint = [touchLocation locationInView:self.view];
    CGPoint PrevioustouchLocationpoint = [touchLocation previousLocationInView:self.view];
    //origin is the respective piont from that i gonna measure the angle of the current position with respective to previous position ....
    CGPoint origin;
    origin.x = arrow.center.x;
    origin.y = arrow.center.y;
    CGPoint previousDifference = [self vectorFromPoint:origin toPoint:PrevioustouchLocationpoint];
    CGAffineTransform newTransform = CGAffineTransformScale(arrow.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;
    temp1 = temp1 + newAngle;
    //NSLog(@"temp1 is %f",temp1);
    //NSLog(@"Angle:%F\n",(temp1*180)/M_PI);
    newTransform = CGAffineTransformRotate(newTransform, newAngle);
    [self animateView:arrow toPosition:newTransform];
}
-(void)animateView:(UIView *)theView toPosition:(CGAffineTransform) newTransform
{
arrow.transform = newTransform;
}

-(CGPoint)vectorFromPoint:(CGPoint)firstPoint toPoint:(CGPoint)secondPoint
{
    CGFloat x = secondPoint.x - firstPoint.x;
    CGFloat y = secondPoint.y - firstPoint.y;
    CGPoint result = CGPointMake(x, y);
    //NSLog(@"%f %f",x,y);
    return result;
}

AliSoftware · Answer 2 · 2011-09-07T08:43:43.013

0

From the documentation about transform method:

The origin of the transform is the value of the center property, or the layer’s anchorPoint property if it was changed. (Use the layer property to get the underlying Core Animation layer object.) The default value is CGAffineTransformIdentity.

So you should be able to set the center of your rotation this way!

And for determining the rotation angle, use the atan2 or atan2f function:

float angleInRadians = atan2f(touchPoint.y-circleCenter.y , touchPoint.x-circleCenter.x);

edited Sep 07 '11 at 08:43

answered Sep 07 '11 at 08:23

AliSoftware

32,623
6
82
77

Just use it instead of your '?????' in your code above, that's what is expected as the second parameter of the CGAffineTransformRotate (read the doc ;)) – AliSoftware Sep 07 '11 at 08:49
Ok , Thanks ... But the result is not right ... Let me read the doc first – Webber Lai Sep 07 '11 at 09:24
Of course you have to substract M_PI_2 to angleInRadians (or sthg similar), as angleInRadians will be the angle between the horizontal axis to the touched point but your image is vertical... and maybe invert its value too if your rotation is inverted. – AliSoftware Sep 07 '11 at 09:29
I think I need to use anchorPoint , but can you tell me how to set it ? – Webber Lai Sep 13 '11 at 04:03
http://developer.apple.com/library/mac/#documentation/Cocoa/Conceptual/CoreAnimation_guide/Articles/Layers.html This is what I found – Webber Lai Sep 13 '11 at 04:04
Yes great doc. Then use `arrow.layer.anchorPoint = CGPoint(...,...)`. Of course don't forget to add the QuartzCore framework to your project -- and `#import ` obviously. – AliSoftware Sep 13 '11 at 09:14

score 0 · Answer 3 · answered Sep 07 '11 at 11:00

0

You can re set the center after transform.

CGPoint centerBeforeTransform = view.center;
//your transform code
view.center = centerBeforeTransform;

answered Sep 07 '11 at 11:00

Ved

612
6
10

iphone : How to rotate a rectangle image with touch events?

3 Answers3

Linked