CODEWITHSUNDEEP
swiftuibezierpathrounded-corners
Jefferson Setiawan
Jefferson Setiawan

Reputation: 536

How to remove arc border in shadowed UIView with rounded / arc path?

I have ticket View like this

TicketView.

My method is I have 2 view, 1 is the ticket itself, and other is for shadow. I have to do this because if I mask the view, it got clipped and the shadow will not appear in the ticket view.

here is the code for create the ticket view:

let shapeLayer = CAShapeLayer()
shapeLayer.frame = someView.bounds
shapeLayer.path = UIBezierPath(roundedRect: someView.bounds,
                               byRoundingCorners: [UIRectCorner.bottomLeft,UIRectCorner.bottomRight] ,
                               cornerRadii: CGSize(width: 5.0, height: 5.0)).cgPath


let rect = CGRect(x:0, y:0, width:200, height:100)
let cornerRadius:CGFloat = 5
let subPathSideSize:CGFloat = 25

let path = UIBezierPath(roundedRect: rect, cornerRadius: cornerRadius)
let leftSubPath = UIBezierPath(arcCenter: CGPoint(x: rect.width / 2, y: 0),
                               radius: subPathSideSize / 2, startAngle: .pi, endAngle: .pi * 0, clockwise: false)
leftSubPath.close()

let rightSubPath = UIBezierPath(arcCenter: CGPoint(x: rect.width / 2, y: rect.height),
                                radius: subPathSideSize / 2, startAngle: .pi, endAngle: .pi * 0, clockwise: true)
rightSubPath.close()

path.append(leftSubPath)
path.append(rightSubPath.reversing())

let mask = CAShapeLayer()
mask.frame = shapeLayer.bounds
mask.path = path.cgPath
someView.layer.mask = mask

Notes: SomeView is the TicketView.

And here is the code for adding shadow:

let shadowMask = CAShapeLayer()
shadowMask.frame = shadowView.bounds
shadowMask.path = path.cgPath
shadowMask.shadowOpacity = 0.2
shadowMask.shadowRadius = 4
shadowMask.masksToBounds = false
shadowMask.shadowOffset = CGSize(width: 0, height: 2)

shadowView.backgroundColor = UIColor.clear
shadowView.layer.addSublayer(shadowMask)

The shadow makes arc/rounded corner have border like this one (marked with circle red).

view with border on corner

Here is my Playground gist

Do you know how to remove the border in the rounded corner and arc path?

Thank you.

Upvotes: 2

Views: 921

Answers (2)

user11691268
user11691268

Reputation:

u need to add clipToBounds in this block that you have written.

let mask = CAShapeLayer()
mask.frame = shapeLayer.bounds
mask.path = path.cgPath
someView.clipsToBounds = true
someView.layer.mask = mask

Upvotes: 1

Jefferson Setiawan
Jefferson Setiawan

Reputation: 536

So I think there is different calculation for corner in mask and path. So I used fillColor of the shadowLayer to match the color of the CouponView. And now, the borders are gone.

shadowLayer.fillColor = someView.backgroundColor.cgColor

Upvotes: 0

Related Questions