Swift: Жеребьевка изображения и границы с помощью UIGraphicsBeginImageContextWithOptions

Question

мне нужно нарисовать изображение как этот

Что предоставленная: зеленый пузырь со стрелкой вниз изображение (зеленый пузырь изображение уже есть границы, так что я не нужно рисовать это) и фото центра. И мне нужно, чтобы нарисовать белую рамку вокруг фотографии + закругленным углом так ли Это код, который я до сих пор:

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

и это результат

Может кто-нибудь помочь мне с это? Есть ли вообще дизайн и получение этого типа изображения из файла xib?

Answer 1

Я расскажу вам самый простой способ:

1. Вам нужны imageView1 для зеленых пузыря изображений, imageView2 для фото (ширина = высота). Их центры одинаковы.

2. ImageView2 имеет угловой радиус, равный ширине рамы/2.

3. Установить границы цвета слоя imageView2 на белый, а ширина границы - около 5 пикселей. Не забудьте установить maskToBounds=true.

Попробуйте.

---

DaijDjan: этот ответ в одном изображении (показывая IB + код + приложение):