Created: November 23, 2022 3:22 PM Tags: #linkedin, #swift, #work
On one of my projects I had to use complex image masks that looked like this:
And there were many such templates and we were getting them from a remote server, but we didn't have the ability to process the images to the necessary there.
So I did some research on how this could be done using SwiftUI and I found an elegant solution.
We will need two Images. The first is for the image, and the second is for the mask. Then we need to wrap them in a ZStack, which should be set to .compositingGroup(), and the mask image should be set to .blendMode(.screen). This way we get our original image to be cropped by the mask.
There is a second, but the more complicated solution, which requires working with Shape. In this case, we can directly apply any Shape as a mask to the Image.
//
// ExampleMaskView.swift
// ExampleMask
//
// Created by Artem Tischenko on 23/11/2022.
//
import SwiftUI
fileprivate enum Images {
static let image = "example_image"
static let mask = "example_mask"
}
struct ExampleMaskView: View {
var body: some View {
VStack {
group
mask
}
}
fileprivate var group: some View {
ZStack {
Image(Images.image)
.resizable()
.scaledToFit()
.cornerRadius(26)
Image(Images.mask)
.resizable()
.scaledToFit()
.blendMode(.screen)
.cornerRadius(26)
}
.compositingGroup()
}
fileprivate var mask: some View {
Image(Images.image)
.resizable()
.scaledToFit()
.cornerRadius(26)
.mask {
Circle()
.frame(width: 204)
}
}
}
struct ExampleMaskView_Previews: PreviewProvider {
static var previews: some View {
ExampleMaskView()
}
}
Thanks for reading.