Ribbon Graphs (charts) with Core Graphics

Question

I am generating a classic line graph using core graphics, which renders and work very well. There are several lines stacking one after another using "layer.zPosition"

-(void)drawRect:(CGRect)rect {



        float colorChange = (0.1 * [self tag]);

        theFillColor = [UIColor colorWithRed:(colorChange) green:(colorChange*0.50) blue:colorChange alpha:0.75f].CGColor;


        CGContextRef c = UIGraphicsGetCurrentContext();
        CGFloat white[4] = {1.0f, 1.0f, 1.0f, 1.0f};    
        CGContextSetFillColorWithColor(c, theFillColor);
        CGContextSetStrokeColor(c, white);
        CGContextSetLineWidth(c, 2.0f);
        CGContextBeginPath(c);
        //
        CGContextMoveToPoint(c, 0.0f, 200-[[array objectAtIndex:0] floatValue]);
        CGContextAddLineToPoint(c, 0.0f, 200-[[array objectAtIndex:0] floatValue]);
        //
        distancePerPoint = (rect.size.width / [array count]);
        float lastPointX = 750.0;
        for (int i = 0 ; i < [array count] ; i++)
        {


            CGContextAddLineToPoint(c, (i*distancePerPoint), 200-[[array objectAtIndex:i] floatValue]);


            lastPointX = (i*distancePerPoint);
        }
        //
        CGContextAddLineToPoint(c, lastPointX, 200.0);
        CGContextAddLineToPoint(c, 0, 200);
        CGContextClosePath(c);
        //
        //CGContextFillPath(c);
        CGContextDrawPath(c, kCGPathFillStroke);
        //CGContextDrawPath(c, kCGPathStroke);

    }

(The above code is generating the following result):

(I can post the code I am using for the 3d effect if needed, but the way I do it is generically by CATransform3D rotationAndPerspectiveTransform = CATransform3DIdentity;)

Question: How can I transform my line graph to have depth ? I would like to have a "depth" to the line(s) graph (thus making them a ribbon) as later I would like to represent them using rotation And Perspective Transform (as stated above)

Answer 1

You can't easily do with with Core Graphics or Core animation because CALayers are "flat" - they work like origami, where you can make 3D structures by connecting rectangles in 3D space, but you can't have arbitrary polygonal 3D shapes.

Actually that's not strictly true, you could look at using CAShapeLayers to do your drawing, and then manipulate them in 3D, but I think this is generally going to be very hard work to calculate where to position each shape and to get the edges to line up correctly.

Really the way to make this kind of 3D structure is to use OpenGL directly.

If you're not too familiar with low-level OpenGL programming, you might want to check out Galaxy Engine or Cocos3D.