I am working on an ios application where I need to rotate a 3d matrix (3D object) just by swiping a finger over it. the method i use for the rotation is
setRotationMatrix(float angle, float x, float y, float z, float *matrix);
However I am not sure how to use the touch's x and y location values in order to rotate the 3D matrix correctly. Here is the code that I am using
-(IBAction)handlePan:(UIPanGestureRecognizer *)recognizer {
if(recognizer.state == UIGestureRecognizerStateBegan)
{
panStartPoint = [recognizer locationInView:self];
previousPoint.x = 0;
previousPoint.y = 0;
currentPoint.x = panStartPoint.x;
currentPoint.y = panStartPoint.y;
}
else if(recognizer.state == UIGestureRecognizerStateEnded)
{
panEndPoint = [recognizer locationInView:self];
}
else if (recognizer.state == UIGestureRecognizerStateChanged)
{
previousPoint.x = currentPoint.x;
previousPoint.y = currentPoint.y;
CGPoint instanteneousPoint = [recognizer locationInView:self];
currentPoint.x = instanteneousPoint.x;
currentPoint.y = instanteneousPoint.y;
int xdifference = currentPoint.x - previousPoint.x;
int ydifference = currentPoint.y - previousPoint.y;
if((xdifference <= rotationThreshold *-1) || xdifference >= rotationThreshold) //rotationThreshold = 3;
{
if(xdifference <= rotationThreshold *-1)
{
rotationY = -1.0;
}
else
{
rotationY = 1.0;
}
if( (ydifference >= rotationThreshold *-1) && ydifference <= rotationThreshold )
{
rotationX = 0.0;
}
}
if((ydifference <= rotationThreshold *-1) || ydifference >= rotationThreshold)
{
if((ydifference <= rotationThreshold *-1))
{
rotationX = -1.0;
}
else
{
rotationX = 1.0;
}
if( (xdifference >= rotationThreshold *-1) && xdifference <= rotationThreshold )
{
rotationY = 0.0;
}
}
if(rotationX != 0.0 || rotationY != 0.0)
{
rotationDegree += 5.0f;
if(rotationDegree >= 360.0f)
{
rotationDegree = 0.0f;
}
ShaderUtils::rotatePoseMatrix(rotationDegree, rotationX, rotationY, rotationZ, &modelViewMatrix.data[0]); //rotationZ = 0;
}}}
This is providing me with some rotation of the 3D object but its not as natural as it should be. Any help will be much appreciated. Thanks.
well..i never used used UIPanGestureRecognizer so i dont know how and why doesnt it work but i used UITouch to move a 3d object (i find it to be easyer)
ok..so here is what i did (i dont have the code anymore so i cant give it to you ...sorry):
you get the first touch with touchesBegan (UITouchPhaseBegan)
then, if touchesMoved you rotate the object over x axis if touch moved on y and rotate it on y axis if touch moved on x ..and any combination of the 2 (you have to set sensitivity yourself)
also you have the option to move the object in view like this: you tap twice and then move the finger (like a laptop's track pad)
to move it on the z axis just use UIPinchGestureRecognizer
its obvious you can't move a 3d object in all 3 dimensions with a 2d surface
for more look in UITouch class reference
i may not have explained very well...but you get the basic idea
I think this should help you. It is tutorial with several ways to make it in the right way
Related
There's a way to, when the user touches outside the view, the app detects the closer point inside this view? I want to detect just like the image below.
EDIT:
CGPoint touchPoint = [[touches anyObject] locationInView:self.view];
if (CGRectContainsPoint([_grayView frame], touchPoint)) {
// The touch was inside the gray view
} else {
// The touch was outside the view. Detects where's the closer CGPoint inside the gray view.
// The detection must be related to the whole view (In the image example, the CGPoint returned would be related to the whole screen)
}
static float bound(float pt, float min, float max)
{
if(pt < min) return min;
if(pt > max) return max;
return pt;
}
static CGPoint boundPoint(CGPoint touch, CGRect bounds)
{
touch.x = bound(touch.x, bounds.origin.x, bounds.origin.x + bounds.size.width;
touch.y = bound(touch.y, bounds.origin.y, bounds.origin.y + bounds.size.height;
return touch;
}
All you need is a little math:
Ask the touch for its locationInView: with the view in question as the argument.
Compare the point’s x with the view’s bounds, clamping to the extrema of that CGRect.
There is no step three, the result of the above is the point you are looking for.
Try this code!
CGPoint pt = [touches locationInView:childView];
if(pt.x >= 0 && pt.x <= childView.frame.size.width
&& pt.y >= 0 && pt.y <= childView.frame.size.height) {
NSLog(#"Touch inside rect");
return;
}
pt.x = MIN(childView.frame.size.width, MAX(0, pt.x));
pt.y = MIN(childView.frame.size.height, MAX(0, pt.y));
// and here is the point
NSLog(#"The closest point is %f, %f", pt.x, pt.y);
I am Using the below code to scroll my core plot along X-axis Y-axis and zoom. Its working fine. But I when i zoom my core plot, it zooms in both the directions. I want the plot to zoom along X if I pinch along x-direction and zoom Y if pinch along Y-direction. Can someone help me with this please.
-(CGPoint)plotSpace:(CPTPlotSpace *)space willDisplaceBy:(CGPoint)displacement
{
return CGPointMake(displacement.x, displacement.y);
}
-(CPTPlotRange *)plotSpace:(CPTPlotSpace *)space willChangePlotRangeTo:(CPTPlotRange *)newRange forCoordinate:(CPTCoordinate)coordinate
{
// Adjust axis to keep them in view at the left and bottom;
// adjust scale-labels to match the scroll.
CPTXYAxisSet *axisSet = (CPTXYAxisSet *)self.hostView.hostedGraph.axisSet;
if (coordinate == CPTCoordinateX) {
axisSet.yAxis.orthogonalCoordinateDecimal = newRange.location;
}
else {
axisSet.yAxis.titleLocation = CPTDecimalFromFloat(newRange.locationDouble + (newRange.lengthDouble / 2.0F));
}
return newRange;
}
The easiest way to keep the axes and title in the correct position is to use the axisConstraints for the axes and leave the titleLocation at it's default of NAN. This will relieve your delegate of responsibility for updating those items and you can focus on the zooming.
Of those two delegate methods, you only need -plotSpace:willChangePlotRangeTo:forCoordinate:. The other one is only called when scrolling.
Decide whether you want to allow the zoom to happen in x or y (see the links in the comments on the original question). Check the coordinate parameter in the delegate method; return the newRange to allow the zoom to happen or [space plotRangeForCoordinate:coordinate] to restore the original range and prevent zooming.
If you need to use your own gesture recognizer to detect the pinch angle, set allowPinchScaling to NO on the hosting view to disable the built-in recognizer. Add your own recognizer to the hosting view. In the handler method, decide which axis to scale (if any) and adjust the appropriate plot range accordingly. If you do it this way, you don't need a plot space delegate at all.
I am calculating the change in X and Y coordinates using UIPinchGestureRecognizer and then determining which direction the plot range should change(either X or Y). Its working fine but It is not as smooth as regular zoom, and it responds late. Can someone suggest me a better way to do this
- (void)handlePinchGesture:(UIPinchGestureRecognizer *)gestureRecognizer{
if ([gestureRecognizer state] == UIGestureRecognizerStateBegan){
CGPoint translation = [gestureRecognizer locationInView:hostView];
NSLog(#"Sender value %f %f", translation.x,translation.y );
initialX = translation.x;
initialY = translation.y;
return;
}
else if ([gestureRecognizer state] == UIGestureRecognizerStateBegan || [gestureRecognizer state] == UIGestureRecognizerStateChanged){
NSLog(#"inside else");
CGPoint currentTouchLocation = [gestureRecognizer locationInView:hostView];
NSLog(#"currentTouchLocation = %f and %f and ",currentTouchLocation.x, currentTouchLocation.y);
finalX = currentTouchLocation.x;
finalY = currentTouchLocation.y;
}
}
-(CPTPlotRange *)plotSpace:(CPTPlotSpace *)space willChangePlotRangeTo:(CPTPlotRange *)newRange forCoordinate:(CPTCoordinate)coordinate
{
float x = fabsf(finalX - initialX) ;
float y = fabsf(finalY - initialY);
NSLog(#"pinch x = %f pinch y = %f", x, y);
CPTPlotRange *updatedRange = nil;
if (x > y) {
switch ( coordinate ) {
case CPTCoordinateX:
NSLog(#"x is greater than y change x-range");
if (newRange.locationDouble < 0.0F ) {
CPTMutablePlotRange *mutableRange = [[newRange mutableCopy] autorelease];
mutableRange.location = CPTDecimalFromFloat(0.0);
updatedRange = mutableRange;
}
else {
updatedRange = newRange;
}
break;
case CPTCoordinateY:
NSLog(#"x is greater than y keep y range constant");
updatedRange = ((CPTXYPlotSpace *)space).yRange;
break;
}
}
if (x < y) {
switch ( coordinate ) {
case CPTCoordinateX:
NSLog(#"y is greater than x keep x-range constant");
updatedRange = ((CPTXYPlotSpace *)space).xRange;
break;
case CPTCoordinateY:
if (newRange.locationDouble < 0.0F) {
NSLog(#"y is greater than x increase y range");
CPTMutablePlotRange *mutableRange = [[newRange mutableCopy] autorelease];
// mutableRange.location = CPTDecimalFromFloat(0.0);
updatedRange = mutableRange;
}
else {
updatedRange = newRange;
}
break;
}
}
if (x == y) {
switch ( coordinate ) {
case CPTCoordinateX:
NSLog(#"y is equal to x keep x-range constant");
updatedRange = ((CPTXYPlotSpace *)space).xRange;
break;
case CPTCoordinateY:
NSLog(#"y is equal to x keep y-range constant");
//NSLog(#"%d", CPTCoordinateY);
updatedRange = ((CPTXYPlotSpace *)space).yRange;
break;
}
}
return updatedRange;
}
I'm trying to zoom the drawing on the context based on pinching in and out. This is working perfectly, but it will always zoom from the origin (top left). This doesn't give the nice effect you get in other applications and is really annoying. The old zooming method is as follows:
- (IBAction)handlePinchGesture:(UIGestureRecognizer *)sender {
UIPinchGestureRecognizer *pinch = (UIPinchGestureRecognizer *)sender;
if ([pinch scale] > zoomLevel + MAX_ZOOM_PER_CALL) {
[pinch setScale: zoomLevel + MAX_ZOOM_PER_CALL];
}
if ([pinch scale] < zoomLevel - MAX_ZOOM_PER_CALL) {
[pinch setScale:zoomLevel - MAX_ZOOM_PER_CALL];
}
float prevZoomLevel = zoomLevel;
CGFloat factor = [pinch scale];
zoomLevel = factor;
if (zoomLevel < MIN_ZOOM_LEVEL) {
zoomLevel = MIN_ZOOM_LEVEL;
}
if (zoomLevel > MAX_ZOOM_LEVEL) {
zoomLevel = MAX_ZOOM_LEVEL;
}
//The next piece of code is added here
[self setNeedsDisplay];
}
The actual zooming is done in the drawing methods of the parts that are shown on the context. I was thinking of changing the origin of the screen (that is the relative origin to the items that are to be drawn) so it would simulate this. But it is not working at all, this is what i have right now:
float dZoomLevel = zoomLevel - prevZoomLevel;
if (dZoomLevel != 0) {
CGPoint touchLocation = [pinch locationInView:self];
CGPoint zoomedTouchLocation = CGPointMake(touchLocation.x * prevZoomLevel, touchLocation.y * prevZoomLevel);
CGPoint newLocation = CGPointMake(touchLocation.x * zoomLevel, touchLocation.y * zoomLevel);
float dX = ( newLocation.x - zoomedTouchLocation.x );
float dY = ( newLocation.y - zoomedTouchLocation.y );
_originX += roundf(dX);
_originY += roundf(dY);
}
The origin is taken from the xml (the smallest x and y of all the elements). It will usually be something between 12000 and 20000 but could in theory be between 0 and 100000.
I'm not sure if I've made myself clear, but if you need any information or don't understand something just ask me and i'll try to reply ASAP. Thanks in advance!
I found the answer myself. The way one needs to zoom in my case is by zooming from the point of the touch. So when the x and y coordinates get zoomed do this:
x -= pinchLocation.x;
y -= pinchLocation.y;
x *= zoomLevel;
y *= zoomLevel;
x += pinchLocation.x;
y += pinchLocation.y;
or in short:
x = (x - pinchLocation.x) * zoomLocation + pinchLocation.x;
y = (y - pinchLocation.y) * zoomLocation + pinchLocation.y;
now x and y are on the correct location!!
I am using a UIPanGestureRecognizer to allow my UITableView to be dragged around. I have currently set it so that the UITableView cannot be dragged past 0 or half its width. But now, its frame is set to 0 when I try and drag the UITableView back to 0 from an origin of greater than 0. How can I prevent this and allow dragging of the UITableView back to 0? I have tried the following, but I can't quite find out why the outlined code is causing this.
- (void) handlePan:(UIPanGestureRecognizer *) pan {
CGPoint point = [pan translationInView:_tableView];
CGRect frame = [_tableView frame];
if (point.x <= _tableView.frame.size.width / 2) {
frame.origin.x = point.x;
}
NSLog(#"%f : %f", frame.origin.x, _tableView.frame.origin.x);
//outline begin!
if (frame.origin.x < 0 && _tableView.frame.origin.x >= 0) {
frame.origin.x = 0;
}
//outline end!
isFilterViewShowing = frame.origin.x > 0;
[_tableView setFrame:frame];
}
This is not the prettiest code, but that is working in the simulator.
For this code to work you need to add an instance variable.
This code may not behave exactly as you want it, because it's keeping track of "negative" x position, so you get some "threshold" effect that you may not want depending on you design choice.
- (void) handlePan:(UIPanGestureRecognizer *) pan {
if (pan.state == UIGestureRecognizerStateBegan)
{
// cache the starting point of your tableView in an instance variable
xStarter = _tableView.frame.origin.x;
}
// What is the translation
CGPoint translation = [pan translationInView:self.tableView];
// Where does it get us
CGFloat newX = xStarter + translation.x;
CGFloat xLimit = self.tableView.superview.bounds.size.width / 2;
if (newX >= 0.0f && newX <= xLimit)
{
// newX is good, don't touch it
}
else if (newX < 0)
{
newX = 0;
}
else if (newX > xLimit)
{
newX = xLimit;
}
CGRect frame = self.tableView.frame;
frame.origin.x = newX;
[_tableView setFrame:frame];
if (pan.state == UIGestureRecognizerStateEnded)
{
// reset your starter cache
xStarter = 0;
}
}
Have you notice how [pan translationInView:aView]; is returning the offset of the pan gesture and not the position of the finger on the screen.
That is why your code don't work as you expect.
I'm trying to spin an circle image based on user swipe.Now I've done by considering the as two parts. one is the left side and other is the right side.
If the user swipes down from right half means it rotates clockwise and swipe up means anti clock wise. In left side I've done the vice versa. So now my image will rotate fine only when I touch the left and right half.. on touching top and bottom .. its behaving differently.
I've even tried ny calculating the radians.. its also not working
Can any one suggest me to identify clockwise or anticlock wise in a better way...
Thank u,
Lakshmi jones
You should approach this problem with trignometry. Assuming you know the starting point of swipe (a1,b1) and the ending point of swipe (a2,b2)
The circles centre is at (x,y)
If we know the difference of angles made by lines (x,y)->(a1,b1) and (x,y)->(a2,b2) we will know whether to rotate clockwise or anticlockwise based on whether the above said angle is positive or negative.
Angle made by a line is calculated below.
Let the red angle be red
if(a1-x==0){
if(b1-y>0) red=pi/2
else red = 3*pi/2
}
else{
tan(red) = abs((b1-y)/(a1-x))
red = tan-inverse( abs((b1-y)/(a1-x)) )
if(a1-x<0){
if(b1-y<=0)
red+=pi;
else
red+=pi/2
}
else if(a1-x>0 && b1-y<0){
red+=3*pi/2
}
}
See here to know how to calculate tan-inverse.
Similarly calculate the value of angle green. After doing that just comparing the value of green and red will let you know what to do.
if(red - green == pi || red - green == 0){
do_nothing();
}else if(red - green > 0){
rotate_clockwise();
}else{
rotate_anticlockwise();
}
By using the acceleration/velocity data of the swipe you could rotate the circle with the same acceleration/velocity.
Have you ever tried this tutorial for your problem. This will help you for sure.
The .h file for calculating the swipe
#import <UIKit/UIKit.h>
#import "SMRotaryProtocol.h"
#interface SMRotaryWheel : UIControl
#property (weak) id <SMRotaryProtocol> delegate;
#property (nonatomic, strong) UIView *container;
#property int numberOfSections;
#property CGAffineTransform startTransform;
#property (nonatomic, strong) NSMutableArray *cloves;
#property int currentValue;
- (id) initWithFrame:(CGRect)frame andDelegate:(id)del withSections:(int)sectionsNumber;
And the .m file is
#import "SMRotaryWheel.h"
#import <QuartzCore/QuartzCore.h>
#import "SMCLove.h"
#interface SMRotaryWheel()
- (void)drawWheel;
- (float) calculateDistanceFromCenter:(CGPoint)point;
- (void) buildClovesEven;
- (void) buildClovesOdd;
- (UIImageView *) getCloveByValue:(int)value;
- (NSString *) getCloveName:(int)position;
#end
static float deltaAngle;
static float minAlphavalue = 0.6;
static float maxAlphavalue = 1.0;
#implementation SMRotaryWheel
#synthesize delegate, container, numberOfSections, startTransform, cloves, currentValue;
- (id) initWithFrame:(CGRect)frame andDelegate:(id)del withSections:(int)sectionsNumber {
if ((self = [super initWithFrame:frame])) {
self.currentValue = 0;
self.numberOfSections = sectionsNumber;
self.delegate = del;
[self drawWheel];
}
return self;
}
- (void) drawWheel {
container = [[UIView alloc] initWithFrame:self.frame];
CGFloat angleSize = 2*M_PI/numberOfSections;
for (int i = 0; i < numberOfSections; i++) {
UIImageView *im = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"segment.png"]];
im.layer.anchorPoint = CGPointMake(1.0f, 0.5f);
im.layer.position = CGPointMake(container.bounds.size.width/2.0-container.frame.origin.x,
container.bounds.size.height/2.0-container.frame.origin.y);
im.transform = CGAffineTransformMakeRotation(angleSize*i);
im.alpha = minAlphavalue;
im.tag = i;
if (i == 0) {
im.alpha = maxAlphavalue;
}
UIImageView *cloveImage = [[UIImageView alloc] initWithFrame:CGRectMake(12, 15, 40, 40)];
cloveImage.image = [UIImage imageNamed:[NSString stringWithFormat:#"icon%i.png", i]];
[im addSubview:cloveImage];
[container addSubview:im];
}
container.userInteractionEnabled = NO;
[self addSubview:container];
cloves = [NSMutableArray arrayWithCapacity:numberOfSections];
UIImageView *bg = [[UIImageView alloc] initWithFrame:self.frame];
bg.image = [UIImage imageNamed:#"bg.png"];
[self addSubview:bg];
UIImageView *mask = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 58, 58)];
mask.image =[UIImage imageNamed:#"centerButton.png"] ;
mask.center = self.center;
mask.center = CGPointMake(mask.center.x, mask.center.y+3);
[self addSubview:mask];
if (numberOfSections % 2 == 0) {
[self buildClovesEven];
} else {
[self buildClovesOdd];
}
[self.delegate wheelDidChangeValue:[self getCloveName:currentValue]];
}
- (UIImageView *) getCloveByValue:(int)value {
UIImageView *res;
NSArray *views = [container subviews];
for (UIImageView *im in views) {
if (im.tag == value)
res = im;
}
return res;
}
- (void) buildClovesEven {
CGFloat fanWidth = M_PI*2/numberOfSections;
CGFloat mid = 0;
for (int i = 0; i < numberOfSections; i++) {
SMClove *clove = [[SMClove alloc] init];
clove.midValue = mid;
clove.minValue = mid - (fanWidth/2);
clove.maxValue = mid + (fanWidth/2);
clove.value = i;
if (clove.maxValue-fanWidth < - M_PI) {
mid = M_PI;
clove.midValue = mid;
clove.minValue = fabsf(clove.maxValue);
}
mid -= fanWidth;
NSLog(#"cl is %#", clove);
[cloves addObject:clove];
}
}
- (void) buildClovesOdd {
CGFloat fanWidth = M_PI*2/numberOfSections;
CGFloat mid = 0;
for (int i = 0; i < numberOfSections; i++) {
SMClove *clove = [[SMClove alloc] init];
clove.midValue = mid;
clove.minValue = mid - (fanWidth/2);
clove.maxValue = mid + (fanWidth/2);
clove.value = i;
mid -= fanWidth;
if (clove.minValue < - M_PI) {
mid = -mid;
mid -= fanWidth;
}
[cloves addObject:clove];
NSLog(#"cl is %#", clove);
}
}
- (float) calculateDistanceFromCenter:(CGPoint)point {
CGPoint center = CGPointMake(self.bounds.size.width/2.0f, self.bounds.size.height/2.0f);
float dx = point.x - center.x;
float dy = point.y - center.y;
return sqrt(dx*dx + dy*dy);
}
- (BOOL)beginTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event {
CGPoint touchPoint = [touch locationInView:self];
float dist = [self calculateDistanceFromCenter:touchPoint];
if (dist < 40 || dist > 100)
{
// forcing a tap to be on the ferrule
NSLog(#"ignoring tap (%f,%f)", touchPoint.x, touchPoint.y);
return NO;
}
float dx = touchPoint.x - container.center.x;
float dy = touchPoint.y - container.center.y;
deltaAngle = atan2(dy,dx);
startTransform = container.transform;
UIImageView *im = [self getCloveByValue:currentValue];
im.alpha = minAlphavalue;
return YES;
}
- (BOOL)continueTrackingWithTouch:(UITouch*)touch withEvent:(UIEvent*)event
{
CGPoint pt = [touch locationInView:self];
float dist = [self calculateDistanceFromCenter:pt];
if (dist < 40 || dist > 100)
{
// a drag path too close to the center
NSLog(#"drag path too close to the center (%f,%f)", pt.x, pt.y);
// here you might want to implement your solution when the drag
// is too close to the center
// You might go back to the clove previously selected
// or you might calculate the clove corresponding to
// the "exit point" of the drag.
}
float dx = pt.x - container.center.x;
float dy = pt.y - container.center.y;
float ang = atan2(dy,dx);
float angleDifference = deltaAngle - ang;
container.transform = CGAffineTransformRotate(startTransform, -angleDifference);
return YES;
}
- (void)endTrackingWithTouch:(UITouch*)touch withEvent:(UIEvent*)event
{
CGFloat radians = atan2f(container.transform.b, container.transform.a);
CGFloat newVal = 0.0;
for (SMClove *c in cloves) {
if (c.minValue > 0 && c.maxValue < 0) { // anomalous case
if (c.maxValue > radians || c.minValue < radians) {
if (radians > 0) { // we are in the positive quadrant
newVal = radians - M_PI;
} else { // we are in the negative one
newVal = M_PI + radians;
}
currentValue = c.value;
}
}
else if (radians > c.minValue && radians < c.maxValue) {
newVal = radians - c.midValue;
currentValue = c.value;
}
}
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:0.2];
CGAffineTransform t = CGAffineTransformRotate(container.transform, -newVal);
container.transform = t;
[UIView commitAnimations];
[self.delegate wheelDidChangeValue:[self getCloveName:currentValue]];
UIImageView *im = [self getCloveByValue:currentValue];
im.alpha = maxAlphavalue;
}
- (NSString *) getCloveName:(int)position {
NSString *res = #"";
switch (position) {
case 0:
res = #"Circles";
break;
case 1:
res = #"Flower";
break;
case 2:
res = #"Monster";
break;
case 3:
res = #"Person";
break;
case 4:
res = #"Smile";
break;
case 5:
res = #"Sun";
break;
case 6:
res = #"Swirl";
break;
case 7:
res = #"3 circles";
break;
case 8:
res = #"Triangle";
break;
default:
break;
}
return res;
}
#end
Main Methods which will help you to track the swipe are
- (float) calculateDistanceFromCenter:(CGPoint)point
- (BOOL)beginTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event
- (BOOL)continueTrackingWithTouch:(UITouch*)touch withEvent:(UIEvent*)event
- (void)endTrackingWithTouch:(UITouch*)touch withEvent:(UIEvent*)event
May this will help you :)
Though trigonometry is one approach to the math, it's simpler and requires much less processor power to do this with vectors.
A picture for reference:
The center of the dial you want to spin is point C.
From the user interface you must get a swipe start point A and "swipe vector" s that shows how the user's finger is moving. If the OS provides only a second point B some time after A, then compute s = B - A.
You want to compute the component of s that's tangent to the circle centered at C passing through A. This will allow the user to start his/her swipe anywhere and have it treated as a torque about point C. This ought to be intuitive.
This is not hard. The radius of the circle is shown as vector r = A - C. The perpendicular to this vector is called "r perp" shown with the "thumbtack" symbol in the picture. It is just the point (-y, x) where x and y are the components of r.
The signed length of the projection of p onto perp(r) is just a normalized dot product:
This is a scalar that is positive if rotation is counter clockwise around C and negative if clockwise. So the sign tells you the direction of rotation. The absolute value tells you how much or how fast to rotate.
Suppose we already have swipe vector s stored as sx and sy and center C as cx and cy. Then the pseudo code is just:
r_perp_x = cy - ay; r_perp_y = ax - cx;
signed_length_p = (sx * r_perp_x + sy * r_perp_y) / sqrt(r_perp_x ^ 2 + r_perp_y ^ 2)
The desired number is signed_length_p.
The only caveat is to ignore touches A that are close to C. They can produce very large output values or division by zero. This is easy to fix. Just check the length of r and quit if it's less than some reasonable value.
If your current solution is "almost fine" for you - simplest thing to do would be ...just fixing it with two more areas:
Now you spin your image clockwise whenever user swiped
- right or up (started in area A)
- right or down (started in area B)
- left or down (started in area D)
- left or up (started in area C)
....else - spin it anticlockwise.
I have done something similar with Xamarin.iOS but I doubt you want to see C# code so maybe this GitHub project will give you the necessary info:
https://github.com/hollance/MHRotaryKnob