Swift: tirage d'image et à la frontière en utilisant UIGraphicsBeginImageContextWithOptions

Question

je dois dessiner une image comme celui-ci

ce qui est prévu est: bulle verte avec l'image flèche vers le bas (image bulle verte ont déjà la frontière, donc je ne dois pas dessiner it) et la photo du centre. Et je dois dessiner liseré blanc autour de la photo + coin arrondi il C'est le code que j'ai jusqu'à présent:

let rect = CGRect(origin: .zero, size: CGSize(width: 60, height: 67)) 
    let width = CGFloat(50) 
    let borderWidth: CGFloat = 1.0 

    let imageRect = CGRect(x: 5, y: 5, width: width, height: width) 
    let bubbleImg = #imageLiteral(resourceName: "pinGreen") 

    UIGraphicsBeginImageContextWithOptions(rect.size, false, 0.0) 

    let context = UIGraphicsGetCurrentContext() 

    bubbleImg.draw(in: rect) 

    let path = UIBezierPath(roundedRect: imageRect.insetBy(dx: borderWidth/2, dy: borderWidth/2), cornerRadius: width/2) 
    context!.saveGState() 
    path.addClip() 

    image.draw(in: imageRect) 
    context!.restoreGState() 

    UIColor.purple.setStroke() 
    path.lineWidth = borderWidth 
    path.stroke() 

    let roundedImage = UIGraphicsGetImageFromCurrentImageContext(); 
    let img = roundedImage?.cgImage! 
    UIGraphicsEndImageContext(); 

et c'est le résultat

Quelqu'un peut-il me aider ce? Y at-il de toute façon concevoir et obtenir ce type d'image à partir du fichier xib?

Answer 1

Je vais vous dire la façon la plus simple:

1. Vous avez besoin pour imageView1 image bulle verte, imageView2 pour la photo (width = hauteur). Leurs centres sont les mêmes.

2. L'imageView2 a un rayon de coin égal à sa largeur de trame/2.

3. Définissez la couleur de la bordure du calque imageView2 sur Blanc et la largeur de la bordure est d'environ 5 px. Ne pas oublier de mettre maskToBounds=true.

Veuillez essayer.

---

DaijDjan: cette réponse dans une image (montrant le code IB + + app):