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层的边框颜色设置为白色，边框宽度约为5px。不要忘记设置 maskToBounds=true。

请尝试。

---

DaijDjan:一张图片中的答案(显示 IB + 代码 + 应用程序):