iOS: Layer shadow path is not correct

2019-08-10 19:44发布

问题:

I have UIView in my design and I need to allow user to change the corner radius. I have designed the testier using @IBDesignable and @IBInspectable.

I am getting the expected shape(cornerRadius curve) upto the 33% of cornerRadius

e.g bounds.size.width = 100, I am getting correct shadow shape if corner radius is upto 33.

If cornerRadius is more than 33 then shadow shape becomes circle irrespective of original shape cornerRadius.

Any suggestion?

Please refer the code and design screenshot below,

Code:

@IBDesignable class DrawingView: UIView {

    @IBInspectable var cornerRadius: CGFloat = 0.0

    @IBInspectable var borderWidth: CGFloat = 0.0
    @IBInspectable var borderColor: UIColor = .clear

    @IBInspectable var shadowRadius: CGFloat = 0.0
    @IBInspectable var shadowOffset: CGSize = .zero
    @IBInspectable var shadowColor: UIColor = .clear

    override func draw(_ rect: CGRect) {
        // Drawing code
        self.layer.cornerRadius = cornerRadius
        self.clipsToBounds = true
        self.layer.borderWidth = borderWidth
        self.layer.borderColor = borderColor.cgColor

        let path = UIBezierPath(roundedRect: self.bounds, cornerRadius: self.cornerRadius)
        self.layer.shadowPath = path.cgPath
        self.layer.shadowRadius = shadowRadius
        self.layer.shadowOffset = shadowOffset
        self.layer.shadowColor = shadowColor.cgColor
        self.layer.masksToBounds = false
        self.layer.shadowOpacity = 1.0
    }
}

Screenshots:

Corner Radius = 20%

Corner Radius >= 33%