[Swift UI]一、基础控件-(16)如何给图像视图添加遮罩以突出主题

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
➤微信公众号：山青咏芝（let_us_code）
➤博客园地址：山青咏芝（https://www.cnblogs.com/strengthen/）
➤GitHub地址：https://github.com/strengthen/LeetCode
➤原文地址： https://www.cnblogs.com/strengthen/p/12266838.html
➤原文已修改更新！强烈建议点击原文地址阅读！支持作者！支持原创！
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★

热烈欢迎，请直接点击！！！

进入博主App Store主页，下载使用各个作品！！！

注：博主将坚持每月上线一个新app！！！

本文演示如何给图像添加遮罩，

使用遮罩可以突出显示图片的主题内容，

将在第四章利用遮罩制作非常漂亮的动画。

import SwiftUI

struct ContentView : View
{
    var body: some View
    {
        VStack
        {
            //添加一个图像视图，显示项目中的一张图片素材。
            Image("girlPicture")
                //方法一：两种方法都产生了相同的遮罩效果。
                //通过调用裁剪图形的方法，给图像应用遮罩效果。遮罩图形为圆形。
                .clipShape(Circle())
            
            //添加一个图像视图，显示项目中的一张图片素材。
            Image("girlPicture")
                //方法二：两种方法都产生了相同的遮罩效果。
                //通过调用遮罩方法，给图像应用遮罩效果，遮罩图形为圆形。
                .mask(Circle())
            
            //添加一个图像视图，给彩虹图片添加遮罩效果，遮罩的形状为一串文字。
            Image("gradientImage")
                //图像视图自动适应大小
                .resizable()
                //设置宽度和高度都是300
                .frame(width: 300, height: 300)
                //最后给它添加一个指定内容文字的遮罩。
                .mask(
                    //文字的尺寸为64，并具有加粗效果。
                    Text("SWIFT UI!").font(Font.system(size: 64).bold()
                ))
        }
    }
}

#if DEBUG
struct ContentView_Previews : PreviewProvider {
    
    @State var txtFieldValue : String
    
    static var previews: some View {
        ContentView()
    }
}
#endif