4

I'm developing a Augmented reality app where I need to add a 3D grid on camera overlay. My attempt so far:

DrawLayer.h

#import <UIKit/UIKit.h>

@interface DrawLayer : UIView

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

DrawLayer.m

#import "DrawLayer.h"

@implementation DrawLayer

- (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);
    }
}

@end

And Adding it to a camera overlay

DrawLayer *gridView = [[DrawLayer alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height)];
    gridView.backgroundColor=[UIColor clearColor];
    gridView.numberOfColumns = 10;
    gridView.numberOfRows = 8;
    [gridView setNeedsDisplay];

    CATransform3D t=gridView.layer.transform;
    t.m34 = 1.0 / -300.0;
    t = CATransform3DRotate(t, DEGREES_TO_RADIANS(60.0), 1, 0, 0);
    gridView.layer.transform=t;

    [cameraUI setCameraOverlayView:gridView];

Now My result is :

enter image description here

But I want the output like this:

enter image description here

Whats wrong with this code? Please help.

Poles
  • 3,585
  • 9
  • 43
  • 91
  • i think you are going to have to be a lot more specific about what you want, what does this 3d grid look like? can you show us a picture of what you want the final result to be like – Fonix Jul 29 '15 at 09:24
  • @Fonix: Please see the updated question. The grid line should be more like this image. – Poles Jul 29 '15 at 10:33
  • Go check out ARKit which was just released in iOS 11. – Blip Jul 28 '17 at 06:49

0 Answers0