iPhone: Line connectors attached to shapes

Question

How would you draw a line connector between two shapes, such that the line draws with the proper angles and move along with any movement of the shapes?

Something like this:

I imagine a UIBezier Curve is what I need, but any tutorials or help in getting started would be appreciated.

Answer 1

I think UIBezierPath is the right way to go, so you should definitely read up on it. I wrote a quick example for making a path there are many more options I'm not using.

Drawing the paths is not the difficult part. You'll have to track all the boxes you create and store the connections between them somehow, it depends greatly on how you store the boxes but a relational database feels like the right solution. Given these objects and connections, you'll generate paths in drawrect for one of your views.

- (void)drawRect:(CGRect)rect {

    // say we already created a "Make" box
    UIBoxThing *make = ...
    // and here we already created a "Diagrams" box
    UIBoxThing *diagrams = ...

    [[UIColor blackColor] setStroke];

    // since we know Diagrams and Make are connected (via some other data), we must draw an arrow between them
    UIBezierPath *path = [[UIBezierPath alloc] init];
    path.lineWidth = 2;

    // the midpoint of the right side of our first box
    CGPoint start = CGPointMake(make.frame.origin.x+make.frame.size.width, make.frame.origin.y+(make.frame.size.height/2));

    [path moveToPoint:start];

    // the midpoint of the left size of our second box
    CGPoint end = CGPointMake(diagram.frame.origin.x, diagram.frame.origin.y+(diagram.frame.size.height/2));

    [path addLineToPoint:end];

    [path stroke];
}

This would be complimented with code that can tell if boxes are to the right of one another or the left, and you can bend the line with addCurveToPoint: or a number of other methods on UIBezierPath. Most of the path stuff is depending on your style, there's no one correct style to connect two points.