Search code examples
iphonecore-graphicsquartz-graphicsquartz-2d

How to draw an animatable ruler with Quartz2D?


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?


Solution

  • 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.