1

I'm trying to make a rectangle mask with rounded corners which also would have a gradient (or inner shadow)

class RoundRectLayer : CALayer {

    var rect : CGRect = .zero

    override func draw(in ctx: CGContext) {
        ctx.saveGState()
        var path = CGPath(roundedRect: rect,
                          cornerWidth: rect.size.width / 10,
                          cornerHeight: rect.size.height / 10,
                          transform: nil)
        ctx.addPath(path)
        ctx.setFillColor(UIColor.clear.cgColor)
        ctx.fillPath()
        path = path.copy(strokingWithWidth: 4.0,
                         lineCap: CGLineCap.butt,
                         lineJoin: CGLineJoin.bevel,
                         miterLimit: 0)

        ctx.addPath(path)
        let colors = [
            UIColor.yellow.cgColor,
            UIColor.red.cgColor
        ]
        ctx.fillPath()
        ctx.restoreGState()
    }
}

This is where I got so far, just a rounded rect. Radial and Linear gradients seem to be not the ones I expected.

Picture for reference (just a clear color instead of a white in the middle) enter image description here

EDIT:

Okay, so I'm still having trouble with it. ACInnerShadowLayer from Inner shadow effect on UIView layer? got the effect I want, just there's a small issue. I would also like to have the same color background as that shadows. And now I only have that square in the middle and clear background

HelloimDarius
  • 695
  • 5
  • 23
  • Unclear what result you want. What’s wrong with the result you are getting? – matt Aug 21 '18 at 13:38
  • @matt not sure how to explain. Well line gradient is just from one point to other, radial also goes from one point. And this gradient right here is more like inner shadow that goes around the border – HelloimDarius Aug 21 '18 at 14:59
  • Well, if you can’t say what you want, no one can say how to get it. You said “I'm trying to make a rectangle mask with rounded corners which also would have a gradient (or inner shadow)” and it looks to me like that’s exactly what you’ve got in your picture. What’s the problem? – matt Aug 21 '18 at 15:06
  • @matt picture is what I'm trying to achieve – HelloimDarius Aug 21 '18 at 15:17
  • Ah. Well, I had an answer that describes how to do that, but someone downvoted it just today, so I deleted it. – matt Aug 21 '18 at 15:25
  • However, I would point out that your code has no gradient and no mask so it’s not surprising if you don’t get a gradient mask. – matt Aug 21 '18 at 15:27
  • This might help: https://stackoverflow.com/questions/42011737/create-a-radial-gradient-mask-to-create-a-hole-in-the-picture – matt Aug 21 '18 at 15:39
  • Or this https://stackoverflow.com/questions/41093305/swift-3-how-to-create-blurred-side-edges-corners-of-a-uiimageview – matt Aug 21 '18 at 15:43
  • Or this https://stackoverflow.com/questions/46249409/how-to-cut-out-a-hole-with-radial-gradient-in-view – matt Aug 21 '18 at 15:43

0 Answers0