屏蔽 swift 中的圆段
Masking circle segments in swift
我正在创建一个简单的播放器应用程序。有一个圆圈,表示播放歌曲的进度。
在Swift中画这个圆圈并制作面具的最佳方法是什么?我假设我可以画一个 2 个圆圈,将宽度描边设置为我想要的厚度并且不填充它。白色的必须根据一些参数被屏蔽。我不知道如何以适当的方式掩盖它。
我最近想到了这个解决方案:
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 * progress percent,另一个弧是从上一个弧的末尾绘制到12 点。
重要提示:percent
属性 必须介于 0 和 1 之间!
我正在创建一个简单的播放器应用程序。有一个圆圈,表示播放歌曲的进度。
在Swift中画这个圆圈并制作面具的最佳方法是什么?我假设我可以画一个 2 个圆圈,将宽度描边设置为我想要的厚度并且不填充它。白色的必须根据一些参数被屏蔽。我不知道如何以适当的方式掩盖它。
我最近想到了这个解决方案:
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 * progress percent,另一个弧是从上一个弧的末尾绘制到12 点。
重要提示:percent
属性 必须介于 0 和 1 之间!