Рисование скругленного прямоугольника в основной графике

Я хочу скопировать маркеры событий календаря iPad по умолчанию, которые выглядят так:

enter image description here Для этого я пытаюсь использовать coregraphics, рисуя контур скругленного прямоугольника. Вот результат, который я мог придумать:

enter image description here

Как вы можете видеть, версия для iPad выглядит более гладкой на закругленных углах. Я попытался использовать большую ширину линии, которая выглядит так: enter image description here

Мой код выглядит так (получил его с этого сайта):

<code>UIColor* fillColor= [self.color colorByMultiplyingByRed:1 green:1 blue:1 alpha:0.2];

CGContextSetLineWidth(ctx, 1.0);
CGContextSetStrokeColorWithColor(ctx, self.color.CGColor);
CGContextSetFillColorWithColor(ctx, fillColor.CGColor);

CGRect rrect = self.bounds;

CGFloat radius = 30.0;
CGFloat width = CGRectGetWidth(rrect);
CGFloat height = CGRectGetHeight(rrect);

if (radius > width/2.0)
   radius = width/2.0;

if (radius > height/2.0)
   radius = height/2.0;    

CGFloat minx = CGRectGetMinX(rrect);
CGFloat midx = CGRectGetMidX(rrect);
CGFloat maxx = CGRectGetMaxX(rrect);
CGFloat miny = CGRectGetMinY(rrect);
CGFloat midy = CGRectGetMidY(rrect);
CGFloat maxy = CGRectGetMaxY(rrect);
CGContextMoveToPoint(ctx, minx, midy);
CGContextAddArcToPoint(ctx, minx, miny, midx, miny, radius);
CGContextAddArcToPoint(ctx, maxx, miny, maxx, midy, radius);

CGContextAddArcToPoint(ctx, maxx, maxy, midx, maxy, radius);
CGContextAddArcToPoint(ctx, minx, maxy, minx, midy, radius);
CGContextClosePath(ctx);
CGContextDrawPath(ctx, kCGPathFillStroke);

// draw circle on left side

CGRect target= CGRectMake(rect.origin.x + 4.0, 
                          rect.origin.y + 3.0, 
                          7.0, 7.0);

CGContextSetFillColorWithColor(ctx, self.color.CGColor);
CGContextSetAlpha(ctx, 0.4);
CGContextFillEllipseInRect(ctx, target);

CGContextSetAlpha(ctx, 0.9);
CGContextSetStrokeColorWithColor(ctx, self.color.CGColor);
CGContextStrokeEllipseInRect(ctx, target);
</code>

Может ли кто-нибудь помочь мне приблизить результаты к оригиналу? Должен ли я использовать другую технику для рисования скругленного прямоугольника, или я могу изменить какие-либо параметры, чтобы он выглядел более плавным? Я уже пытался с помощьюUIBezierPath, но это в основном выглядело так же. Какие-нибудь советы?

[править]CGRectInsetрешение выглядит следующим образом:

enter image description here

Ответы на вопрос(2)

Решение Вопроса

что обводка применяется к центру траектории, и половина ее обрезается / маскируется до границ вашего вида, поскольку он рисует за пределами вашего вида. Если вы вставите свой рисунок по одной точке в каждом направлении, у вас будет результат, который вы ищете. Если вы увеличите ширину обводки, вам потребуется еще больше вставить чертеж (на половину ширины обводки (т. Е. Обводка шириной 4 точки должна быть вставлена в 2 точки).

Это можно легко исправить, изменив

CGRect rrect = self.bounds;

в

// Inset x and y by half the stroke width (1 point for 2 point stroke) 
CGRect rrect = CGRectInset(self.bounds, 1, 1);
 user82695511 мая 2012 г., 21:42
Спасибо за код, добавил результат выше. Я думаю, что я пойду этим решением. Еще надо поиграть с цветами, но мне нравится, как выглядит сейчас :)

Это потому, что обводка центрирована на пути, что означает, что половина ее находится внутри вашего прямоугольника, а другая половина - снаружи.

Чтобы решить эту проблему, удвойте ширину хода иобрезать путь до поглаживания. Результатом является внутренний штрих, который будет полностью внутри прямоугольника.

Обратите внимание, что обрезка по текущему пути в Quartz сбросит текущий путь, поэтому вам следуетсоздать путь как CGPath так что вы можетедобавь это, клип к нему, добавить его снова и погладить его.

Ваш ответ на вопрос