使用UIBezierPath点绘制矩形时如何圆角化 [英] How to rounded the corners when I draw rectangle using UIBezierPath points

问题描述

我使用逐点添加UIBezierPath的方式创建了一个矩形，现在我想对这个矩形的角进行圆角处理，但是似乎没有办法。有人可以帮我吗？

I crated a rectangle using UIBezierPath adding point by point, now I want to rounded the corners of this rectangle but seems there are no way to do it. can anyone help me ?

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

推荐答案

如果只想创建一个圆角矩形，则只需使用

If all you want to do is create a rounded rectangle, then you can simply use

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

如果您想绕一些角，但不能绕过其他角，则可以使用

If you want to round some of the corners, but not others, then you can use

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

如果您希望每个拐角都有不同的拐角半径，那么您将必须为每个圆分别添加圆弧。这归结为计算每个圆弧的中心以及起始和终止角度。您会发现每个圆弧的中心都是从矩形对应角开始的角半径。例如，左上角的中心

If you want to have a different corner radius for each corner, then you'll have to add the arc for each circle individually. This comes down to calculating the center and the start and end angle of each arc. You'll find that the center of each arc is inset the corner radius from corresponding corner of the rectangle. For example, the center of the top left corner

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

每个圆弧的起始和终止角可以是向左，向上，向下或对。可以在UIBezierPath文档中看到与这些方向相对应的角度。

The start and end angle for each arc will be either straight left, up, down, or right. The angles corresponding to these directions can be seen in the UIBezierPath documentation.

如果您需要创建许多这样的矩形，则可以为其创建一个便捷的初始化器

If you need to create many rectangles like this, you can create a convenience initializer for it

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)

这篇关于使用UIBezierPath点绘制矩形时如何圆角化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！