Question

So following on from this question here: Rounded buttons, I think I need to create a kind of map of the edges of the view, lets say I have a view that looks like this:

The button isn’t going to be blue or any specific colour so we can’t check if where the user touched is blue, suggested by one of the answers in the last question.

Lets say I receive a touch event, and I get the position of the touch inside this view, the view is rect and I only want to take in input if they press on the part that is blue. How can I figure out this?

Answer 1

Let’s assume that the bounding box for the graphic exactly fills the view. We can proceed as follows. The area of interest is bounded by two concentric circles and by the view. (The circle center is the bottom right corner of the view.) When we get a touch, we just need to compute the distance from the touch coordinate to the bottom right corner and compare that to the two circle radii. (You can avoid a square root by comparing the squared distance to the squared radii.) If the distance falls between the radii, the touch is in the blue (or whatever color). We don’t need to compute whether the touch is within the bounding box; we already know that since the event was delivered to the view.

Here’s some sample code. It’s for a detector that determines whether a point is within two concentric circles (an annulus) and, if it is, 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;
        }
    }
}