Ios swift – How to add a shadow to a custom UIView created with BezierPath?

As Sweeper said (+1), the problem is the mask on the layer.

Personally, I would simplify this and just set the base layer of the view to be a CAShapeLayer, then you can set its path (and other properties) and then set the shadowPath, and be done with it:

class TicketView: UIView {
    override class var layerClass: AnyClass { CAShapeLayer.self }
    var shapeLayer: CAShapeLayer { layer as! CAShapeLayer }

    …

    convenience init(radius: CGFloat = 10, zigZagsWidth: CGFloat = 5, zigZagStartPosition: CGFloat = 1) {
        self.init()

        self.radius = radius
        self.zigZagsWidth = zigZagsWidth
        self.zigZagStartPosition = zigZagStartPosition

        backgroundColor = .clear
        shapeLayer.fillColor = .white
        layer.shadowRadius = 2
        layer.shadowOpacity = 1
        layer.shadowOffset = .zero
    }

    override func layoutSubviews() {
        super.layoutSubviews()

        let path = customPath().cgPath

        shapeLayer.path = path
        layer.shadowPath = path
    }
}

I would make these properties mutable, but just have them trigger a layout if mutated:

/// The radius used for the left side of this view
var radius: CGFloat = 10 { didSet { setNeedsLayout() } }

/// The zig-zag's width
var zigZagsWidth: CGFloat = 5 { didSet { setNeedsLayout() } }

/// The position within the card's view where the zig-zag starts (1.0 = the end of the view)
var zigZagStartPosition: CGFloat = 1 { didSet { setNeedsLayout() } }

Yielding:

Personally, I always make these @IBDesignable, so I can add them in Interface Builder and customize the parameters in the UI, rather than programmatically, but that is obviously a matter of personal preference. Regardless, here is my full implementation:

@IBDesignable
class TicketView: UIView {
    override class var layerClass: AnyClass { CAShapeLayer.self }
    var shapeLayer: CAShapeLayer { layer as! CAShapeLayer }

    /// The radius used for the left side of this view
    @IBInspectable var radius: CGFloat = 10 { didSet { setNeedsLayout() } }

    /// The zig-zag's width
    @IBInspectable var zigZagsWidth: CGFloat = 5 { didSet { setNeedsLayout() } }

    /// The position within the card's view where the zig-zag starts (1.0 = the end of the view)
    @IBInspectable var zigZagStartPosition: CGFloat = 1 { didSet { setNeedsLayout() } }

    @IBInspectable var fillColor: UIColor? {
        get { shapeLayer.fillColor.flatMap { UIColor(cgColor: $0) } }
        set { shapeLayer.fillColor = newValue?.cgColor }
    }

    @IBInspectable var shadowRadius: CGFloat {
        get { layer.shadowRadius }
        set { layer.shadowRadius = newValue }
    }

    @IBInspectable var shadowOpacity: Float {
        get { layer.shadowOpacity }
        set { layer.shadowOpacity = newValue }
    }

    @IBInspectable var shadowOffset: CGSize {
        get { layer.shadowOffset }
        set { layer.shadowOffset = newValue }
    }

    @IBInspectable var shadowColor: UIColor? {
        get { layer.shadowColor.flatMap { UIColor(cgColor: $0) } }
        set { layer.shadowColor = newValue?.cgColor }
    }

    convenience init(radius: CGFloat, zigZagsWidth: CGFloat, zigZagStartPosition: CGFloat) {
        self.init()
        self.radius = radius
        self.zigZagsWidth = zigZagsWidth
        self.zigZagStartPosition = zigZagStartPosition
        backgroundColor = .clear
        fillColor = .white
        layer.shadowRadius = 2
        layer.shadowOpacity = 1
        layer.shadowOffset = .zero
    }

    override func layoutSubviews() {
        super.layoutSubviews()

        let path = customPath().cgPath

        shapeLayer.path = path
        layer.shadowPath = path
    }

    func customPath() -> UIBezierPath {
        let path = UIBezierPath()

        // Top-Left
        let topLeftCorner = CGPoint(x: bounds.minX, y: bounds.minY)
        let bottomLeftCorner = CGPoint(x: bounds.minX, y: bounds.maxY)

        path.move(to: CGPoint(x: topLeftCorner.x, y: topLeftCorner.y))
        path.addArc(withCenter: CGPoint(x: topLeftCorner.x + radius, y: topLeftCorner.y + radius),
                    radius: radius,
                    startAngle: .pi,
                    endAngle: .pi * 1.5,
                    clockwise: true)

        // Zig-Zag
        let zigzagHeight: CGFloat = bounds.height / (bounds.height / 7.3)
        let zigzagWidth: CGFloat = zigZagsWidth
        let numberOfSegments = Int(bounds.height / zigzagHeight) + 1

        for index in 0..<numberOfSegments {
            let inY = CGFloat(index) * zigzagHeight
            let inX = (index % 2 == 0) ? bounds.width * zigZagStartPosition : bounds.width * zigZagStartPosition - zigzagWidth
            path.addLine(to: CGPoint(x: inX, y: inY))

            let zigZagCurveRadius: CGFloat = 2
            let zigZagCurveCenter = CGPoint(
                x: inX + zigZagCurveRadius,
                y: inY + zigZagCurveRadius
            )
            path.addArc(
                withCenter: zigZagCurveCenter,
                radius: zigZagCurveRadius,
                startAngle: .pi,
                endAngle: .pi,
                clockwise: true
            )
        }

        // Bottom-Left
        path.addLine(to: CGPoint(x: bottomLeftCorner.x + radius, y: bottomLeftCorner.y))
        path.addArc(
            withCenter: CGPoint(x: bottomLeftCorner.x + radius, y: bottomLeftCorner.y - radius),
            radius: radius,
            startAngle: .pi * 1.5,
            endAngle: .pi,
            clockwise: true
        )

        path.close()

        return path
    }
}

You may also notice that I replaced all references to the rect parameter supplied to the draw(_:) method with bounds.

The above eliminates the need to implement draw(_:) at all, but if you do implement that, never use rect for constructing the path. Sometimes, draw(_:) can be called where rect is not the same as the bounds. It may only be redrawing part of the view.

Bottom line, in custom draw(_:) implementations, use the rect to determine what needs to be drawn, but never how it is drawn.