Question

My app has a circle which is divided into 12 equal pies i.e 1 pie for each 1 hour slab.I need to have a specific tap gesture function for each pie so i thought of assigning a specific colour code to each pie so that i can detect the colour as to where the user has tapped according to the colour of the pie.

So first i need you to help me to detect the colour code on each click. Second I need help with a non functional imageview over those 12 pies so that the user is not able to see those 12 different colours of the pies and only see 1 circle with single colour but tap gestures should always be performed on those 12 pies beneath my 1 coloured circle.Lastly I also need help with the scrolls.

I have Implemented segmented scrollviews in my app so that if user taps from left to right then a new segment gets displayed and vice-versa.The app has only 2 segmented scroll views.One for adding text in those pies on click and other for displaying text in those pies on click. I am available on teamviewer and skype both so any way of help will be highly appreciated.

Was it helpful?

Solution

It seems as though you have 2 concentric circle with different radii. To achieve the affect you are looking for, you simply need to check the angle of the line between the users touch and the centre of the circles. Then, you simply check the length of the line to see which circle you are in. Try:

// Find the pie segment you are in. Angle in radians.
float angle = atan2(centre.y - touch.y, centre.x - touch.x))

// Use the angle to figure out which segment the user tapped in. You'll have to
// figure out the angles for the 12 segments on your own!
if(angle > 2.7489 || angle < -2.7489){

}

// Compute the length of the line.
float dx = centre.x - touch.x;
float dy = centre.y - touch.y;
float length = sqrt(dx * dx + dy * dy);

// Check if the user touched the inner circle.
if(length <= radius1){

}
// Check if the user touched the outer circle.
else if(length <= radius2){

}
// The user tapped outside both circles.
else{

}

From there, you simply add the code in that you need to change the layout of either circle. Hope that Helps!

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top