How to draw grid lines when the camera is open avcapturemanager

Question

I want to display a grid line similar to the one that appears when the camera is open. I am using AVCaptureManager. Should I use basic graphics to draw grid lines? What is the size of these grid lines?

thanks

Answer 1

You can really add a custom overlay view on top of your camera view to draw a grid using QuartzCore.

Here's how I did it in my Subvision application:

The code I use to draw it ( note: my grid is customizable, so it 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 defined 2 properties numberOfRows and numberOfColumns:

 #import <UIKit/UIKit.h> @interface GridView : UIView @property (nonatomic, assign) int numberOfColumns; @property (nonatomic, assign) int numberOfRows; @end 

Thus, I can change these two values ​​and have infinitely customizable grid divisions.

Answer 2

Create a UIImageView for use in CameraOverlayView.

Use the UIImagePickerController and image as the "grid lines". When creating a grid line image file, be sure to use a transparent background - not an 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];