9

I want to display grid line like the one which appears when a camera is open.I am using AVCaptureManager.Should i use core graphics to draw grid lines?what is the size of those grid lines?

thanks

sin
  • 726
  • 7
  • 16

2 Answers2

25

You can indeed add a custom view as an overlay over your camera view to draw the grid using QuartzCore.

That is how I did it in my app Subvision:

enter image description here

The code I use to draw it (note: my grid is adjustable so it's can be 10x10, 2x2 etc):

// -------------------------------------------------------------------------------
// Used for drawing the grids ontop of the view port
// -------------------------------------------------------------------------------
- (void)drawRect:(CGRect)rect
{
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetLineWidth(context, 0.5);
    CGContextSetStrokeColorWithColor(context, [UIColor whiteColor].CGColor);

    // ---------------------------
    // Drawing column lines
    // ---------------------------

    // calculate column width
    CGFloat columnWidth = self.frame.size.width / (self.numberOfColumns + 1.0);

    for(int i = 1; i <= self.numberOfColumns; i++)
    {
        CGPoint startPoint;
        CGPoint endPoint;

        startPoint.x = columnWidth * i;
        startPoint.y = 0.0f;

        endPoint.x = startPoint.x;
        endPoint.y = self.frame.size.height;

        CGContextMoveToPoint(context, startPoint.x, startPoint.y);
        CGContextAddLineToPoint(context, endPoint.x, endPoint.y);
        CGContextStrokePath(context);
    }

    // ---------------------------
    // Drawing row lines
    // ---------------------------

    // calclulate row height
    CGFloat rowHeight = self.frame.size.height / (self.numberOfRows + 1.0);

    for(int j = 1; j <= self.numberOfRows; j++)
    {
        CGPoint startPoint;
        CGPoint endPoint;

        startPoint.x = 0.0f;
        startPoint.y = rowHeight * j;

        endPoint.x = self.frame.size.width;
        endPoint.y = startPoint.y;

        CGContextMoveToPoint(context, startPoint.x, startPoint.y);
        CGContextAddLineToPoint(context, endPoint.x, endPoint.y);
        CGContextStrokePath(context);
    }
}

In my GridView class, I have defined 2 properties numberOfRows and numberOfColumns:

#import <UIKit/UIKit.h>

@interface GridView : UIView

@property (nonatomic, assign) int numberOfColumns;
@property (nonatomic, assign) int numberOfRows;

@end

Doing so means I can modify these two values and have infinitely adjustable grid subdivisions.

Zhang
  • 11,253
  • 6
  • 51
  • 80
  • Awesome thanks,thats what i was looking for – sin Aug 14 '13 at 09:47
  • How would I add that to the overlay? If I subclass UIView to a class called GridView and then try this, the drawRect doesn't ever get called. GridView *gridView = [[GridView alloc] init]; gridView.numberOfColumns = 10; gridView.numberOfRows = 10; [cameraUI setCameraOverlayView:gridView]; – Aaron Bratcher Jun 26 '14 at 16:53
  • You need to call the [gridView setNeedsDisplay]; each time you change the numberOfRows or numberOfCols. This will call drawRect: method of gridView. – Zhang Jun 27 '14 at 01:20
  • Can anyone convert the code to swift4 syntax @sin – pkc456 Sep 09 '18 at 06:01
1

Create a UIImageView to use for the cameraOverlayView.

Use UIImagePickerController and an image as your 'grid lines'. When making your grid line image file, be sure to use a transparent background - not opaque white.

UIImageView *overlayImage = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"overlay.png"]];

CGRect overlayRect = CGRectMake(0, 0, overlayImage.image.size.width, overlayImage.image.size.height);

[overlayImage setFrame:overlayRect];

[yourImagePickerController setCameraOverlayView:overlayImage];
Krishna Kumar
  • 1,638
  • 8
  • 16