How to control shadow spread and blur?

前端 未结 8 1197
终归单人心
终归单人心 2020-12-07 06:51

I have designed UI elements in sketch, and one of them has a shadow with blur 1 and spread 0. I looked at the doc for the views layer property and layer doesnt have anything

8条回答
  •  隐瞒了意图╮
    2020-12-07 07:18

    Sketch Shadow Using IBDesignable and IBInspectable in Swift 4

    SKETCH AND XCODE SIDE BY SIDE

    CODE

    @IBDesignable class ShadowView: UIView {
    
        @IBInspectable var shadowColor: UIColor? {
            get {
                if let color = layer.shadowColor {
                    return UIColor(cgColor: color)
                }
                return nil
            }
            set {
                if let color = newValue {
                    layer.shadowColor = color.cgColor
                } else {
                    layer.shadowColor = nil
                }
            }
        }
    
        @IBInspectable var shadowOpacity: Float {
            get {
                return layer.shadowOpacity
            }
            set {
                layer.shadowOpacity = newValue
            }
        }
    
        @IBInspectable var shadowOffset: CGPoint {
            get {
                return CGPoint(x: layer.shadowOffset.width, y:layer.shadowOffset.height)
            }
            set {
                layer.shadowOffset = CGSize(width: newValue.x, height: newValue.y)
            }
    
         }
    
        @IBInspectable var shadowBlur: CGFloat {
            get {
                return layer.shadowRadius
            }
            set {
                layer.shadowRadius = newValue / 2.0
            }
        }
    
        @IBInspectable var shadowSpread: CGFloat = 0 {
            didSet {
                if shadowSpread == 0 {
                    layer.shadowPath = nil
                } else {
                    let dx = -shadowSpread
                    let rect = bounds.insetBy(dx: dx, dy: dx)
                    layer.shadowPath = UIBezierPath(rect: rect).cgPath
                }
            }
        }
    }
    

    OUTPUT

    HOW TO USE IT

提交回复
热议问题