SwiftUI 菜单中的圆形图像

Question

每次我将

Image

作为 SwiftUI 中的

Menu

内容时，我无法将其边缘变圆或剪裁其形状。我希望显示的图像是圆形的。

当然，我已经尝试过

.cornerRadius()

和

.clipShape(Circle())

。最小的例子：

Menu("Ben") {
  Toggle(isOn: .constant(true)) {
    Label {
      Text("Ben")
    } icon: {
      Image("blueGradient")
        .resizable()
        .clipShape(Circle())
    }
  }
}

Answer 1

如果您不想将图像的圆形版本添加到资产目录中，那么您可以随时将它们转换为圆形图像。使用绘图指令的

Image

initializer 使这成为可能：

let roundImageSize: CGFloat = 72

private func roundImage(name: String) -> Image {
    let size = CGSize(width: roundImageSize, height: roundImageSize)
    return Image(size: size) { ctx in
        let sourceImage = Image(name)
        let resolvedImage = ctx.resolve(sourceImage)
        ctx.clip(to: Path(ellipseIn: CGRect(origin: .zero, size: size)))
        ctx.draw(resolvedImage, in: CGRect(origin: .zero, size: size))
    }
}

var body: some View {
    Menu("Ben") {
        Toggle(isOn: .constant(true)) {
            Label {
                Text("Ben")
            } icon: {
                roundImage(name: "blueGradient")
            }
        }
    }
}

Answer 2

您应该在将其用作Image之前遮盖图像。 您可以通过如下简单的扩展从

UIImage

获得帮助：

extension UIImage {
    var rounded: UIImage? {
        UIGraphicsBeginImageContextWithOptions(size, false, UIScreen.main.scale)
        defer { UIGraphicsEndImageContext() }
        let bounds = CGRect(origin: .zero, size: size)
        UIBezierPath(roundedRect: bounds, cornerRadius: size.height/2.0).addClip()
        draw(in: bounds)
        return UIGraphicsGetImageFromCurrentImageContext()
    }
}

然后像这样使用它：

Image(uiImage: UIImage(named: "blueGradient").rounded!)