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.<

Answer 1

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:

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:

Answer 2

here's Rob's answer as a swifty lil copy n paste.

func findEdgePoint(angle: CGFloat) -> CGPoint {

    let intersection: CGPoint

    let xRad = frame.width / 2
    let yRad = frame.height / 2

    let tangent = tan(angle)
    let y = xRad * CGFloat(tangent)

    if fabs(y) <= yRad {

        if angle < CGFloat.pi / 2 || angle > 3 * CGFloat.pi / 2 {
            intersection = CGPoint(x: xRad, y: y)
        } else {
            intersection = CGPoint(x: -xRad, y: -y)
        }
    } else {

        let x = yRad / CGFloat(tangent)

        if angle < CGFloat.pi {
            intersection = CGPoint(x: x, y: yRad)
        } else {
            intersection = CGPoint(x: -x, y: -yRad)
        }
    }

    return intersection
}

// heck yeah rob, he's the man
// if he can't solve it, no one can