2015-05-31 27 views
1

我正在创建一个简单的播放器应用程序。有一个圆圈,表示播放歌曲的进度。 enter image description hereswift中的遮蔽圆段

什么是最好的方式来绘制这个圈子在斯威夫特,并制作一个面具?我想我可以绘制一个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点钟开始,并达到2 * Pi *进度百分比,另一个圆弧从前一个圆弧的末端绘制到12时钟。

重要提示:percent属性必须介于0和1之间!

+0

酷!它工作得很好。谢谢! –