Question

See the image. The form little rectangles have different line widths. The line pointing towards the big center rect are thicker. Take the top left one for instance: the to line and the left one are thinner than the right one and the bottom one.
First I though it was an optical illusion, but no. The screenshot was taken on the Simulator at 100%.

The code used to draw the view below is from DrawRect() of a subclass of UIView:

public override void Draw (RectangleF rect)
        {
            rect = this.Bounds;
            CGContext oCtx = UIGraphics.GetCurrentContext();
            oCtx.SetFillColor(UIColor.Clear.CGColor);
            oCtx.ClearRect(rect);

            oCtx.SetLineWidth(2f);

            oCtx.SetFillColor(this.BackgroundColor.CGColor);
            oCtx.SetStrokeColor(this.BackgroundColor.CGColor);
            oCtx.SetAlpha(this.Alpha);

            oCtx.AddRect(new RectangleF(rect.X + HANDLE_WIDTH * 0.5f, rect.Y + HANDLE_HEIGHT * 0.5f, rect.Width - HANDLE_WIDTH, rect.Height - HANDLE_HEIGHT));

            oCtx.FillPath();

            oCtx.SetAlpha(1f);
            oCtx.AddRect(new RectangleF(rect.X, rect.Y, HANDLE_WIDTH, HANDLE_HEIGHT));
            oCtx.AddRect(new RectangleF(rect.Right - HANDLE_WIDTH, rect.Y, HANDLE_WIDTH, HANDLE_HEIGHT));
            oCtx.AddRect(new RectangleF(rect.Right - HANDLE_WIDTH, rect.Bottom - HANDLE_HEIGHT, HANDLE_WIDTH, HANDLE_HEIGHT));
            oCtx.AddRect(new RectangleF(rect.X, rect.Bottom - HANDLE_HEIGHT, HANDLE_WIDTH, HANDLE_HEIGHT));

            oCtx.StrokePath();

#if DEBUG
            oCtx.SetAlpha(0.2f);
            oCtx.SetFillColor(UIColor.DarkGray.CGColor);
            oCtx.AddRect(this.GetMovableArea(rect));
            oCtx.FillPath();
#endif
        }

Can somebody please explain why the stroke widths differ? I also tried to use StrokeRect() instead – same result. I even removed all the drawing code, except the top left rectangle without change. The constants HANDLE_HEIGHT and HANDLE_WIDTH are both set to 20f.

Answer 1

This is due to CoreGraphics using a center pen alignment e.g. It will draw pixels either side of the line that you specify. As you have noticed bringing the co-ordinate in by half the line width will fix it.

This article has an example and also talks about anti aliasing that iOS applies to the line and how you can avoid it.

http://www.raywenderlich.com/2033/core-graphics-101-lines-rectangles-and-gradients

In our case, the edge of the path is the rectangle we wish to fill. So when drawing a 1 >pixel line along that edge, half of the line (1/2 pixel) will be on the inside of the >rectangle, and the other half of the line (1/2 pixel) will be on the outside of the >rectangle.

But of course, since there’s no way to draw 1/2 a pixel, instead Core Graphics uses anti->aliasing to draw in both pixels, but just a lighter shade to give the appearance that it >is only a single pixel drawn.

I don’t think you can change this in CG unlike GDI+ where you can set a pens alignment http://msdn.microsoft.com/en-us/library/z62ath7a.aspx