在 UIGraphicsImageRenderer 中添加 UIImage

Question

I'm beginner in Swift and I want to add an image to a custom path draw with UIGraphicsImageRenderer . I show you my code:

let size = CGSize(width:newWidth , height:height)
let f = UIGraphicsImageRendererFormat.default()
f.opaque = false
let r = UIGraphicsImageRenderer(size:size, format: f)
let im = r.image { _ in
    let leftUpPath = UIBezierPath()
    leftUpPath.move(to: CGPoint(x: 0, y: 0))
    leftUpPath.addArc(withCenter: CGPoint(x: cornerRadiusView, y: cornerRadiusView),
                      radius: cornerRadiusView,
                      startAngle: .pi * 3 / 2,
                      endAngle: .pi,
                      clockwise: false)
    leftUpPath.addLine(to: CGPoint(x: 0, y: height))
    leftUpPath.addLine(to: CGPoint(x: newWidth - cutPicture, y: height))
    leftUpPath.addLine(to: CGPoint(x: newWidth, y: 0))
    leftUpPath.addLine(to: CGPoint(x: cutPicture, y: 0))
    UIColor(rgb : 0xffffff).setFill()
    leftUpPath.fill()
}
let iv = UIImageView(image:im)
iv.frame.origin = CGPoint(x: 0, y: 0)
iv.clipsToBounds = true

let userPicture = UIImageView(image: picture)
userPicture.frame = iv.bounds
userPicture.clipsToBounds = true

iv.addSubview(userPicture)
cardView.addSubview(iv)

My custom path work well but when I add the userPicture the image take not the bounds of the path...

This is what I have:

and this is what I want:

(replace the white background by the cat picture):

What am I doing wrong?

Answer 1

I solved my question with another solution (add the path to a shapeLayer and it to the mask of a UIImageView ):

    let path = UIBezierPath()
    path.move(to: CGPoint(x: 0, y: 0))
    path.addArc(withCenter: CGPoint(x: cornerRadiusView, y: cornerRadiusView),
                radius: cornerRadiusView,
                startAngle: .pi * 3 / 2,
                endAngle: .pi,
                clockwise: false)
    path.addLine(to: CGPoint(x: 0, y: height))
    path.addLine(to: CGPoint(x: newWidth - cutPicture, y: height))
    path.addLine(to: CGPoint(x: newWidth, y: 0))
    path.addLine(to: CGPoint(x: cutPicture, y: 0))
    path.close()

    let shapeLayer = CAShapeLayer()
    shapeLayer.frame = customShape.bounds
    shapeLayer.path = path.cgPath
    shapeLayer.fillColor = UIColor.red.cgColor
    customShape.layer.mask = shapeLayer;
    customShape.layer.masksToBounds = true;
    customShape.image = userPicture
    customShape.contentMode = .scaleAspectFill

final :

Answer 2

A subview's content always appears on top of the content of all of its ancestors. You make userPicture a subview of iv , so userPicture 's content appears on top of iv 's content. The content of userPicture is the cat picture. The content of iv is the purple frame. So the cat picture appears on top of the purple frame.

Instead, make userPicture the superview, and add a frameView subview to it containing the purple frame.