CODEWITHSUNDEEP
iosobjective-cquartz-2d
anoop4real
anoop4real

Reputation: 7718

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

Upvotes: 0

Views: 628

Answers (2)

anoop4real
anoop4real

Reputation: 7718

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

Upvotes: 2

davbryn
davbryn

Reputation: 7176

A few observations:

There is nothing wrong with using quartz for this, but you might find it more flexible using OpenGL since you mention requirements for hit-testing areas and scaling the model in realtime.

Your code is assuming an ordered list of points since you plot the path using CGContextMoveToPoint. If this is guaranteed by the data contract then fine; however, you will need to write a more intelligent renderer if you have multiple closed paths returned in your JSON.

Questions 2 & 3 can be covered with a primer in computer graphics (specifically model-view matrix and transformations). If your world coordinates are centered at (0,0,0) you can scale the vertices by applying a scalar to each vertex. Drawing points on the negative axis will make more sense when you are not using the quartz-2d coordinate system (0,0)-(w, h)

Upvotes: 1

Related Questions