The layer is masked by a `CAShapeLayer` with a path that's a rect, a rounded-rect, or an ellipse

Viewed 2663

I'm trying to create a view that can have different values for each of the corners. Everything works as expected but in the Vide Debug mode I get an optimization opportunities warning, which says:

The layer is masked by a CAShapeLayer with a path that's a rect, a rounded-rect, or an ellipse. Instead, use an appropriately transformed container layer with cornerRadius and masksToBounds set.

I'm wondering if there is a better way to achieve the same effect, here's my current code:

extension UIBezierPath {

    convenience init(
        shouldRoundRect rect: CGRect,
        topLeftRadius: CGFloat,
        topRightRadius: CGFloat,
        bottomLeftRadius: CGFloat,
        bottomRightRadius: CGFloat
    ){
        self.init()

        let path = CGMutablePath()

        let topLeft = rect.origin
        let topRight = CGPoint(x: rect.maxX, y: rect.minY)
        let bottomRight = CGPoint(x: rect.maxX, y: rect.maxY)
        let bottomLeft = CGPoint(x: rect.minX, y: rect.maxY)

        if topLeftRadius != 0 {
            path.move(to: CGPoint(x: topLeft.x + topLeftRadius, y: topLeft.y))
        } else {
            path.move(to: topLeft)
        }

        if topRightRadius != 0 {
            path.addLine(to: CGPoint(x: topRight.x - topRightRadius, y: topRight.y))
            path.addArc(tangent1End: topRight, tangent2End: CGPoint(x: topRight.x, y: topRight.y + topRightRadius), radius: topRightRadius)
        } else {
            path.addLine(to: topRight)
        }

        if bottomRightRadius != 0 {
            path.addLine(to: CGPoint(x: bottomRight.x, y: bottomRight.y - bottomRightRadius))
            path.addArc(tangent1End: bottomRight, tangent2End: CGPoint(x: bottomRight.x - bottomRightRadius, y: bottomRight.y), radius: bottomRightRadius)
        } else {
            path.addLine(to: bottomRight)
        }

        if bottomLeftRadius != 0 {
            path.addLine(to: CGPoint(x: bottomLeft.x + bottomLeftRadius, y: bottomLeft.y))
            path.addArc(tangent1End: bottomLeft, tangent2End: CGPoint(x: bottomLeft.x, y: bottomLeft.y - bottomLeftRadius), radius: bottomLeftRadius)
        } else {
            path.addLine(to: bottomLeft)
        }

        if topLeftRadius != 0 {
            path.addLine(to: CGPoint(x: topLeft.x, y: topLeft.y + topLeftRadius))
            path.addArc(tangent1End: topLeft, tangent2End: CGPoint(x: topLeft.x + topLeftRadius, y: topLeft.y), radius: topLeftRadius)
        } else {
            path.addLine(to: topLeft)
        }

        path.closeSubpath()
        cgPath = path
    }
}

class CornerRadiusView: UIView  {
    private var topLeftRadius: CGFloat = 0
    private var topRightRadius: CGFloat = 0
    private var bottomLeftRadius: CGFloat = 0
    private var bottomRightRadius: CGFloat = 0
    
    func setCornerRadius(radius: CornerRadius) {
        topLeftRadius = radius.topLeft
        topRightRadius = radius.topRight
        bottomLeftRadius = radius.bottomLeft
        bottomRightRadius = radius.bottomRight
        
        setNeedsLayout()
    }

    override open func layoutSubviews() {
        super.layoutSubviews()
        applyRadiusMask()
    }
    
    private func applyRadiusMask() {
        let path = UIBezierPath(
            shouldRoundRect: bounds,
            topLeftRadius: topLeftRadius,
            topRightRadius: topRightRadius,
            bottomLeftRadius: bottomLeftRadius,
            bottomRightRadius: bottomRightRadius
        )
        let shape = CAShapeLayer()
        shape.path = path.cgPath
        layer.mask = shape
    }
}

struct CornerRadius {
    let topLeft: CGFloat
    let topRight: CGFloat
    let bottomLeft: CGFloat
    let bottomRight: CGFloat
}
0 Answers
Related