Блог

Кто знал, что существует так много способов нарисовать круг?

TL; DR: Если вы хотите использовать CAShapeLayer и при этом получать гладкие круги, вам нужно использовать shouldRasterize и rasterizationScale осторожно.

Оригинал

Вот ваш оригинал CAShapeLayer и отличие от drawRect версии. Я сделал скриншот со своего iPad Mini с дисплеем Retina, затем обработал его в Photoshop и увеличил до 200%. Как вы можете ясно видеть, CAShapeLayer версия имеет видимые различия, особенно по левому и правому краям (самые темные пиксели в diff).

Растрирование в масштабе экрана

Давайте растрируем в масштабе экрана, который должен быть 2.0 на устройствах retina. Добавьте этот код:

 layer.rasterizationScale = [UIScreen mainScreen].scale;
layer.shouldRasterize = YES;
 

Обратите внимание, что rasterizationScale по умолчанию 1.0 используется значение даже на устройствах retina, что объясняет нечеткость значения по умолчанию shouldRasterize .

Круг теперь немного сглажен, но плохие биты (самые темные пиксели в diff) переместились к верхнему и нижнему краям. Не заметно лучше, чем отсутствие растрирования!

Растрировать в 2 раза в масштабе экрана

 layer.rasterizationScale = 2.0 * [UIScreen mainScreen].scale;
layer.shouldRasterize = YES;
 

Это растрирует путь в 2 раза в масштабе экрана или до 4.0 на устройствах retina.

Теперь круг заметно сглажен, различия намного светлее и распределены равномерно.

Я также запустил это в Instruments: Core Animation и не увидел каких-либо существенных различий в параметрах отладки Core Animation. Однако это может быть медленнее, поскольку оно уменьшает масштаб, а не просто выводит на экран закадровое растровое изображение. Вам также может потребоваться временно установить shouldRasterize = NO во время анимации.

Что не работает

• Устанавливается shouldRasterize = YES само по себе.На устройствах retina это выглядит нечетко, потому rasterizationScale != screenScale что .
• Установить contentScale = screenScale .Поскольку CAShapeLayer не отображается contents , независимо от того, растрируется он или нет, это не влияет на отображение.

Спасибо Джею Голливуду из Humaan, опытному графическому дизайнеру, который первым указал мне на это.

Ах, я столкнулся с той же проблемой некоторое время назад (тогда еще была iOS 5, iirc), и я написал следующий комментарий в коде:

 /*
    ShapeLayer
    ----------
    Fixed equivalent of CAShapeLayer. 
    CAShapeLayer is meant for animatable bezierpath 
    and also doesn't cache properly for retina display. 
    ShapeLayer converts its path into a pixelimage, 
    honoring any displayscaling required for retina. 
*/
 

Заполненный круг под формой круга потеряет свой цвет заполнения. В зависимости от цветов это было бы очень заметно. И во время взаимодействия с пользователем форма будет отображаться еще хуже, что позволило мне сделать вывод, что shapelayer всегда будет отображаться с коэффициентом масштабирования 1.0, независимо от коэффициента масштабирования слоя, потому что он предназначен для целей анимации.

т. е. Вы используете CAShapeLayer только в том случае, если у вас есть особая потребность в анимируемых изменениях формы bezierpath, а не в каких-либо других свойствах, которые можно анимировать с помощью обычных свойств слоя.

В конце концов я решил написать простой ShapeLayer, который будет кэшировать свой собственный результат, но вы можете попробовать реализовать displayLayer: или drawLayer:InContext:

Что-то вроде:

 - (void)displayLayer:(CALayer *)layer
{
    UIImage *image = nil;

    CGContextRef context = UIImageContextBegin(layer.bounds.size, NO, 0.0);
    if (context != nil)
    {
        [layer renderInContext:context];
        image = UIImageContextEnd();
    }

    layer.contents = image;
}
 

Я этого не пробовал, но было бы интересно узнать результат…

Я знаю, что это старый вопрос, но для тех, кто пытается работать в методе drawRect и все еще испытывает проблемы, одна небольшая настройка, которая мне очень помогла, заключалась в использовании правильного метода для извлечения UIGraphicsContext. Используя значение по умолчанию:

 let newSize = CGSize(width: 50, height: 50)
UIGraphicsBeginImageContext(newSize)
let context = UIGraphicsGetCurrentContext()
 

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

 let newSize = CGSize(width: 50, height: 50)
UIGraphicsBeginImageContextWithOptions(newSize, false, 0)
let context = UIGraphicsGetCurrentContext()
 

оттуда использование обычных методов рисования работало нормально. Установка последнего параметра в 0 значение укажет системе использовать коэффициент масштабирования главного экрана устройства. Средний параметр false используется для указания графического контекста, будете ли вы рисовать непрозрачное изображение ( true означает, что изображение будет непрозрачным) или для которого требуется включение альфа-канала для прозрачных пленок. Вот соответствующие документы Apple для получения дополнительной информации: https://developer.apple.com/reference/uikit/1623912-uigraphicsbeginimagecontextwitho ?язык = objc

Я предполагаю CAShapeLayer , что это подкреплено более производительным способом рендеринга его форм и требует некоторых сокращений. В любом случае CAShapeLayer , основной поток может быть немного медленным. Если вам не нужно анимировать между разными путями, я бы предложил асинхронно отображать a UIImage в фоновом потоке.

Используйте этот метод для рисования UIBezierPath

 /*********draw circle where double tapped******/
- (UIBezierPath *)makeCircleAtLocation:(CGPoint)location radius:(CGFloat)radius
{
    self.circleCenter = location;
    self.circleRadius = radius;

    UIBezierPath *path = [UIBezierPath bezierPath];
    [path addArcWithCenter:self.circleCenter
                    radius:self.circleRadius
                startAngle:0.0
                  endAngle:M_PI * 2.0
                 clockwise:YES];

    return path;
}
 

И рисовать так

 CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.path = [[self makeCircleAtLocation:location radius:50.0] CGPath];
    shapeLayer.strokeColor = [[UIColor whiteColor] CGColor];
    shapeLayer.fillColor = nil;
    shapeLayer.lineWidth = 3.0;

    // Add CAShapeLayer to our view

    [gesture.view.layer addSublayer:shapeLayer];