#22 利用 UIBezierPath 設計特別形狀的圖片 — 比方斜邊 & 愛心

我們要用 UIBezierPath 來讓圖片不會侷限在只是呆板的矩形

方法 1 在 function viewDidLoad 裡設定 image view 的 mask

方法 2 自訂繼承 image view 的類別

1 在畫面上加入 顯示兔子圖片的 image view。

2 新增繼承 UIImageView 的 SharpImageView。

待會我們將把顯示兔兔圖片的 image view 的類別設為 SharpImageView，然後在 SharpImageView 裡寫程式製造斜邊效果。

新增檔案 File > New > File

選擇 iOS 下的 Cocoa Touch Class。

記得 Subclass of (父類別) 要設為 UIImageView。

可以看到多了一個 SharpImageView.swift 檔案

3 回到 storyboard，將 image view 的 Class(類別)設為 SharpImageView。

4 在 SharpImageView.swift 裡加入製造斜邊的程式碼。

定義 function layoutSubviews。

override func layoutSubviews() {
   super.layoutSubviews()
   let path = UIBezierPath()
   path.move(to: CGPoint.zero)
   path.addLine(to: CGPoint(x: bounds.width, y: 0))
   path.addLine(to: CGPoint(x: bounds.width, y: bounds.height))
   path.addLine(to: CGPoint(x: 0, y: bounds.height * 0.8))
   path.close()
   let shapeLayer = CAShapeLayer()
   shapeLayer.path = path.cgPath
   layer.mask = shapeLayer
}

我們利用 UIBezierPath 和 layer.mask 做出斜邊的圖片，相關說明可參考以下連結。

利用 UIBezierPath 設計特別形狀的圖片 — 比方斜邊 & 愛心

App 執行

必須要用模擬器編譯執行後才能看到斜邊，在 .storyboard 是看不到變化的

有了 SharpImageView，之後畫面上任何的圖片都可以加上斜邊效果，只要將 image view 的 class 設為 SharpImageView 即可。

如果一個App裡，想要應用不同的形狀，一個形狀就要新增一個 SharpImageView 的 .swif 檔，重複步驟 2的作法

版面配置

我畫了個版面配置的規劃圖，有時候思緒卡住，畫圖可以幫你釐清做法，而且也可以參考物件擺放的座標。

這個排版只有上下圖交界處需要斜邊，可以見下圖 A 分成三種外觀

• 第一種：圖 1 只有下方需要斜邊
• 第二種：圖 2 、3 上下都需要斜邊
• 第三種：圖 4 上方需要斜邊

其實做出 A 的樣子有很多做法，有些人會分成三個樣式的遮罩。

而因為這個外觀比較簡單，可以透過圖片的上下層級來遮住下方的圖片，達到一樣的效果

所以我是採用 B 這做法，只用一種遮罩，讓圖片互相交疊，交疊的範圍是斜邊的高度，然後 圖4 因為上方被 圖3 的斜邊遮住一部分，所以不需要做斜邊效果。

C 是把四張圖分開時看到的全貌。

PS. 用這個方法四張圖的高度是不一樣的，需要經過計算，讓表面看起來四張圖一樣高。

後圖壓前圖

再來見左邊的 imageView 列表，bunny 圖片排列越下面，會遮住上面的 bunny 圖

所以用這個圖片的層級方法只需要套用一個樣式

層級關係

點擊下方的 Debug View 可以看到版面的層級關係，bunny-1.jpg 最上面，bunny-4.jpg 在最底部

最終完成圖

GitHub 檔案

dearbunny/Rabbit-Encyclopedia

參考文章

利用 UIBezierPath 設計特別形狀的圖片 — 比方斜邊 & 愛心