Rotating an Image on a View by touching it : the Objective C way

What? You want to rotate an Image by touching it? iPhone? iPod touch application? Have googled day and night? Got your spine aching, eyes red?

Calm down, help is on its way. But I don't promise its bullet proof, but still, at least its working to some extent, and its done my way, my recipe which I tried over and over again so that it could taste the way it tastes now. As said earlier, it's not perfect, but it serves the main purpose, that is rotating an image around it's center by touching it, to some extent.

Scenario: I had a View, UIView object. I called it "canvas". I had another view, UIImageView. I called it "imgobj". I was required to rotate it around it's center by touching.

Concept: This is only possible when I know the angle between the straight lines made by by the points, center C (cx, cy) and where I touched P1 (x1, y1) and center (cx, cy) and where I took off my finger from the screen (x2, y2). So basically if we can get the difference of slopes of the thus formed two straight lines CP1 and CP2, we get the angle between them. Once we know that we can rotate the image by that angle.

Implementation:
First decalre some variables in [your_file.h]

CGPoint rot_start_coords;
CGPoint rot_end_coords;
CGPoint touchedObjCenter;
CGPoint touchLocation;
UIView *viewTouchedOn;
double rotate_by_angle, last_angle_by_rotation;
float m1, m2;

Heres what I did in the - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event which is part of [your_file.m]

viewTouchedOn = [touch view]; //reference to the touch object

//Back up the location of touch down
rot_start_coords = touchLocation;

//Next back up the enter of the object which is touched
touchedObjCenter = viewTouchedOn.center;

I've touched my finger and moving it on the screen. I want my image to start rotating based on the co-ordinates of my finger on the screen dynamically. I did something like the following in the - (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event

//Registering the touch object
UITouch *touch = [[event allTouches] anyObject];
touchLocation = [touch locationInView:canvasView];

//Keep backing up the current to where the touch is moved
rot_end_coords = touchLocation;

//lets calculate the slope of the line from the center to the start coordinate i.e. CP1
m1 = (rot_start_coords.y - touchedObjCenter.y)/(rot_start_coords.x - touchedObjCenter.x);
//next the line between the center to the end co-ord, i.e. CP2
m2 = (rot_end_coords.y - touchedObjCenter.y)/(rot_end_coords.x - touchedObjCenter.x);

//the angle between the straight lines CP1 and CP2 thus is
rotate_by_angle = atan((m2 - m1)/(1 + m1 * m2)); //consult maths sites for explanation

//Now that we have the angle, lets rotate
viewTouchedOn.transform = CGAffineTransformMakeRotation(rotate_by_angle);

Thats it, you should now see your image rotating. "canvas" and "imgobj" did not come into the explanation explicitly, you can implement the necessary codes to check if "imgobj" is touched and its really on "canvas". I used them to explain the scenario.

Issues: tan(pi/2) is undefined or in other words slope of either of the lines can at times become undefined. Error creeps in. I'm working on to figure out a patch.


At times it might happen the angle between the lines become greater than pi. The rotation starts behaving erroneously. Working on this too.


I'm new to Objective C myself, be forgiving, please point out mistakes with explanation and oh yes suggestions and better alternatives are 200% welcome.

Cheers!