使用 UIBezierPath 点绘制矩形时如何圆角答案

【问题标题】：How to rounded the corners when I draw rectangle using UIBezierPath points使用 UIBezierPath 点绘制矩形时如何圆角
【发布时间】：2016-05-05 19:27:21
【问题描述】：

我使用 UIBezierPath 逐点添加创建了一个矩形，现在我想圆角这个矩形的角，但似乎没有办法做到这一点。谁能帮帮我？

class RectangleLayer: CAShapeLayer {

    let animationDuration: CFTimeInterval = 0.5

    override init() {
        super.init()
        fillColor = Colors.clear.CGColor
        lineWidth = 5.0
        path = rectanglePathStart.CGPath
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
var rectanglePathStart: UIBezierPath {
        let rectanglePath = UIBezierPath()
        rectanglePath.moveToPoint(CGPoint(x: 0.0, y: 100.0))
        rectanglePath.addLineToPoint(CGPoint(x: 0.0, y: -lineWidth))
        rectanglePath.addLineToPoint(CGPoint(x: 100.0, y: -lineWidth))
        rectanglePath.addLineToPoint(CGPoint(x: 100.0, y: 100.0))
        rectanglePath.addLineToPoint(CGPoint(x: -lineWidth / 2, y: 100.0))

        rectanglePath.closePath()

//        fillColor = Colors.red.CGColor
        return rectanglePath
    }
}

【问题讨论】：

你可以使用bezierPathWithArcCenter:radius:startAngle:endAngle:clockwise:来圆每个角。

标签： swift calayer uibezierpath rounded-corners cashapelayer

【解决方案1】：

如果你只想创建一个圆角矩形，那么你可以简单地使用

let rectangle = CGRect(x: 0, y: 0, width: 100, height: 100)
let path = UIBezierPath(roundedRect: rectangle, cornerRadius: 20)

如果你想圆一些角落，而不是其他的，那么你可以使用

let rectangle = CGRect(x: 0, y: 0, width: 100, height: 100)
let path = UIBezierPath(roundedRect: rectangle, byRoundingCorners: [.TopLeft, .BottomRight], cornerRadii: CGSize(width: 35, height: 35))

如果您想为每个拐角设置不同的拐角半径，则必须分别为每个圆添加圆弧。这归结为计算每个弧的中心和开始和结束角度。您会发现每个圆弧的中心都插入了矩形相应角的角半径。比如左上角的中心

CGPoint(x: rectangle.minX + upperLeftRadius, y: rectangle.minY + upperLeftRadius)

每条弧线的起点和终点角度可以是向左、向上、向下或向右。这些方向对应的角度可以在 UIBezierPath 文档中看到。

如果你需要创建很多这样的矩形，你可以为它创建一个方便的初始化器

extension UIBezierPath {
    convenience init(roundedRect rect: CGRect, topLeftRadius r1: CGFloat, topRightRadius r2: CGFloat, bottomRightRadius r3: CGFloat, bottomLeftRadius r4: CGFloat) {
        let left  = CGFloat(M_PI)
        let up    = CGFloat(1.5*M_PI)
        let down  = CGFloat(M_PI_2)
        let right = CGFloat(0.0)
        self.init()
        addArcWithCenter(CGPoint(x: rect.minX + r1, y: rect.minY + r1), radius: r1, startAngle: left,  endAngle: up,    clockwise: true)
        addArcWithCenter(CGPoint(x: rect.maxX - r2, y: rect.minY + r2), radius: r2, startAngle: up,    endAngle: right, clockwise: true)
        addArcWithCenter(CGPoint(x: rect.maxX - r3, y: rect.maxY - r3), radius: r3, startAngle: right, endAngle: down,  clockwise: true)
        addArcWithCenter(CGPoint(x: rect.minX + r4, y: rect.maxY - r4), radius: r4, startAngle: down,  endAngle: left,  clockwise: true)
        closePath()
    }
}

并像这样使用它

let path = UIBezierPath(roundedRect: rectangle, topLeftRadius: 30, topRightRadius: 10, bottomRightRadius: 15, bottomLeftRadius: 5)

【讨论】：