iOS SwiftUI 中级之视图的剪裁效果《春泉洗药图》

iOS SwiftUI 中级之视图的剪裁效果《春泉洗药图》

最终效果

视图的剪裁效果

名画赏析

春泉洗药图

SwiftUI世界里万物皆视图，因此苹果为我们提供了多种方式来改变视图的形状。例如我们可以对视图进行剪切、遮罩、虚化和其他更为复杂的操作。下面我们就一起来学习一下吧

剪裁

有时我们可以frame修饰符来限制视图的大小，但必须允许视图可以缩放，frame才能生效。如果缩放后​​的图像大于提供的frame，则可造成超出该范围并与其他视图重叠。为了解决这个问题，SwiftUI允许我们将视图的内容剪切到其frame内。让我们看几个个简单的例子。

1. 剪裁掉多余部分

struct ContentView: View {
    var body: some View {
        VStack{
            Text("春泉洗药图")
                .font(.largeTitle)
            Image("chun_quan_xi_yao_tu12")
            .resizable()
                .aspectRatio(contentMode: .fill)
                .frame(height: 300)
        }
    }
}

效果

不使用clipped图像溢出

如上图所示，Image视图单独使用frame造成了溢出范围。下面我们添加clipped修饰符来解决这个问题。

struct ContentView: View {
    var body: some View {
        VStack{
            Text("春泉洗药图")
                .font(.largeTitle)
            Image("chun_quan_xi_yao_tu12")
                .resizable()
                .aspectRatio(contentMode: .fill)
                .frame(height: 300)
                .clipped(antialiased: true)
        }
    }
}

使用clipped对图像进行了裁剪

如您在上面的示例中看到的，我们使用了clipped修饰符。该修饰符使我们可以在其范围内剪切视图的内容。它还采用抗锯齿效果来平滑视图。

2. 按照形状裁剪