显示圆的一部分

时间:2018-09-24 12:21:26

标签: swift

我想显示圆的任意位置。 我知道如何使用layer.cornerRadius获取圆形视图,现在我只想看到该圆的一部分(对于任何给定的辐射值)。如果可以将其余的内容简单地隐藏在白色的东西下面,那就可以了。 有什么想法,如何实现?

编辑: 我为我的视图写了一个课程:

class Circle:UIView {
var rad = 0

    let t = CGFloat(3.0)

    override func draw(_ rect: CGRect) {
        super.draw(rect)
        let r = self.frame.width / CGFloat(2)
        let center = CGPoint(x: r, y: r)
        let path = UIBezierPath()

        path.move(to: CGPoint(x: t, y: r))

        path.addLine(to: CGPoint(x: 0.0, y: r))

        path.addArc(withCenter: center, radius: CGFloat(r), startAngle: CGFloat(Double.pi), endAngle: CGFloat(Double.pi+rad), clockwise: true)

        let pos = path.currentPoint
        let dx = r - pos.x
        let dy = r - pos.y
        let d = sqrt(dx*dx+dy*dy)
        let p = t / d
        path.addLine(to: CGPoint(x: pos.x + p * dx, y: pos.y + p * dy))
        path.addArc(withCenter: center, radius: r-t, startAngle: CGFloat(Double.pi+rad), endAngle: CGFloat(Double.pi), clockwise: false)


        UIColor(named: "red")?.setFill()
        path.fill()
    }
}

public func setRad(perc:Double) {
    rad = Double.pi * 2 * perc

}

在我的视图控制器中呼叫

    circleView.layer.cornerRadius = circleView.frame.size.width / 2
    circleView.clipsToBounds = true
    circleView.layer.borderWidth = 1
    circleView.layer.borderColor = UIColor.darkGray.cgColor

    circleView.layer.shadowColor = UIColor.black.cgColor
    circleView.layer.shadowOpacity = 1
    circleView.layer.shadowOffset = CGSize.zero
    circleView.layer.shadowRadius = 3
    circleView.layer.masksToBounds = false

    circleView.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(self.onTap)))

现在,我得到了一个完整的正方形视图,从角落开始有一个黑色的圆圈,并且绘制了红色的弧。如有必要,我明天将发布图片

1 个答案:

答案 0 :(得分:0)

一种方法是绘制UIBezierPath

如果只想弧,可以调用init(arcCenter:radius:startAngle:endAngle:clockwise:)初始化程序。请记住以弧度指定起点和终点角度!

enter image description here

之后,您可以设置笔触颜色并调用stroke

如果您想要一个圆的扇区,则可以使用无参数初始化程序创建一个UIBezierPath,然后使用move(to:)来创建圆的中心,然后使用addLine(to:)来创建弧的起点。您可能只需一点三角即可计算出该点的位置。之后,像上面所述那样呼叫addArc,然后addLine(to:)开始。之后,您可以fill路径。