Swift|24 利用 mask 設計特別形狀的圖片及影片

練習：image view 的 mask，
用下面兩張圖片來融合成在攝影機裡播放鬥陣俱樂部

先在preview app裡做去背，留下攝影機的黑色區塊

如何用 Preview App (預覽程式)去背圖片

把圖片加入Playground裡

把素材從Finder拖放到Resources底下

打上程式碼

import UIKit

1. 加入 UIKit這個函式庫，因為我們要使用UI 相關的程式，例如UIImage 和 UIImageView 。

let fightclubImage = UIImage(named: "fight club.jpeg")
let fightclubImageView = UIImageView(image: fightclubImage)
let cinemaImage = UIImage(named: "cinema.png")
let cinemaImageView = UIImageView(image: cinemaImage)

2. 產生顯示fight club和攝影機的image view

fightclubImageView.mask = cinemaImageView

3. 設定鬥陣俱樂部的mask是攝影機圖案

結果

用 SF Symbols 的 image view 當 mask

SF Symbols

let fightclubImage = UIImage(named: "fight club.jpeg")
let fightclubImageView = UIImageView(image: fightclubImage)
fightclubImageView.frame = CGRect(x: 0, y: 0, width: 750, height: 500)
let tvImageView = UIImageView(image: UIImage(systemName: "tv.inset.filled"))
tvImageView.frame = fightclubImageView.frame
fightclubImageView.mask = tvImageView

結果

用label來做mask

import UIKit
let fightclubImage = UIImage(named: "fight club.jpeg")
let fightclubImageView = UIImageView(image: fightclubImage)
let label = UILabel(frame: fightclubImageView.frame)
label.text = "$"
label.font = UIFont.systemFont(ofSize: 600)
label.textAlignment = NSTextAlignment.center
fightclubImageView.mask = label

結果

漸層mask

import UIKit
let fightclubImage = UIImage(named: "fight club.jpeg")
let fightclubImageView = UIImageView(image: fightclubImage)
let gradietLayer = CAGradientLayer()
gradietLayer.frame = fightclubImageView.bounds
gradietLayer.colors = [CGColor(red: 1, green: 1, blue: 1, alpha: 0), CGColor(red: 1, green: 1, blue: 1, alpha: 1)]
gradietLayer.startPoint = CGPoint(x: 0, y: 0)
gradietLayer.endPoint = CGPoint(x: 0, y: 1)
fightclubImageView.layer.mask = gradietLayer
fightclubImageView

結果

利用mask 改變圖片的顏色

為圖片加一點藍綠色

import UIKit
let fightclubImage = UIImage(named: "fight club.jpeg")
let fightclubImageView = UIImageView(image: fightclubImage)
let cinemaImage = UIImage(named: "cinema.png")
let cinemaImageView1 = UIImageView(image: cinemaImage)
fightclubImageView.mask = cinemaImageView1
let blueView = UIView(frame: fightclubImageView.frame)
blueView.backgroundColor = UIColor(red: 0, green: 0.5, blue: 1, alpha: 0.5)
let cinemaImageView2 = UIImageView(image: cinemaImage)
blueView.mask = cinemaImageView2
fightclubImageView.addSubview(blueView)

結果

練習用AVPlayerLayer 的 mask 播放預告

import UIKit
import AVFoundation
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
//加入攝影機圖片
let cinemaImage = UIImage(named: "cinema.png")
let cinemaImageView = UIImageView(image: cinemaImage)
//設定攝影機圖片大小
cinemaImageView.frame.size = CGSize(width: 800, height: 425)
//設定影像的位置和大小
let videoView = UIView(frame: CGRect(origin: CGPoint(x: -10, y: -25), size: cinemaImageView.frame.size))
//videoView用來裝呈現影片的layer，cinemaImageView會當作videoView的mask
view.addSubview(videoView)
//加入影片的URL
let url = URL(string: "http://movietrailers.apple.com/movies/wb/madmaxfuryroad/madmax-tlr3_h1080p.mov")
let player = AVPlayer(url: url!)
//顯示到畫面上需要型別AVPlayerLayer的playerLayer
//如果只有player，我們只能聽到聲音
let playerLayer = AVPlayerLayer(player: player)
playerLayer.frame = CGRect(origin: .zero, size: cinemaImageView.frame.size)
//.resizeAspectFill讓影片佔滿playerLayer的長方形框框
playerLayer.videoGravity = .resizeAspectFill
//將顯示影片的playerLayer加到videoView上
videoView.layer.addSublayer(playerLayer)
//videoView原本是長方形，透過設定mask為cinemaImageView，讓videoView切成攝影機形狀
videoView.mask = cinemaImageView
//播放
player.play()
}
}

預告影片網址取得url

在想要的畫質按右鍵，選Copy Link Address

Mad Max: Fury Road

結果

參考

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

作業#13 利用mask設計特別形狀的圖片＆影片

GitHub

https://github.com/ting3242006/mask-on-video