Simple way to display the borders of a CGRect?

Question

I'm trying to find a way to display the borders of some CGRects in my iOS program for debugging purposes. Is there a fairly simple way to do this? I just need to see where the program is creating these rectangles, so I can track down some odd touch behaviors (or lack thereof).

My class init method:

// Initialize with points and a line number, then draw a rectangle 
// in the shape of the line
-(id)initWithPoint:(CGPoint)sP :(int)w :(int)h :(int)lN :(int)t {
    if ((self = [super init])) {
        startP = sP;
        lineNum = lN;
        width = w;
        height = h;
        int type = t;
        self.gameObjectType = kPathType;

        // Draw the path sprite
        path = [CCSprite spriteWithFile: @"line.png" rect:CGRectMake(0, 0, 5, height)];
        ccTexParams params = {GL_LINEAR,GL_LINEAR,GL_REPEAT,GL_REPEAT};
        [path.texture setTexParameters:&params];

        if(type == 1) {
            path.position = ccp(startP.x, startP.y);
        } else {
            path.rotation = 90;
            path.anchorPoint = ccp(0, 0);
            path.position = ccp(startP.x, startP.y-2);
        }

        [self addChild:path];

        // Draw the "bounding" box
        pathBox = CGRectMake(path.position.x - (path.contentSize.width/2), path.position.y - (path.contentSize.height/2), path.contentSize.width * 10, path.contentSize.height);
    }
    return self;
}

pathBox is the rect in question.

Answer 1

I figured out more-or-less how to do it: just extended the draw method in my class like so:

-(void) draw {
    glColor4f(0, 1.0, 0, 1.0);
    glLineWidth(2.0f);
    [super draw];

    CGRect pathBox = CGRectMake(path.position.x - (path.contentSize.width/2), path.position.y - (path.contentSize.height/2), path.contentSize.width * 10, path.contentSize.height);
    CGPoint verts[4] = {
      ccp(pathBox.origin.x, pathBox.origin.y),
      ccp(pathBox.origin.x + pathBox.size.width, pathBox.origin.y),
      ccp(pathBox.origin.x + pathBox.size.width, pathBox.origin.y + pathBox.size.height),
      ccp(pathBox.origin.x, pathBox.origin.y + pathBox.size.height)
    };

    ccDrawPoly(verts, 4, YES);
}

Thanks to Blue Ether over at the Cocos2D site for the heads-up: http://www.cocos2d-iphone.org/forum/topic/21718?replies=5#post-120691

Answer 2

This can be handled within drawRect:

- (void)drawRect:(CGRect)rect
{
    CGContextRef context = UIGraphicsGetCurrentContext(); 
    CGRect aRect=[myPath bounds];
    CGContextSetLineWidth(context, 2);
    CGContextSetStrokeColorWithColor(context, [UIColor blueColor ].CGColor);
    CGContextStrokeRect(context, aRect);
}

Answer 3

I'm going to take a stab and assume this is an iOS project, since that's what I know.

If these rectangles are being used for UIView or a CALayer then you can set the border for them.

Add #import <QuartzCore/QuartzCore.h> in your file and use view.layer.borderColor, view.layer.borderWidth add what you want.

If it's just a layer remove the view part of it. 

Answer 4

You can try something simple like this method here. This uses an actual CGRect structure as oppose to a UIView and CLayer.

-(void) drawBorderForRect:(CGRect)rect usingColor:(UIColor*)uiColor{

    CGContextRef context = UIGraphicsGetCurrentContext();

    CGContextSetStrokeColorWithColor(context, uiColor.CGColor);
    CGContextSetLineWidth(context, 1.0f);

    CGFloat x = rect.origin.x;
    CGFloat y = rect.origin.y;
    CGFloat width = abs(rect.size.width);
    CGFloat height = abs(rect.size.height);

    // ---
    CGContextMoveToPoint(context, x, y);
    CGContextAddLineToPoint(context, x + width, y);

    // |
    CGContextMoveToPoint(context, x + width, y);
    CGContextAddLineToPoint(context, x  + width, y - height);

    // ---
    CGContextMoveToPoint(context, x  + width, y - height);
    CGContextAddLineToPoint(context, x - width, y - height);

    // |
    CGContextMoveToPoint(context, x, y - height);
    CGContextAddLineToPoint(context, x, y);

    CGContextStrokePath(context);
}

Answer 5

In swift, it's easy. You can construct a BezierPath from a CGRect:

let dp = UIBezierPath.init(rect: myRect)
dp.stroke()