快速掩盖圆线段 [英] 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变量百分比：CGFloat = 0.11 {
 didSet {
 setNeedsDisplay（）
} 
} 
 @IBInspectable var lineWidth：CGFloat = 18 
 
覆盖func drawRect（rect：CGRect）{
 let context = UIGraphicsGetCurrentContext（）
 let origo = CGPointMake（frame.size.width / 2， frame.size.height / 2）
设置半径：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，浮点数tPi * 3/2 + floatPi * 2 *％，0）
 progressColor.setStroke（）
让lastPoint = CGContextGetPathCurrentPoint（context）
 
 CGContextStrokePath（context）
 
 CGContextMoveToPoint（上下文，lastPoint.x，lastPoint.y）
 CGContextAddArc（上下文，origo.x，origo.y，半径，floatPi * 3/2 + floatPi * 2 *百分比，floatPi * 3 / 2，0）
 progressBackgroundColor.setStroke（）
 CGContextStrokePath（context）
} 
} 
  

您只需为其设置一个正确的框架（通过代码或界面生成器），然后设置百分比属性。

此解决方案不是使用蒙版或两个圆，而是两个圆弧，第一个圆弧在12点钟开始，到2 * Pi *进度百分比，另一个圆弧是从上一个圆弧的末尾到12点钟。 p>

重要：百分比属性必须在0到1之间！

I'm creating a simple player app. There is a circle, that shows a progress of playing a song.

What is the best way to draw this circle in Swift and make a mask? I assume I can draw a 2 circles putting the width stroke to the thickness I want and without filling it. And the white one has to be masked according to some parameter. I don't have an idea, how to mask it in a proper way.

解决方案

I came up with this solution recently:

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)
    }
}

You just have to set a correct frame to it (via code or interface builder), and set the percent property.

This solution is not using mask or two circles, just two arcs, the first start at 12 o clock and goes to 2 * Pi * progress percent, and the other arc is drawn from the end of the previous arc to 12 o clock.

Important: the percent property has to be between 0 and 1!

这篇关于快速掩盖圆线段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！