[SwiftUI] mask versus addSubview

This article is to compare the effects by mask versus addSubview. Let me show you my favorite work from this practice

Step 1: import one silhouette image and one signature pattern image

(Left: signature pattern; rigt: silhouette image)

Step 2: Use ‘Preview ’ to remove the body or background color

Step 3: Process the images by SwiftUI

Step 3–1: on top of grey block

// introduce an grey block
let rect = CGRect(x: 50, y: 220, width: 300, height: 200)
let myImage = UIView(frame: rect)
myImage.backgroundColor = UIColor(displayP3Red: 0, green: 0, blue: 0, alpha: 0.5)
// using removed background color
let mosImage = UIImage(named: "mos.png")
let mosImageView = UIImageView(image: mosImage)
// using removed body color
let silhouetteImage = UIImage(named: "mosque.png")
let silhouetteImageView = UIImageView(image: silhouetteImage)
// removed body color + black background + mask
myImage.mask = silhouetteImageView
// removed body color+ black background + addSubview
myImage.addSubview(silhouetteImageView)
//removed background color + pattern + mask
myImage.mask = mosImageView
// removed background color + pattern + addSubview
myImage.addSubview(mosImageView)

Step 3–2: on top of signature pattern

// signature pattern
let gridImage = UIImage(named: "pattern")
var gridImageView = UIImageView(frame: rect)
gridImageView = UIImageView(image: gridImage)
// removed body color + + pattern + mask
gridImageView.mask = silhouetteImageView
// removed body color+ pattern + addSubview
gridImageView.frame = silhouetteImageView.frame
gridImageView.addSubview(silhouetteImageView)
// remove background color+ mask
gridImageView.mask = mosImageView
// remove background + addSubview
gridImageView.frame = mosImageView.frame
gridImageView.addSubview(mosImageView)

My findings:

1. mask: the siganature pattern will overwrite the solid region
2. addSubView: the signature pattern will appear in the removed background region.
3. We have two approaches to substitute the skin colors of silhouette.

Attached the codes.

twber/silhouette