Строка CoreGraphics появляется, чтобы изменить размер?

Question

У меня есть эта линия вокруг моей формы:

Проблема в том, что он, очевидно, имеет толщину от 1 до 2 пикселей. Вот код, который я использую:

CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextClearRect(context, rect);

    CGContextSetFillColorWithColor(context, [BUTTON_COLOR CGColor]);
    CGContextSetStrokeColorWithColor(context, [[UIColor blackColor] CGColor]);
    CGContextSetLineWidth(context, 1);

    int radius = 8;


    CGContextMoveToPoint(context, 0, self.frame.size.height / 2);

    CGContextAddLineToPoint(context, POINT_WIDTH, self.frame.size.height);

    CGContextAddLineToPoint(context, rect.origin.x + rect.size.width - radius, 
                            rect.origin.y + rect.size.height);

    CGContextAddArc(context, rect.origin.x + rect.size.width - radius, 
                    rect.origin.y + rect.size.height - radius, radius, M_PI / 2, 0.0f, 1);

    CGContextAddLineToPoint(context, rect.origin.x + rect.size.width, rect.origin.y + radius);

    CGContextAddArc(context, rect.origin.x + rect.size.width - radius, rect.origin.y + radius, 
                    radius, 0.0f, -M_PI / 2, 1);

    CGContextAddLineToPoint(context, POINT_WIDTH, 0);

    CGContextAddLineToPoint(context, 0, self.frame.size.height / 2);

    CGContextClosePath(context);
    CGContextDrawPath(context, kCGPathFillStroke);

Есть идеи?

Answer 1

Причина, по которой ваши верхний, нижний и правый края кажутся тоньше диагоналей, заключается в том, что вы отсекаете половину линий, проведенных вдоль этих краев. Как упоминалось в Costique, Core Graphics рисует обводку так, чтобы она была центрирована на пути. Это означает, что половина хода находится на одной стороне пути, а половина хода - на другой стороне. Поскольку ваш путь проходит точно по верхнему, правому и нижнему краям вашего вида, половина обводки выходит за границы вашего вида и не рисуется.

Costique также правильно, что вы должны продвинуть свои пути на .5 баллов. (Технически вы должны двигаться на половину ширины штриха.) Однако вы не указываете свои координаты равномерно на основе переменной rect, поэтому перемещение всех ваших путей затруднено.

То, что вы хотите сделать, это вставить rect на .5 в обоих измерениях, настроить графический контекст так, чтобы его источник находился на rect.origin, и использовать только rect.size для получения ваших координат - не self.frame.size. Вот мой тест:

- (void)drawRect:(CGRect)dirtyRect
{
    CGContextRef gc = UIGraphicsGetCurrentContext();
    CGContextSaveGState(gc); {

        CGContextSetFillColorWithColor(gc, [UIColor colorWithWhite:.9 alpha:1].CGColor);
        CGContextSetStrokeColorWithColor(gc, [[UIColor blackColor] CGColor]);
        CGContextSetLineWidth(gc, 1);

        static const CGFloat Radius = 8;
        static const CGFloat PointWidth = 20;

        CGRect rect = CGRectInset(self.bounds, .5, .5);
        CGContextTranslateCTM(gc, rect.origin.x, rect.origin.x);
        rect.origin = CGPointZero;

        CGContextMoveToPoint(gc, 0, rect.size.height / 2);

        CGContextAddLineToPoint(gc, PointWidth, rect.size.height);

        CGContextAddLineToPoint(gc, rect.origin.x + rect.size.width - Radius, 
                                rect.origin.y + rect.size.height);

        CGContextAddArc(gc, rect.origin.x + rect.size.width - Radius, 
                        rect.origin.y + rect.size.height - Radius, Radius, M_PI / 2, 0.0f, 1);

        CGContextAddLineToPoint(gc, rect.origin.x + rect.size.width, rect.origin.y + Radius);

        CGContextAddArc(gc, rect.origin.x + rect.size.width - Radius, rect.origin.y + Radius, 
                        Radius, 0.0f, -M_PI / 2, 1);

        CGContextAddLineToPoint(gc, PointWidth, 0);

        CGContextAddLineToPoint(gc, 0, rect.size.height / 2);

        CGContextClosePath(gc);
        CGContextDrawPath(gc, kCGPathFillStroke);

    } CGContextRestoreGState(gc);
}

Вот результат:

Answer 2

Базовая графика рисует обводку по краю пути, то есть половина ширины обводки находится внутри пути, а другая половина - снаружи. Поскольку вы не можете рисовать вне вида, половина обрезки обрезается контекстом. Вы должны вставить путь на половину ширины штриха.

Полный пример:

CGContextRef context = UIGraphicsGetCurrentContext();
CGContextClearRect(context, rect);

CGContextSetFillColorWithColor(context, [BUTTON_COLOR CGColor]);
CGContextSetStrokeColorWithColor(context, [[UIColor blackColor] CGColor]);
CGContextSetLineWidth(context, 1);

int radius = CORNER_RADIUS;

CGRect pathRect = CGRectInset(self.bounds, 0.5f, 0.5f);

CGContextMoveToPoint(context, CGRectGetMinX(pathRect), CGRectGetMidY(pathRect));
CGContextAddLineToPoint(context, CGRectGetMinX(pathRect) + POINT_WIDTH, CGRectGetMaxY(pathRect));
CGContextAddArc(context, CGRectGetMaxX(pathRect) - radius, 
                CGRectGetMaxY(pathRect) - radius, radius, M_PI / 2, 0.0f, 1);
CGContextAddArc(context, CGRectGetMaxX(pathRect) - radius, CGRectGetMinY(pathRect) + radius, 
                radius, 0.0f, -M_PI / 2, 1);
CGContextAddLineToPoint(context, CGRectGetMinX(pathRect) + POINT_WIDTH, CGRectGetMinY(pathRect));

CGContextClosePath(context);
CGContextDrawPath(context, kCGPathFillStroke);

Обратите внимание, что несколько избыточных команд рисования удаляются, не влияя на результат. Наслаждайтесь.