Search code examples
iosgridavcapture

how to draw grid lines when camera is open avcapturemanager


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


Solution

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