如何在 SwiftUI 中屏蔽/剪辑图像的底部？

Posted 2023-02-24

【中文标题】如何在 SwiftUI 中屏蔽/剪辑图像的底部？

【英文标题】：How to mask/clip the bottom part of an Image in SwiftUI?

【发布时间】：2019-07-23 08:37:22

【问题描述】：

目前在 SwiftUI 中屏蔽图像似乎非常简单，可以使用以下方法实现：

.clipShape(RoundedRectangle(cornerRadius:20,
                                        style: .continuous))

甚至.mask()。有没有办法通过指定.center、.bottom、.etc 来控制图像的哪一部分被屏蔽？到目前为止，我一直在使用偏移量，但我想知道是否有更简单的方法。

【参考方案1】：

.clipShape() 需要一个形状，所以如果您要经常剪裁底部，您可以创建一个临时形状。像这样的：

import SwiftUI

struct ContentView: View 
    var body: some View 
        Image("mypic")
            .aspectRatio(contentMode: .fit)
            .clipShape(BottomClipper(bottom: 100))
    


struct BottomClipper: Shape 
    let bottom: CGFloat

    func path(in rect: CGRect) -> Path 
        Rectangle().path(in: CGRect(x: 0, y: rect.size.height - bottom, width: rect.size.width, height: bottom))
    

【参考方案2】：

斯威夫特 1.0

您可以将填充与形状结合使用。这可能是您正在寻找的更简单的方法？

Image("profile")
    // Add padding to sides of the shape to control what is masked
    .mask(Rectangle().padding(.bottom, 20))
    .border(Color.orange)

（摘自《SwiftUI 视图》一书）