How to crop Image as per the top front image?

Question

My purpose is to export UIImage from the UIView. so I want to add clear border over red circle so the output image looks like 2nd image.

Now I want something like that: I want to add clear background over the red circle so the output image look something like below image. (I know if I add clear border then I can't achieve this so please suggest me to achieve this)

Here I have just added only color, This 2 color are actually images

Edit

I'm able to do this by using the below code but the cutting area is not rounding.

func cut(hole: CGRect, inView v: UIView) {
    let p:CGMutablePath = CGMutablePath()
    p.addRect(CGRect.init(x: v.frame.origin.x, y: v.frame.origin.y, width: v.frame.width, height: v.frame.height))
    p.addRect(hole)

    let s = CAShapeLayer()
    s.path = p
    s.fillRule = CAShapeLayerFillRule.evenOdd

    v.layer.mask = s
}

Here is my Demo Link: https://gofile.io/?c=jukO6B

Current Output

Any help will be appreciated to do this.

yes, but Ethan Hunt image will not be cut at the same frame where car white background is there. please review my updated question. — Kuldeep, Oct 14 '19 at 10:27
@HarvantS.Choudhary, no, I wasn't using any code to do that, I want to do this by UIView hierarchy inside UIStoryBoard. — Kuldeep, Oct 14 '19 at 10:31
you are using too many views to do it, you should do it by code, you can't make image round without `layer` property of view object and its not a trick, its straight forward to round an image. — Blind Ninja, Oct 14 '19 at 10:36
one more thing - is size of Ethan Hunt's image is fixed or it vary with device ? — Blind Ninja, Oct 14 '19 at 10:40
you are already o half way, as i said in answer, three circle's, one user, one border and third one is badge, badge and border share same centre, border will be slightly bigger than badge and gonna mask user. so final result would be user masked with border and badge at corner. — Blind Ninja, Oct 15 '19 at 06:34
@HarvantS.Choudhary, If I add the border with any color except then CLEAR color then only it works. if I add CLEAR border over red circle then it wan't works. — Kuldeep, Oct 15 '19 at 06:37
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/200881/discussion-between-harvant-s-choudhary-and-kuldeep). — Blind Ninja, Oct 15 '19 at 06:37

score 1 · Accepted Answer · answered Oct 15 '19 at 10:37

Finally I got the solution by making some modification in this answer as per the requirement: How can I 'cut' a transparent hole in a UIImage?

func cut(hole: CGRect, inView v: UIView) {
    let p:CGMutablePath = CGMutablePath()
    v.clipsToBounds = false
    p.addRect(CGRect.init(x: v.frame.origin.x, y: v.frame.origin.y, width: v.frame.width, height: v.frame.height))
    p.addRoundedRect(in: CGRect.init(x: self.vwCarContainer.frame.origin.x, y: self.vwCarContainer.frame.origin.y, width: self.vwCarContainer.frame.width, height: self.vwCarContainer.frame.height), cornerWidth: self.vwCarContainer.layer.cornerRadius, cornerHeight: self.vwCarContainer.layer.cornerRadius)

    let s = CAShapeLayer()
    s.path = p
    s.fillRule = CAShapeLayerFillRule.evenOdd

    v.layer.mask = s
}

Thanks to all who help me to achieve this.

Blind Ninja · Answer 2 · 2019-10-14T12:57:05.710

0

Edit - It turned out OP needed a completely different effect than what he initially showed us.

Here is my suggestion to him -

clip-masking uiview with CAShapeLayer and UIBezierPath

You have to do something like this, create three view, one user's image, second badge's image and third for transparent border which gonna mask users's image. both badge's image and its border must share same centre point.

You need to change layer property of UIView. You have to provide user defined properties of view's layer -

Key Path: layer.cornerRadius, Type: Number, Value: (whatever radius you want)
Key Path: layer.masksToBounds, Type: Boolean, Value: checked

As you said you want to do it with storyboard so here an example of it -

Set background color 'clear' of both views, you are good to go.

P.S. in example sizes of both views are fixed, if your view have dynamic sized (or adaptive size), you should do round your views by code.

edited Oct 14 '19 at 12:57

answered Oct 14 '19 at 10:55

Blind Ninja

1,063
13
28

I think you don't understood my question properly or I was unable to express it. let me update my question – Kuldeep Oct 14 '19 at 11:04
please check updated answer. it wasn't complete earlier. – Blind Ninja Oct 14 '19 at 11:05
as I can see in your attached screen, I know it to do this thing but I don't want to do this – Kuldeep Oct 14 '19 at 11:10
okay then I really don't understand what you are asking, explain a bit. – Blind Ninja Oct 14 '19 at 11:12
review my edited question. I attached the output image. – Kuldeep Oct 14 '19 at 11:14
okay so you don't want extra while color around ethan and car's image ? and no extra padding ? – Blind Ninja Oct 14 '19 at 11:14
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/200814/discussion-between-harvant-s-choudhary-and-kuldeep). – Blind Ninja Oct 14 '19 at 11:15

How to crop Image as per the top front image?

Edit

2 Answers2