Swift 中的圆 - 无法摆脱剪裁

Question

我正在使用 Swift 3.0 并使用 UIBezierPath 绘制圆圈。我的代码如下。无论我改变什么，圆的边缘仍然被剪裁。圆圈位于图像视图中。我尝试过操纵视图的高度/重量，以及将其更改为“方面填充”“方面适合”“中心”等。我看过的教程还告诉我，如果我更改“var multiplier: CG Float = 1.0 " 到 0.85 或其他数字，剪裁将消失。我已经尝试过了，但它没有用。我该如何解决这个问题？

class Circle1: UIView {
    var multiplier:CGFloat = 0.85
    //this takes away the "clippinh" you might see in the view

    var centerOfCirclesView: CGPoint{
        return CGPoint(x:bounds.midX, y:bounds.midY)
    }
    var halfOfViewsSize: CGFloat{
        return min(bounds.size.height, bounds.size.width) / 2
    }

    var lineWidth:CGFloat = 1.0

    //circle radius compute

    var full = CGFloat(M_PI * 2)
    var quarter = CGFloat(M_PI / 2)
    var half = CGFloat(M_PI)
    var threeQuarters = CGFloat(3 * M_PI / 2)


    func drawCircleCenteredAt(_:CGPoint, withRadius radius:CGFloat) -> UIBezierPath{
        let circlePath = UIBezierPath(arcCenter: centerOfCirclesView,
                                      radius: halfOfViewsSize,
                                      startAngle: 00,
                                      endAngle: full,
                                      clockwise: false)
        circlePath.lineWidth = lineWidth

        return circlePath
    }

    override func draw(_ rect: CGRect) {
        UIColor(hue: 0.7194, saturation: 0, brightness: 0.52, alpha: 1.0).set()
        lineWidth = 15.0
        drawCircleCenteredAt(centerOfCirclesView, withRadius: halfOfViewsSize).stroke()
    }

}

class Circle2: UIView {

    var multiplier:CGFloat = 0.85
    //this takes away the "clippinh" you might see in the view

    var centerOfCirclesView: CGPoint{
        return CGPoint(x:bounds.midX, y:bounds.midY)
    }
    var halfOfViewsSize: CGFloat{
        return min(bounds.size.height, bounds.size.width) / 2
    }

    var lineWidth:CGFloat = 1.0

    //circle radius compute

    var full = CGFloat(M_PI * 2)
    var quarter = CGFloat(M_PI / 2)
    var half = CGFloat(M_PI)
    var threeQuarters = CGFloat(3 * M_PI / 2)


    func drawCircleCenteredAt(_:CGPoint, withRadius radius:CGFloat) -> UIBezierPath{
        let circlePath = UIBezierPath(arcCenter: centerOfCirclesView,
                                      radius: halfOfViewsSize,
                                      startAngle: 00,
                                      endAngle: half,
                                      clockwise: false)
        circlePath.lineWidth = lineWidth

        return circlePath
    }
}

Answer 1

你需要减少你的radius，这样你的圈子就不会被剪裁。例如，在Circle1 中，将halfOfViewSize - 0.5 * lineWidth 传递给radius 到drawCircleCenteredAt(_:withRadius:)，然后在创建UIBezierPath 时使用该半径：

func drawCircleCenteredAt(_:CGPoint, withRadius radius:CGFloat) -> UIBezierPath {
    let circlePath = UIBezierPath(arcCenter: centerOfCirclesView,
                                  radius: radius,               // Changed this to radius
                                  startAngle: 0,
                                  endAngle: full,
                                  clockwise: false)
    circlePath.lineWidth = lineWidth

    return circlePath
}

override func draw(_ rect: CGRect) {
    UIColor(hue: 0.7194, saturation: 0, brightness: 0.52, alpha: 1.0).set()
    lineWidth = 15.0
    drawCircleCenteredAt(centerOfCirclesView, withRadius: halfOfViewsSize - 0.5 * lineWidth).stroke()
}

您的multiplier 无效，因为您没有在任何地方使用它。您还可以在创建UIBezierPath 时使用halfOfViewSize * multiplier 来减少radius。

---

这是修改后的代码，它从draw(_:) 例程中删除了颜色和线宽的设置。

class Circle1: UIView {
    var centerOfCirclesView: CGPoint{
        return CGPoint(x:bounds.midX, y:bounds.midY)
    }

    var halfOfViewsSize: CGFloat{
        return min(bounds.size.height, bounds.size.width) / 2
    }

    var lineWidth:CGFloat = 1.0

    var color = UIColor(hue: 0.7194, saturation: 0, brightness: 0.52, alpha: 1.0)
    //circle radius compute

    var full = CGFloat.pi * 2
    var quarter = CGFloat.pi / 2
    var half = CGFloat.pi
    var threeQuarters = 3 * CGFloat.pi / 2

    func drawCircleCenteredAt(_:CGPoint, withRadius radius:CGFloat) -> UIBezierPath{
        let circlePath = UIBezierPath(arcCenter: centerOfCirclesView,
                                      radius: radius,                     // Changed this to radius
                                      startAngle: 0,
                                      endAngle: full,
                                      clockwise: false)
        circlePath.lineWidth = lineWidth

        return circlePath
    }

    override func draw(_ rect: CGRect) {
        color.set()
        drawCircleCenteredAt(centerOfCirclesView, withRadius: halfOfViewsSize - 0.5 * 15.0).stroke()
    }
}

这是一个在 Swift Playground 中运行的演示：