UIImageView Mask Layer not coming from corners Until Scroll PageViewController First time

Question

I want to achieve this result

So I need to add mask at bottom but Here What I got

Code I have tried

 private func setupImageCutPath () {
        let path = UIBezierPath()
        path.move(to: .zero)
        path.addLine(to: CGPoint(x: 0  , y: self.imgView.frame.height))
        path.addLine(to: CGPoint(x: self.imgView.frame.width  , y: self.imgView.frame.height - imageCutAwayPart))
        path.addLine(to: CGPoint(x: self.imgView.frame.width, y: 0))


        // Multiple tried to check from where masking is comming
        self.maskLayer.fillColor = UIColor.gray.cgColor
        self.maskLayer.lineWidth = 1.0
        self.maskLayer.borderColor = UIColor.gray.cgColor
        self.maskLayer.borderWidth = 1.0
        self.maskLayer.path = path.cgPath


        self.imgView.layer.mask = self.maskLayer

    }

After scroll First time I am getting correct result

I don't understand What I am missing Any Help ?

Answer 1

I solved issue with

    path.move(to: .zero)
    /* THIS HELPLS ME */ path.addLine(to: CGPoint(x: 0  , y: self.imgView.frame.height  -  imageCutAwayPart / 2 ))
    path.addLine(to: CGPoint(x: self.imgView.frame.width   , y: self.imgView.frame.height - imageCutAwayPart))
    path.addLine(to: CGPoint(x: self.imgView.frame.width, y: 0))

But I don't understand why I need to move CGPoint(x: 0 , y: self.imgView.frame.height - imageCutAwayPart / 2 ) instead of this CGPoint(x: 0 , y: self.imgView.frame.height)

If any one know this please post as answer I will surely accept the answer

EDIT

There was silly but smart mistake in Storybaord

Mistake was there is UIView which contains Label shown in screenshot. The Part visible is is the UIView I thought it masking is not working properly. Still there is issue that very first time in pageview controller mask is not proper but after scroll one time it is perfect.

EDIT2 Thanks to @DonMag

Following is working solution for every case

class CutOfImageView:UIImageView {
    let imageCutAwayPart:CGFloat = 80
    let maskLayer = CAShapeLayer()

    override func layoutSubviews() {
        super.layoutSubviews()
        self.setupImageCutPath()
        self.layer.mask = self.maskLayer

    }

    private func setupImageCutPath () {
        let path = UIBezierPath()
        path.move(to: .zero)
        path.addLine(to: CGPoint(x: 0  , y: self.frame.height ))
        path.addLine(to: CGPoint(x: self.frame.width   , y: self.frame.height - imageCutAwayPart))
        path.addLine(to: CGPoint(x: self.frame.width, y: 0))
        path.close()
        self.maskLayer.path = path.cgPath



    }
}