shadow not visible on view with custom shape

Question

on my imageview shadow is not visible after i changed the shape of it to hexagon here's how i'm changing imageView's shape :

extension UIView {


func makeHexagon(){

    let lineWidth: CGFloat = 3
    let path = UIBezierPath(roundedPolygonPathWithRect: self.bounds, lineWidth: lineWidth, sides: 6, cornerRadius: 1)

    let mask = CAShapeLayer()


    mask.path = path.cgPath
    mask.lineWidth = lineWidth
    mask.strokeColor = UIColor.clear.cgColor //controls the  stroke width
    mask.fillColor = UIColor.white.cgColor
    self.layer.mask = mask




    let border = CAShapeLayer()
    border.path = path.cgPath
    border.lineWidth = lineWidth
    border.strokeColor = UIColor.black.cgColor
    border.fillColor = UIColor.clear.cgColor


    self.layer.addSublayer(border)

}

}

............................

 extension UIBezierPath {

    convenience init(roundedPolygonPathWithRect rect: CGRect, lineWidth: CGFloat, sides: NSInteger, cornerRadius: CGFloat) {

        self.init()



        let theta = CGFloat(2.0 * M_PI) / CGFloat(sides)
        let offSet = CGFloat(cornerRadius) / CGFloat(tan(theta/2.0))
        let squareWidth = min(rect.size.width, rect.size.height)

        var length = squareWidth - lineWidth

        if sides%4 != 0 {
            length = length * CGFloat(cos(theta / 2.0)) + offSet/2.0
        }
        let sideLength = length * CGFloat(tan(theta / 2.0))

        var point = CGPoint(x: squareWidth / 2.0 + sideLength / 2.0 - offSet, y: squareWidth - (squareWidth - length) / 2.0)
        var angle = CGFloat(M_PI)
        move(to: point)

        for _ in 0 ..< sides {
            point = CGPoint(x: point.x + CGFloat(sideLength - offSet * 2.0) * CGFloat(cos(angle)), y: point.y + CGFloat(sideLength - offSet * 2.0) * CGFloat(sin(angle)))
            addLine(to: point)

            let center = CGPoint(x: point.x + cornerRadius * CGFloat(cos(angle + CGFloat(M_PI_2))), y: point.y + cornerRadius * CGFloat(sin(angle + CGFloat(M_PI_2))))
            addArc(withCenter: center, radius:CGFloat(cornerRadius), startAngle:angle - CGFloat(M_PI_2), endAngle:angle + theta - CGFloat(M_PI_2), clockwise:true)

            point = currentPoint // we don't have to calculate where the arc ended ... UIBezierPath did that for us
            angle += theta
        }

        close()
    }
}

using extension :

        firstImageView.makeHexagon()

and here's how i'm adding my shadow Effect on my ImageView :

     firstImageView.layer.contentsScale = UIScreen.main.scale;
    firstImageView.layer.shadowColor = UIColor.black.cgColor;
    firstImageView.layer.shadowOffset = CGSize.zero;
    firstImageView.layer.shadowRadius = 5.0;
    firstImageView.layer.shadowOpacity = 2;
    firstImageView.layer.masksToBounds = false;
    firstImageView.clipsToBounds = false;

anyone can point out my shadow is not visible after changing the shape of imageView ???

Answer 1

You have clipped your view to hexagon, so to display shadow you have to set shadow on ShapeLayer.

let border = CAShapeLayer()
border.path = path.cgPath
border.lineWidth = lineWidth
border.strokeColor = UIColor.black.cgColor
border.fillColor = UIColor.clear.cgColor
border.shadowColor = UIColor.red.cgColor;
border.shadowRadius = 5.0;
border.shadowOpacity = 2;