Question

I am struggling to get my custom drawing code to render at the proper scale for all iOS devices, i.e., older iPhones, those with retina displays and the iPad.

I have a subclass of UIView that has a custom class that displays a vector graphic. It has a scale property that I can set. I do the scaling in initWithCoder when the UIView loads and I first instantiate the vector graphic. This UIView is shown when the user taps a button on the home screen.

At first I tried this:

screenScaleFactor = 1.0;
if ([UIScreen instancesRespondToSelector:@selector(scale)]) {
    screenScaleFactor = [[UIScreen mainScreen] scale];
}
// and then I multiply stuff by screenScale

… which worked for going between normal iPhones and retina iPhones, but chokes on the iPad. As I said, you can get to the UIView at issue by tapping a button on the home screen. When run on the iPad, if you display the UIView when at 1X, it works, but at 2X I get a vector graphic that twice as big as it should be.

So I tried this instead:

UPDATE: This block is the one that’s right. (with the corrected spelling, of course!)

screenScaleFactor = 1.0;
if ([self respondsToSelector:@selector(contentScaleFactor)]) { //EDIT: corrected misspellng.
    screenScaleFactor = (float)self.contentScaleFactor;
}
// again multiplying stuff by screenScale

Which works at both 1X and 2X on the iPad and on the older iPhones, but on a retina display, the vector graphic is half the size it should be.

In the first case, I query the UIScreen for its scale property and in the second case, I’m asking the parent view of the vector graphic for its contentsScaleFactor. Neither of these seem to get me where I want for all cases.

Any suggestions?

UPDATE:

Here’s the method in my subclassed UIView (it’s called a GaugeView):

- (void)drawRect:(CGRect)rect {
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSaveGState(context);

    CGAffineTransform t0 = CGContextGetCTM(context);
    t0 = CGAffineTransformInvert(t0);
    CGContextConcatCTM(context, t0);

    [needle updateBox];
    [needle draw: context];
}

needle is of class VectorSprite which is a subclass of Sprite which is subclassed from NSObject. These are from a programming book I’m working through. needle has the scale property that I set.

updateBox comes from Sprite and looks like this:

- (void) updateBox {
    CGFloat w = width*scale;
    CGFloat h = height*scale;
    CGFloat w2 = w*0.5;
    CGFloat h2 = h*0.5;
    CGPoint origin = box.origin;
    CGSize bsize = box.size;
    CGFloat left = -kScreenHeight*0.5;
    CGFloat right = -left;
    CGFloat top = kScreenWidth*0.5;
    CGFloat bottom = -top;
    offScreen = NO;
    if (wrap) {
        if ((x+w2) < left) x = right + w2;
        else if ((x-w2) > right) x = left - w2;
        else if ((y+h2) < bottom) y = top + h2;
        else if ((y-h2) > top) y = bottom - h2; 
    }
    else {
        offScreen = 
        ((x+w2) < left) ||
        ((x-w2) > right) ||
        ((y+h2) < bottom) ||
        ((y-h2) > top);
    }
    origin.x = x-w2*scale;
    origin.y = y-h2*scale;
    bsize.width = w;
    bsize.height = h;
    box.origin = origin;
    box.size = bsize;
}    

Sprite also has the draw and drawBody methods which are:

- (void) draw: (CGContextRef) context {

    CGContextSaveGState(context);

    // Position the sprite 
    CGAffineTransform t = CGAffineTransformIdentity;
    t = CGAffineTransformTranslate(t,x,y);
    t = CGAffineTransformRotate(t,rotation);
    t = CGAffineTransformScale(t,scale,scale);
    CGContextConcatCTM(context, t);

    // draw sprite body
    [self drawBody: context];

CGContextRestoreGState(context);
}

- (void) drawBody: (CGContextRef) context {
    // Draw your sprite here, centered
    // on (x,y)

    // As an example, we draw a filled white circle

    if (alpha < 0.05) return;

    CGContextBeginPath(context);
    CGContextSetRGBFillColor(context, r,g,b,alpha);
    CGContextAddEllipseInRect(context, CGRectMake(-width/2,-height/2,width,height));
    CGContextClosePath(context);
    CGContextDrawPath(context,kCGPathFill);
}    

Answer 1

How, exactly, are you rendering the graphic?

This should be handled automatically in drawRect: (the context you get should be already 2x). This should also be handled automatically with UIGraphicsBeginImageContextWithOptions(size,NO,0); if available (if you need to fall back to UIGraphicsBeginImageContext(), assume a scale of 1). You shouldn’t need to worry about it unless you’re drawing the bitmap yourself somehow.

You could try something like self.contentScaleFactor = [[UIScreen mainScreen] scale], with appropriate checks first (this might mean if you display it in an iPad at 2x, you’ll get high-res graphics).

Fundamentally, there’s not much difference between an iPad in 2x mode and a “retina display”, except that the iPad can switch between 1x and 2x.

Finally, there’s a typo: @selector(contentsScaleFactor) has an extra s.