ios - 如何制作 - 混合cornerRadius - Swift 5

Question

我希望一切都好。

下面是下面，我需要像示例中的那样制作cornerRadius，但在图标中，他根本没有改变，在Carousel中，他只制作底部角落，而不是顶部角落。

我能做些什么来做到这一点？我的角在所有方面都没有相同的半径。

Icon Corners Example

我有cornerRadius的功能:

func roundCorners(_ corners: UIRectCorner, radius: CGFloat) {
  let path = UIBezierPath(roundedRect: self.bounds,
                          byRoundingCorners: corners,
                          cornerRadii: CGSize(width: radius, height: radius))
  let mask = CAShapeLayer()
  mask.path = path.cgPath
  self.layer.mask = mask
}

在我的图标中，我以这种方式调用电话:

    bigIconContentView.roundCorners([.topRight, .bottomLeft], radius: 30)
    bigIconContentView.roundCorners([.topLeft], radius: 10)

在我的旋转木马中，我这样称呼:

    bStoreImage.roundCorners([.topLeft, .topRight], radius: 20)
    beaconsContentView.roundCorners([.topLeft, .topRight], radius: 20)
    beaconsContentView.roundCorners([.bottomLeft, .bottomRight], radius: 7)

我做错了什么？我该怎么做才能使它们起作用并使这些面具有不同的半径？

我可以让两个 roundCorners 调用相同的元素但具有不同的属性？就像我在我的例子中所做的那样？

谢谢你的帮助!

Answer 1

让我们关注roundCorners(_ corners: radius:)

func roundCorners(_ corners: UIRectCorner, radius: CGFloat) {
    let someNewMask = somethingNew(corners, radius: radius)
    self.layer.mask = someNewMask
}

你正在做:

bigIconContentView.roundCorners([.topRight, .bottomLeft], radius: 30)
bigIconContentView.roundCorners([.topLeft], radius: 10)

最后，正在这样做:

let someNewMask1 = somethingNew([.topRight, .bottomLeft], radius: 30)
bigIconContentView.mask = someNewMask1
let someNewMask2 = somethingNew([. topLeft], radius: 10)
bigIconContentView.mask = someNewMask2

所以你在做:

bigIconContentView.mask = someNewMask1
bigIconContentView.mask = someNewMask2

你看到问题了吗？您正在覆盖 bigIconContentView mask每次都有一个新的(最后一个调用)。

您必须一起应用不同的角(角半径没有什么复杂的)

extension UIView {
    func roundCornersRadii(topLeft: CGFloat = 0, topRight: CGFloat = 0, bottomLeft: CGFloat = 0, bottomRight: CGFloat = 0) {
        let path = UIBezierPath()

        path.move(to: CGPoint(x: topLeft, y: 0))
        path.addLine(to: CGPoint(x: bounds.width - topRight, y: 0))
        path.addArc(withCenter: CGPoint(x: bounds.width - topRight, y: topRight),
                    radius: topRight,
                    startAngle: -CGFloat.pi/2.0,
                    endAngle: 0,
                    clockwise: true)
        path.addLine(to: CGPoint(x: bounds.width, y: bounds.width - bottomRight))
        path.addArc(withCenter: CGPoint(x: bounds.width - bottomRight, y: bounds.height - bottomRight),
                    radius: bottomRight,
                    startAngle: 0,
                    endAngle: CGFloat.pi/2.0,
                    clockwise: true)
        path.addLine(to: CGPoint(x: bottomRight, y: bounds.height))
        path.addArc(withCenter: CGPoint(x: bottomLeft, y: bounds.height - bottomLeft),
                    radius: bottomLeft,
                    startAngle: CGFloat.pi/2.0,
                    endAngle: CGFloat.pi,
                    clockwise: true)
        path.addLine(to: CGPoint(x: 0, y: topLeft))
        path.addArc(withCenter: CGPoint(x: topLeft, y: topLeft),
                    radius: topLeft,
                    startAngle: CGFloat.pi,
                    endAngle: CGFloat.pi/2.0,
                    clockwise: true)
        path.close()

        let mask = CAShapeLayer()
        mask.path = path.cgPath
        self.layer.mask = mask
    }
} 

添加样本测试:

let superView = UIView(frame: CGRect(x: 0, y: 0, width: 400, height: 400))
let subview = UIView(frame: CGRect(x: 100, y: 100, width: 200, height: 200))
superView.backgroundColor = .red
subview.backgroundColor = .blue
subview.roundCornersRadii(topLeft: 20, topRight: 30, bottomLeft: 40, bottomRight: 50)
superView.addSubview(subview)

或者在你的情况下:

let superView = UIView(frame: CGRect(x: 0, y: 0, width: 400, height: 400))
let subview = UIView(frame: CGRect(x: 100, y: 100, width: 200, height: 200))
superView.backgroundColor = .red
subview.backgroundColor = .blue
subview.roundCornersRadii(topLeft: 20, topRight: 30, bottomLeft: 40, bottomRight: 50)
subview.roundCornersRadii(topLeft: 10, topRight: 30, bottomLeft: 30)
superView.addSubview(subview)