Swift: Unentschieden Bild und Rand mit UIGraphicsBeginImageContextWithOptions

Question

Ich brauche ein Bild wie diese

zu zeichnen, was vorgesehen ist: grüne Blase mit Pfeil nach unten Bild (grüne Blase Bild bereits Grenze so muß ich nicht zeichnen es) und Foto in der Mitte. Und ich brauche um das Foto weißen Rand ziehen + abgerundete Ecke es Dies ist der Code habe ich bisher:

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(); 

und das ist das Ergebnis

Kann mir jemand helfen mit Dies? Gibt es sowieso, um diese Art von Bild aus xib-Datei zu entwerfen und zu erhalten?

Answer 1

Ich werde Ihnen die einfachste Art und Weise sagen:

1. Sie benötigen imageView1 für grüne Blase Bild, imageView2 für das Foto (Breite = Höhe). Ihre Zentren sind gleich.

2. Das imageView2 hat einen Eckenradius gleich der Rahmenbreite/2.

3. Setzen Sie die Rahmenfarbe der imageView2-Ebene auf Weiß, und die Rahmenbreite beträgt etwa 5 px. Vergessen Sie nicht, maskToBounds=true einzustellen.

Bitte versuchen Sie es.

---

DaijDjan: diese Antwort in einem Bild (zeigt IB + Code + app):