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

這篇文章主要是練習使用UIView之間可以使用Mask來做”遮罩“，所以同樣看著範例就可以學習到如何使用，當然首先要先找到素材或者已去背的圖片。

教學範例

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

找尋要顯示的圖片

先找好要拿來顯示的圖片（非遮罩），然後擺好在畫面(storyboard)，如下畫面。

這次找了12張來做替換

找尋遮罩的圖樣

一般來說就是找去背後的圖樣，若是找不到的，可以先以下面網站下載為主。

Free vector silhouettes | silhouetteAC

有許多的圖片素材提供下載

點選圖片後可以在右手邊看到許多檔案格式，建議可以直接使用PNG

匯入Assets.xcassets

將圖片素材和遮罩的圖同時都匯入Assets.xcassets

建置storyboard

(一)將花色的圖片使用UIButton來顯示，並各自設定其1~12的Image

(二)於上方放置一個空的ImageView，之後透過第一點的Button來設定圖片

將按鈕連結至ViewController.swift(IBAction)

先將一個按鈕新增連結Connection至ViewController.swift，然後指定type為UIButton，並指定func名稱為setMask以方便在程式當中取得按鈕物件。

@IBAction func setMask(_ sender: UIButton) {

}

將ImageView連結至ViewController.swift(Outlet)

@IBOutlet weak var maskImage: UIImageView!

針對按鈕事件將圖片顯示於畫面上ImageView

maskImage.image = sender.currentImage

執行後可以看到按鈕點下後，ImageView就會被指定按鈕的圖

加入Mask

//讀取遮罩圖片

let dogImage = UIImage(named: “dog_mask”)

//將圖片加入至一個ImageView

let dogImageView = UIImageView(image: dogImage)

//將dogImageView跟ImageView大小設定成一樣

dogImageView.frame = CGRect(x: 0, y: 0, width: 414, height: 495)

//將畫面上的ImageView加入遮罩，指定為dogImageView

maskImage.mask = dogImageView

成果分享

GitHub

wayne97023/maskImage