如何制作 - 混合 cornerRadius - Swift 5

Question

我希望一切都好。

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

我该怎么做才能做到这一点？我的角在所有边上的半径都不相同。

Icon Corners Example

我有一个角半径函数：

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)

在我的 Carousel 中，我这样调用：

    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)

如何制作 - 混合 cornerRadius - Swift 5

How to make - Hybrid cornerRadius - Swift 5

user-interface

rounded-corners

uiview

ios

swift