Search code examples
iosobjective-cquartz-2d

iOS:Quartz2d to Draw floor plans

I am building an app where I wanted show floor plans to the user which is interactive that means they can tap on each area zoom those and find finer details.

I am getting a JSON response from the back-end which has the metadata info of the floor plans, shape info and points. I am planning to parse the points and draw the shapes on a view using quartz (started learning Quartz2d). As a start I took a simple blue print which looks like the below image. Plan Image

As per the blue print the center is at (0,0) and there are 4 points.

Below are the points that I am getting from backend for the blue print.

X:-1405.52, Y:686.18
X:550.27, Y:683.97
X:1392.26, Y:-776.79
X:-1405.52, Y:-776.79

I tried to draw this

// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {
    // Drawing code

            for (Shape *shape in shapes.shapesArray) {
                CGContextRef context = UIGraphicsGetCurrentContext();
                CGContextSetLineWidth(context, 2.0);
                CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor);
                BOOL isFirstPoint = YES;
                for (Points *point in shape.arrayOfPoints) {
                    NSLog(@"X:%f, Y:%f",point.x,point.y);
                    if (isFirstPoint) {
                        CGContextMoveToPoint(context, point.x, point.y);
                        //[bpath moveToPoint:CGPointMake(point.x,point.y)];
                        isFirstPoint = NO;
                        continue;
                    }
                    CGContextAddLineToPoint(context, point.x, point.x);

                }
                CGContextStrokePath(context);
            }

}

But I am getting the below image as result which looks not the correct one Rendered Image

Questions:

  1. Am I in the correct direction of achieving this?

  2. How to draw points at -ve direction?

  3. According to the co-ordinates, the drawing will be very huge, I want to draw it first and then shrink to fit to the screen so that users can later zoom in/ pan etc

UPDATE:

I have achieved some of the basic things using translation and scaling. Now the problem is how I will fit the content drawn, to the view bounds. Since my co-ordinates are pretty big, it goes out of bounds, I want it to fit.

Please find below the test code that I am having. Any idea how to fit it?

DrawshapefromJSONPoints

Solution

  • I have found a solution to the problem. Now I am able to draw shapes from a set of points and fit them to the screen and also make them zoom able without quality loss. Please find below the link to the project. This can be tweaked to support colors, different shapes, I am currently handling only polygons.

    DrawShapeFromJSON