2015-05-31 3 views
1

Я создаю приложение для простого игрока. Существует круг, который показывает ход воспроизведения песни. enter image description hereМаскировка сегментов круга в swift

Каков наилучший способ нарисовать этот круг в Swift и сделать маску? Я предполагаю, что могу нарисовать 2 круга, накладывая штрих ширины на желаемую толщину и не заполняя ее. И белый должен быть замаскирован в соответствии с некоторым параметром. У меня нет идеи, как правильно маскировать ее.

+0

Возможный дубликат [Как создать круг с CALayer?] (Http://stackoverflow.com/questions/28783494/how-do-i-create-a-circle-with-calayer) – Icaro

ответ

1

Я пришел с этим решением в последнее время:

class CircularProgressView: UIView { 

    private let floatPi = CGFloat(M_PI) 
    private var progressColor = UIColor.greenColor() 
    private var progressBackgroundColor = UIColor.grayColor() 

    @IBInspectable var percent: CGFloat = 0.11 { 
     didSet { 
      setNeedsDisplay() 
     } 
    } 
    @IBInspectable var lineWidth: CGFloat = 18 

    override func drawRect(rect: CGRect) { 
     let context = UIGraphicsGetCurrentContext() 
     let origo = CGPointMake(frame.size.width/2, frame.size.height/2) 
     let radius: CGFloat = frame.size.height/2 - lineWidth/2 
     CGContextSetLineWidth(context, lineWidth) 
     CGContextMoveToPoint(context, frame.width/2, lineWidth/2) 
     CGContextAddArc(context, origo.x, origo.y, radius, floatPi * 3/2, floatPi * 3/2 + floatPi * 2 * percent, 0) 
     progressColor.setStroke() 
     let lastPoint = CGContextGetPathCurrentPoint(context) 

     CGContextStrokePath(context) 

     CGContextMoveToPoint(context, lastPoint.x, lastPoint.y) 
     CGContextAddArc(context, origo.x, origo.y, radius, floatPi * 3/2 + floatPi * 2 * percent, floatPi * 3/2, 0) 
     progressBackgroundColor.setStroke() 
     CGContextStrokePath(context) 
    } 
} 

Вы просто должны установить правильный кадр к нему (с помощью кода или интерфейса строителя), и установить свойство процентов.

Это решение не использует маску или два круга, только две дуги, первый запуск с часами 12 o и переход к проценту хода 2 * Pi *, а другая дуга рисуется от конца предыдущей дуги до 12 o часы.

Важно: percent property должно быть от 0 до 1!

+0

Прохладный! Он работает очень хорошо. Спасибо! –