如何向图像添加带有
cornerRadius
的边框。我收到一条弃用警告,说我应该使用 Rounded矩形形状,但我不知道如何准确使用它
测试版 4:
Image(uiImage: ...)
.border(Color.black, width: 2, cornerRadius: 10)
这是我们可以使用cornerRadius修改器(剪切视图)然后用颜色覆盖笔划的另一种方法。
VStack(spacing: 40) {
Text("Image Border").font(.largeTitle)
Text("Using cornerRadius & overlay").font(.title).foregroundColor(.gray)
Text("Using cornerRadius will also clip the image. Then overlay a border.")
.frame(minWidth: 0, maxWidth: .infinity)
.font(.title)
.padding()
.background(Color.orange)
.foregroundColor(.black)
Image("profile")
.clipShape(RoundedRectangle(cornerRadius: 10))
.overlay(RoundedRectangle(cornerRadius: 10)
.stroke(Color.orange, lineWidth: 4))
.shadow(radius: 10)
}
考虑一下:向视图添加修饰符将返回一个新的
View
实例,该实例包装了前一个实例。这也是添加修饰符的顺序很重要的原因。
我们可以利用这一点:通过添加填充,然后向新视图添加背景,我们可以创建自己的附加层:
Image("cat")
.cornerRadius(7) // Inner corner radius
.padding(5) // Width of the border
.background(Color.primary) // Color of the border
.cornerRadius(10) // Outer corner radius
结果:
您甚至可以将其放入 ViewModifier 中,以便更轻松地重用:
struct RoundedEdge: ViewModifier {
let width: CGFloat
let color: Color
let cornerRadius: CGFloat
func body(content: Content) -> some View {
content.cornerRadius(cornerRadius - width)
.padding(width)
.background(color)
.cornerRadius(cornerRadius)
}
}
使用它会变成:
Image("cat").modifier(RoundedEdge(width: 5, color: .black, cornerRadius: 20))
这适用于任何 SwiftUI 视图,例如
Text
:
Text("Some text")
.padding(15)
.background(Color.red)
.modifier(RoundedEdge(width: 5, color: .black, cornerRadius: 20))
结果:
首先,请注意您执行此操作的方式并不是剪切图像。也许您没有注意到图像是否太小,或者它的背景是否与画布颜色相同。但即使使用 beta 4 语法,您也需要添加
.clipShape()
。
回到你的问题,根据 Beta 5 发行说明:
背景的复杂重载(:对齐:)和 border(:width:) 修饰符已弃用。在 a 中使用形状 背景(:对齐:)或覆盖(:对齐:)来绘制这些 反而。 (53067530)
所以模式会是这样的:
.overlay(RoundedRectangle(...).stroke(...).foregroundColor(...))
根据您的具体情况:
Image("mypic").resizable().frame(width: 300, height: 300)
.clipShape(RoundedRectangle(cornerRadius: 30))
.overlay(RoundedRectangle(cornerRadius: 30).stroke(lineWidth: 2).foregroundColor(Color.black))
编写一个与图像视图相同的圆角文本视图
struct RoundedTextView: View {
var body: some View {
Text("Rounded Text View")
.frame(width: 200, height: 200, alignment: .center)
.foregroundColor(.white)
.background(Color.blue)
.cornerRadius(16)
.overlay(
RoundedRectangle(cornerRadius: 16).stroke(Color.yellow, lineWidth: 8)
)
}
}
像这样的图片预览:
我真的很喜欢 kontiki 的答案,但不喜欢它的长度,所以我写道:
import SwiftUI
func strokedRoundedRectangle(
cornerRadius r: CGFloat,
lineWidth w: CGFloat = 1,
color c: Color = .primary
) -> some View {
return RoundedRectangle(cornerRadius: r).stroke(lineWidth: w).foregroundColor(c)
}