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 +代码+应用程序）：