#13 利用 mask 設計特別形狀的圖片

一個圖層堆疊的概念

概念：使用mask將剪影的實體部分“罩”到另一張圖片上，於是會變成好像剪影裡面有照片的覺

1. 選好兩張圖片（建議找大小差不多的，比較好疊）

ps.其實當作mask的圖不一定要剪影，但最後只剩外框，用剪影會比較好想像。

完成圖

2. 準備好在playground的圖片們，拖拉至Resources

3. 撰寫 Swift 程式

加入工具

import UIKit

將圖片弄成UIImageView（可以顯示）

let coralImage = UIImage(named: “coral reef.jpg”)
let coralImageView = UIImageView(image: coralImage)
let mantaImage = UIImage(named: “manta.png”)
let mantaImageView = UIImageView(image: mantaImage)

加入mask（注意兩邊都是UIImageView）

完成！

coralImageView.mask = mantaImageView

還可以疊別的東西：

1. 疊表情符號（mask）

import UIKit
let coralImage = UIImage(named: “coral reef.jpg”)
let coralImageView = UIImageView(image: coralImage)
let mantaImage = UIImage(named: “manta.png”)
let mantaImageView = UIImageView(image: mantaImage)
let label = UILabel(frame: coralImageView.frame)
label.text = “▲”
label.font = UIFont.systemFont(ofSize: 800)
label.textAlignment = NSTextAlignment.right
coralImageView.mask = label

2. 疊一層神秘的顏色

前面都一樣喔！

import UIKit
let coralImage = UIImage(named: “coral reef.jpg”)
let coralImageView = UIImageView(image: coralImage)
let mantaImage = UIImage(named: “manta.png”)
let mantaImageView = UIImageView(image: mantaImage)

自己設定想要的顏色，疊上去

let colorView = UIView(frame: coralImageView.frame)
colorView.backgroundColor = UIColor(red: 0, green: 0.8, blue: 0.5, alpha: 0.3)
let mantaImageView2 = UIImageView(image: mantaImage)
colorView.mask = mantaImageView2
coralImageView.addSubview(colorView)

恩…原來髒髒的水就是這個綠

3. 同時疊兩張圖（就是弄出背景和兩張圖，三張圖疊起來）

import UIKit
let coralImage = UIImage(named: “coral reef.jpg”)
let coralImageView = UIImageView(image: coralImage)
let mantaImage = UIImage(named: “manta.png”)
let mantaImageView = UIImageView(image: mantaImage)

coralImageView.alpha = 0.6
let trashImage = UIImage(named: “plastic trash.jpg”)
let trashImageView = UIImageView(image: trashImage)
trashImageView.alpha = 0.4
let mantaImageView3 = UIImageView(image: mantaImage)
trashImageView.mask = mantaImageView3
let backgroundView = UIView(frame: coralImageView.frame)
backgroundView.addSubview(coralImageView)
backgroundView.addSubview(trashImageView)

以下參考網址：

利用 mask 設計特別形狀的圖片