Create a "map" of the edges of a button

Question

So, following this question: Rounded buttons , it seems to me that I need to create a map view of the edges of the view, say, I have one that looks like this:

The button will not be blue or any particular color, so we won’t be able to check whether the user sits where the user touched blue, suggested by one of the answers in the last question.

Lets say that I get a touch event, and I get the touch position inside this view, the view is direct, and I only want to enter the input if they click on the blue part. How can I understand that?

Answer 1

Suppose the bounding box for the graph fills the view accurately. We can act as follows. The field of interest is limited by two concentric circles and in appearance. (The center of the circle is the lower right angle of view.) When we get a touch, we just need to calculate the distance from the touch coordinate to the lower right corner and compare this with the two radii of the circle. (You can avoid the square root by comparing the square of the distance with the square of the radii.) If the distance falls between the radii, the touch is in blue (or any other color). We do not need to calculate whether the touch is in the bounding box; we already know that since the event was delivered to the view.

Here is a sample code. This is for a detector that determines whether a point lies within two concentric circles (annular space) and, if so, in which quadrant it hit.

public class ArcHitDetector { public enum Quadrant { TOP_LEFT, TOP_RIGHT, BOTTOM_LEFT, BOTTOM_RIGHT } private int xCenter, yCenter, innerR2, outerR2; /** * Construct an ArcHitDetector for an annulus centered at given * points and with given inner and outer radii. * * @param xCenter the horizontal center coordinate * @param yCenter the vertical center coordinate * @param outerR the outer radius of the annulus * @param innerR the inner radius of the annulus */ public ArcHitDetector(int xCenter, int yCenter, int outerR, int innerR) { this.xCenter = xCenter; this.yCenter = yCenter; this.outerR2 = outerR * outerR; this.innerR2 = innerR * innerR; } /** * Classify a point with respect to the annulus. It assumes * screen coordinates (x increases to the right; y increases * down). * * @param x the x coordinate of the point to test * @param y the y coordinate of the point to test * * @return the Quadrant of the annulus in which the point falls, * or null if the point does not lie in the annulus */ public Quadrant classifyHit(int x, int y) { int dx = x - xCenter; int dy = y - yCenter; int d2 = dx * dx + dy * dy; if (d2 <= outerR2 && d2 >= innerR2) { if (x >= xCenter) { return y <= yCenter ? TOP_RIGHT : BOTTOM_RIGHT; } else { return y <= yCenter ? TOP_LEFT : BOTTOM_LEFT; } } else { return null; } } } 

Answer 2

I would recommend creating equations representing the upper and lower curves of this shape, 2 parabola upside down and checking if y is greater than y the equation of the lower curve for given x, and y is less than y of the upper curve for the given value of x (and that y is greater than 0, if 0 is the bottom and x is less than the far right your button goes).