利用 UIBezierPath 設計特別形狀的圖片 — 自定義斜邊

自訂繼承 UIView 的類別

除了直接用UIBezierPath畫一個有斜邊的形狀貼在view上以外，還有一個自訂繼承 UIView 的類別的方法。

1. 建立一個UIView

建立一個UIVIew，因為要當作標題的底圖，所以取名為bannerView
設定背景顏色是帶透明的白色，貼在View上，View有預先設成想要的黃色，所以不用擔心完成後看不到bannerView。
UIVIew的寬度設定與螢幕同寬，高度隨意。

let bannerView = UIView(frame: CGRect(x: 0, y: 20, width: 415, height: 150))
bannerView.backgroundColor = UIColor(white: 1, alpha: 0.3)
view.addSubview(bannerView)

2. 在Xcode的上方menu點選file>new>file，選擇Cocoa Touch Class

建立Cocoa Touch Class後，Class(類別)欄位填寫SharpView
Subclass欄位填寫UIView，讓SharpView可以繼承UIView 的類別

3. 在自訂SharpView的類別下寫斜邊程式

設定路徑時想像要在UIView上畫什麼形狀，我想要畫長方形，並且其中一邊改斜邊。
開始畫之前，參照UIView的寬高去設定畫線的座標會比較好抓位置。
bounds指的是該view在本身座標系統的位置和尺寸 (參照點是本身座標系統)，所以下面是以UIView本身的寬高數值來設定畫線座標。

let rectPath = UIBezierPath()
//設計路徑
//從左上角(0,0)開始
rectPath.move(to: CGPoint.zero)
//從(0,0)畫線到(415,0)
rectPath.addLine(to: CGPoint(x: bounds.width, y: 0))
//從(415,0)畫線到(415,140)
rectPath.addLine(to: CGPoint(x: bounds.width, y: bounds.height))
//從(415,140)畫線到(0,140 * 0.7)
rectPath.addLine(to: CGPoint(x: 0, y: bounds.height * 0.85))
//從(0,140 * 0.7)畫直線回(0,0)
rectPath.close()
//顯示路徑
let rectLayer = CAShapeLayer()
rectLayer.path = rectPath.cgPath
layer.mask = rectLayer

4. 將UIView的類別改成自訂的SharpView類別

回到ViewController的頁面下，將bannerView的UIView類別改成SharpView

let bannerView = UIView(frame: CGRect(x: 0, y: 20, width: 415, height: 150))
bannerView.backgroundColor = UIColor(white: 1, alpha: 0.3)
view.addSubview(bannerView)

成品

看看小小兵後面那個白色透明的Banner!

至於如何用UIBezierPath繪製，包括小小兵是怎麼繪製的可以參考下面文章喔！

運用 UIBezierPath、CAShapeLayer 繪製小小兵

參考文章

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