Маскировка представлений в SwiftUI

74
Маскировка представлений в SwiftUI
Маскировка представлений в SwiftUI

Модификатор Mask в SwiftUI дает нам возможность маскировать одно представление другим. Начнем с простого примера.

Создадим прямоугольник размером 200×200 и зальем его оранжевым цветом.

Rectangle()
  .fill(Color.orange)
  .frame(width: 200, height: 200)

Мы добавим оверлей с видом текста DevTechie с крупным шрифтом:

Rectangle()
  .fill(Color.orange)
  .frame(width: 200, height: 200)
  .overlay(Text("DevTechie").font(.largeTitle))

Далее мы замаскируем этот прямоугольник, чтобы вырезать форму сердца. Для этого добавим модификатор маски и в качестве содержимого маски добавим изображение сердца:

Rectangle()
  .fill(Color.orange)
  .frame(width: 200, height: 200)
  .overlay(Text("DevTechie").font(.largeTitle))
  .mask {
      Image(systemName: "heart.fill")
          .resizable()
          .frame(width: 200, height: 200)
  }

И вот как мы маскируем с помощью модификатора маски.

маскируем с помощью модификатора маски
маскируем с помощью модификатора маски

С помощью модификатора маски мы можем создать несколько действительно креативных представлений текста.

Например, мы можем отобразить изображение сети и замаскировать его текстом DevTechie, как показано ниже:

struct MaskingExample: View {
    
    var body: some View {
        AsyncImage(url: URL(string: "https://images.unsplash.com/photo-1648650571468-501c7dad85f2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1287&q=80")!, scale: 1.0) { image in
            image
                .resizable()
                .scaledToFit()
        } placeholder: { 
            RoundedRectangle(cornerRadius: 10)
        }.mask { 
            Text("DevTechie")
                .font(.custom("Avnair", size: 64))
        }
    }
}

Ниже наш результат:

Маскировка представлений в SwiftUI