How to draw an animatable ruler with Quartz2D?

Question

I'd like to draw the lines of a simple ruler with Quartz2D, just for practice.

Since I have no idea about doing vector graphics programmatically on the iPhone, maybe someone can point me to a good tutorial to get started?

Answer 1

The official documentation is quite good, so you'd be best starting with that: http://developer.apple.com/iphone/library/documentation/GraphicsImaging/Conceptual/drawingwithquartz2d/Introduction/Introduction.html

Answer 2

As Plamen points out, the Quartz 2D documentation is worth reading. Additionally, the course notes are available online (VoodooPad format) for my iPhone development course, where I devote an entire class to Quartz 2D drawing. The QuartzExamples sample application I created shows some more advanced drawing concepts, but Apple's QuartzDemo sample is a better place to start to see how you can do simple drawing.

As an example of drawing ticks for a ruler, the following is code that I have used to do something similar:

NSInteger minorTickCounter = majorTickInterval;
NSInteger totalNumberOfTicks = totalTravelRangeInMicrons / minorTickSpacingInMicrons;
CGFloat minorTickSpacingInPixels = currentHeight / (CGFloat)totalNumberOfTicks;

CGContextSetStrokeColorWithColor(context, [MyView blackColor]);

for (NSInteger currentTickNumber = 0; currentTickNumber < totalNumberOfTicks; currentTickNumber++)
{
    CGContextMoveToPoint(context, leftEdgeForTicks + 0.5, round(currentTickNumber * minorTickSpacingInPixels) + 0.5);

    minorTickCounter++;
    if (minorTickCounter >= majorTickInterval)
    {
        CGContextAddLineToPoint(context, round(leftEdgeForTicks + majorTickLength) + 0.5, round(currentTickNumber * minorTickSpacingInPixels) + 0.5);
        minorTickCounter = 0;               
    }
    else
    {
        CGContextAddLineToPoint(context, round(leftEdgeForTicks + minorTickLength) + 0.5, round(currentTickNumber * minorTickSpacingInPixels) + 0.5);
    }

}

CGContextStrokePath(context);   

where currentHeight is the height of the area to cover, and [MyView blackColor] simply returns a CGColorRef representing the color black.