Using ratios to make drawing fit on iPad and iPhone

Question

I'm trying to draw an (American) football field for both an iPad and iPhone device using UIBezierPath, by drawing 12 horizontal lines, two of which mark the beginning of the endzone.

As you can see from below, the first line starts at the far left of the screen (0) and 1/12 of the way down, and extends all the way across (size.bounds.size.width) horizontally. The next line starts at the far left but 2/12 CGPointMake(0, self.bounds.size.height / 12 *2 )of the way down the view etc. It is calculated in this way for all 12 lines. I thought, since I was setting the lines using formulas (i.e. self.bounds.size.height/ 12) rather than hard numbers that the whole field would fit on the view no matter what size screen I was using on either device (iPad or iPhone).

It works that way on iPad, however, when I view it on the iPhone, it shows one endzone at the top of the iPad screen but then only extends to the 20 yard line at the bottom (in portrait view). The situation is even worse when I view it in the smaller iPhone screen (3.5 inch) in that it only extends to about the 30 yard line at the bottom of the portrait view.

Why isn't it happening the way I planned?

Update: the code below is in the - (void)drawRect:(CGRect)rect method in a subclass of UIView, called FieldView. I connected the UIView to the main view controller as a property @property (strong, nonatomic) IBOutlet FieldView *fieldView;, and call [self.fieldView setNeedsDisplay] in the view controller so that drawRect in FieldView is run.

Update 2

The heights for these three lines are

2014-04-14 21:47:26.783 qbgeo[2189:a0b] height 85.333336   self.bounds.size.height / 12
2014-04-14 21:47:26.785 qbgeo[2189:a0b] height 170.666672  self.bounds.size.height / 12 * 2
2014-04-14 21:47:26.788 qbgeo[2189:a0b] height 256.000000  self.bounds.size.height / 12 * 3

UIBezierPath *goalLine = [[UIBezierPath alloc] init];
[goalLine moveToPoint:CGPointMake(0, self.bounds.size.height / 12)];
[goalLine addLineToPoint: CGPointMake(self.bounds.size.width, self.bounds.size.height / 12)];
[[UIColor whiteColor] setStroke];
goalLine.lineWidth = kActivationInset2;
[goalLine strokeWithBlendMode:kCGBlendModeNormal alpha:0.5]; 

UIBezierPath *tenYardLine = [[UIBezierPath alloc] init];
[tenYardLine moveToPoint:CGPointMake(0, self.bounds.size.height / 12 *2 )];
[tenYardLine addLineToPoint: CGPointMake(self.bounds.size.width, self.bounds.size.height / 12 * 2)];
[[UIColor whiteColor] setStroke];
tenYardLine.lineWidth = kActivationInset2;
[tenYardLine strokeWithBlendMode:kCGBlendModeNormal alpha:0.5];

UIBezierPath *twentyYardLine = [[UIBezierPath alloc] init];
[twentyYardLine moveToPoint:CGPointMake(0, self.bounds.size.height / 12 *3 )];
[twentyYardLine addLineToPoint: CGPointMake(self.bounds.size.width, self.bounds.size.height / 12 * 3)];
[[UIColor whiteColor] setStroke];
twentyYardLine.lineWidth = kActivationInset2;
[twentyYardLine strokeWithBlendMode:kCGBlendModeNormal alpha:0.5];

Answer 1

This code worked fine for me. Try it and see if it works in your hands,

- (void)drawRect:(CGRect)rect {
    for (int i =1; i<12; i++) {
        UIBezierPath *line = [[UIBezierPath alloc] init];
        [line moveToPoint:CGPointMake(0, self.bounds.size.height / 12 * i)];
        [line addLineToPoint: CGPointMake(self.bounds.size.width, self.bounds.size.height / 12 * i)];
        [[UIColor whiteColor] setStroke];
        line.lineWidth = (i==1 || i==11)? 3 : 1;
        [line strokeWithBlendMode:kCGBlendModeNormal alpha:0.5];
    }
}