Find the CGPoint on a UIView rectangle intersected by a straight line at a given angle from the center point

Question

In iOS, I'm trying to determine the point on a rectangle intersected by an imaginary line from the center point to the perimeter of the rectangle at a predetermined angle.

Say that I know the center point, the size of the rectangle, and the angle (starting from 0 degrees for East and going counterclockwise through 90 for North and 180 for West and 270 for South to 360 degrees for East again). I need to know the coordinates of the intersecting point.

The somewhat confusing (to me) mathematical but presumably accurate answer at Finding points on a rectangle at a given angle led me to try the following code, but it doesn't work properly. This question is similar to that one, but I'm looking for a corrected Objective-C / iOS method rather than a general mathematical response.

I think a part of the code problem has to do with using the single 0 to 360 degree angle (in radians with no possibility of a negative number) input, but there are likely to be other problems. The code below mostly uses notation defined in the answer from belisarius, including my attempt to calculate intersecting points for each of the four regions defined there.

This code is in my UIImageView subclass:

- (CGPoint) startingPointGivenAngleInDegrees:(double)angle {
    double angleInRads = angle/180.0*M_PI;
    float height = self.frame.size.height;
    float width = self.frame.size.width;
    float x0 = self.center.x;
    float y0 = self.center.y;
    // region 1 
    if (angleInRads >= -atan2(height, width) && angleInRads <= atan2(height, width)) {
        return CGPointMake(x0 + width/2, y0 + width/2 * tan(angleInRads));
    }
    // region 2
    if (angleInRads >= atan2(height, width) && angleInRads <= M_PI - atan2(height, width)) {
        return CGPointMake(x0 + height / (2*tan(angleInRads)),y0+height/2);
    }
    // region 3
    if (angleInRads >= M_PI - atan2(height, width) && angleInRads <= M_PI + atan2(height, width)) {
        return CGPointMake(x0 - width/2, y0 + width/2 * tan(angleInRads));
    }
    // region 4
    return CGPointMake(x0 + height / (2*tan(angleInRads)),y0-height/2);    
}

rob mayoff rob mayoff · Accepted Answer · 2012-03-02T04:29:12

Instead of debugging your code, I'll just explain how I would do this.

First, a few terms. Let's define xRadius as half the width of the frame, and yRadius as half the height of the frame.

Now consider the four edges of the frame, and extend them as infinite lines. On top of those four lines, lay a line that passes through the center of the frame at your specified angle:

diagram of rectangle with overlaid line

Let's say the frame is centered at the origin - the center of the frame is at coordinates (0,0). We can easily compute where the diagonal line intersects the right edge of the frame: the coordinates are (xRadius, xRadius * tan(angle)). And we can easily compute where the diagonal line intersects the top edge of the frame: the coordinates are (-yRadius / tan(angle), -yRadius).

(Why do we negate the coordinates for the top-edge intersection? Because the UIView coordinate system is flipped from the normal mathematical coordinate system. In math, y coordinates increase towards the top of the page. In a UIView, y coordinates increase toward the bottom of the view.)

So we can simply compute the intersection of the line with the right edge of the frame. If that intersection is outside of the frame, then we know the line must intersect the top edge before it intersects the right edge. How do we tell if the right-edge intersection is out of bounds? If its y coordinate (xRadius * tan(angle)) is greater than yRadius (or less than -yRadius), it's out of bounds.

So to put it all together in a method, we start by computing xRadius and yRadius:

- (CGPoint)radialIntersectionWithConstrainedRadians:(CGFloat)radians {
    // This method requires 0 <= radians < 2 * π.

    CGRect frame = self.frame;
    CGFloat xRadius = frame.size.width / 2;
    CGFloat yRadius = frame.size.height / 2;

Then we compute the y coordinate of the intersection with the right edge:

    CGPoint pointRelativeToCenter;
    CGFloat tangent = tanf(radians);
    CGFloat y = xRadius * tangent;

We check whether the intersection is in the frame:

    if (fabsf(y) <= yRadius) {

Once we know it's in the frame, we have to figure out whether we want the intersection with the right edge or the left edge. If the angle is less than π/2 (90°) or greater than 3π/2 (270°), we want the right edge. Otherwise we want the left edge.

        if (radians < (CGFloat)M_PI_2 || radians > (CGFloat)(M_PI + M_PI_2)) {
            pointRelativeToCenter = CGPointMake(xRadius, y);
        } else {
            pointRelativeToCenter = CGPointMake(-xRadius, -y);
        }

If the y coordinate of the right edge intersection •was* out-of-bounds, we compute the x coordinate of the intersection with the bottom edge.

    } else {
        CGFloat x = yRadius / tangent;

Next we figure out whether we want the top edge or the bottom edge. If the angle is less than π (180°), we want the bottom edge. Otherwise, we want the top edge.

        if (radians < (CGFloat)M_PI) {
            pointRelativeToCenter = CGPointMake(x, yRadius);
        } else {
            pointRelativeToCenter = CGPointMake(-x, -yRadius);
        }
    }

Finally, we offset the computed point by the actual center of the frame and return it.

    return CGPointMake(pointRelativeToCenter.x + CGRectGetMidX(frame),
        pointRelativeToCenter.y + CGRectGetMidY(frame));
}

Test project here: https://github.com/mayoff/stackoverflow-radial-intersection

Looks like this:

edgepoint screen shot

Find the CGPoint on a UIView rectangle intersected by a straight line at a given angle from the center point

2 Answers