Line width in other angle

Question

I draw line like this:

- (void)drawRect:(CGRect)rect {

    _lineColor = [UIColor blackColor];

    [_lineColor setStroke];
    [_lineColor setFill];

    CGContextRef c = UIGraphicsGetCurrentContext();
    CGContextClearRect(c, rect);
    [[UIColor clearColor] setFill];
    CGContextAddRect(c, rect);
    CGContextSetLineWidth(c, 1);
    CGContextDrawPath(c, kCGPathFill);
    CGContextBeginPath(c);
    CGContextMoveToPoint(c, 0, 0);
    CGContextAddLineToPoint(c, x1, y1);
    CGContextStrokePath(c);  
}

but, my line is have different width which angle is 90 or 45 degrees. How I can draw line with same width

if you draw the diagonal lines as horizontal instead, does the width become correct? I believe it may be anti-aliasing here. — Mitchell Currie, Aug 05 '13 at 05:03
I cannot actually reproduce the effect with your code, but you should try to set a *positive* line width instead of zero. — Martin R, Aug 05 '13 at 05:16
Sorry, I update the code, line width is 1 in this example of picture — nikolaz, Aug 05 '13 at 10:33

score 0 · Accepted Answer · answered Aug 07 '13 at 12:15

I whipped up something that may make the effect here more visible. Here's the code:

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

    // Get us a gray background
    CGContextSetFillColorWithColor(c, [[UIColor grayColor] CGColor]);
    CGContextFillRect(c, CGRectInfinite);

    CGContextSetStrokeColorWithColor(c, [[UIColor blackColor] CGColor]);

    CGContextSetLineWidth(c, 1.0);
    CGContextBeginPath(c);

    // Draw some lines at various angles
    for (CGFloat i = -10.; i <= 10.; i += 1.0)
    {
        CGContextMoveToPoint(c, CGRectGetMidX(self.bounds), CGRectGetMidY(self.bounds));
        CGContextAddLineToPoint(c, CGRectGetMidX(self.bounds) + i * 10., CGRectGetMidY(self.bounds) + 100);
    }

    CGContextStrokePath(c);
}

Here's the output from that code on a retina device: (This should display at 100% in the standard StackOverflow format, but you can look at it full size to be sure)

Lines

Now here's a piece of that blown up:

Enlargement

What you're seeing here is anti-aliasing at work. For starters the vertical line is 2.0 pixels across, all the time, with no anti-aliasing (assuming you draw it on a pixel boundary). Now think about a 45deg line drawn using the same pixel grid, and employ the Pythagorean theorem. Here's another diagram:

45 deg line

At it's narrowest (i.e. in the dimension perpendicular to the line itself), a 45 deg line will appear 1.414px wide, and at it's widest opaque section (not counting the mostly transparent pixel that's bridging the space in the jaggy gaps) it's going to appear 2.828px across. When blown up, you can see how the work that's being done to anti-alias these lines is effecting the optical appearance of the lines.

Someone is probably going to come along and suggest that you turn off anti-aliasing, but for reference, that makes the optical effect even worse (because then the rasterizer is going to make every pixel with coverage completely opaque):

AA turned off

In short, this is expected behavior, and if you need to adjust how you draw each line to achieve some desired optical appearance that the default anti-aliasing code doesn't provide, then you just have to do that work. There's not a "make all my lines optically similar" setting in CoreGraphics -- they've done the best they can for the general case, and if you need something more specific that's up to you. FWIW, many many applications simply use the default, and people seem pretty satisfied with the results, so you might ask yourself if this is really the place in your app where you want to put in a bunch of extra work.

It occurred to me: I'm not sure you'll like the effect, but one possible approach for achieving optical similarity might be to draw your vertical lines not on pixel boundaries. This will cause them to appear anti-aliased too, which (depending on how you look at it) may make them appear more consistent with the angled, anti-aliased lines. Here's what that looks like:

offset by 0.25

What you lose doing this is a certain "crispness" to the lines. Drawing off pixel-boundaries can most easily be achieved by translating the context by 0.25pt in the X direction (for retina -- for non-retina, 0.5pt will have a similar effect) like this:

    CGContextTranslateCTM(c, 0.25, 0);

Hope this helps.

Line width in other angle

1 Answers1