利用 UIBezierPath 設計特別形狀的圖片 — 比方斜邊 & 愛心
彼得潘看到同學做的玩具總動員 App 十分可愛，App 裡的圖片加了斜邊，粉紅豬變得格外有時尚感。
其實只要撰寫一點點 Swift 程式我們即可創作任意形狀的圖片，接下來就讓我們一步步做出斜邊的彼得潘吧。
1 在畫面上加入 顯示彼得潘的圖片的 image view。
2 新增繼承 UIImageView 的 SharpImageView。
待會我們將把顯示彼得潘圖片的 image view 的類別設為 SharpImageView，然後在 SharpImageView 裡寫程式製造斜邊效果。
點選 File > New > File from Template。
選擇 iOS 下的 Cocoa Touch Class。
記得 Subclass of (父類別) 要設為 UIImageView。
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 和 CAShapeLayer 做出斜邊的形狀，相關說明可參考以下連結。
我們必須知道 image view 的大小才能準確畫出斜邊的形狀，所以我們將程式寫在 layoutSubviews 裡。為什麼要寫在 layoutSubviews 裡呢 ? 這和 Auto Layout 有關。還不會 Auto Layout 的朋友可等學會 Auto Layout 後再來閱讀以下的說明。
layoutSubviews() 是 UIView 的 function，當它執行時，它會依據 auto layout 的 constraint 排版 subviews。當我們在 function layoutSubviews 的 super.layoutSubviews() 後寫程式時，此時元件自己和它的 subviews 都已依 auto layout 的 constraint 得到位置大小，因此我們可從 bounds.height & bounds.width 取得圖片的寬高。
最後的 layer.mask = shapeLayer 則會實現遮罩的效果，將 SharpImageView 裁切成 shapeLayer 的形狀。
App 執行
有了 SharpImageView，之後畫面上任何的圖片都可以加上斜邊效果，只要將 image view 的 class 設為 SharpImageView 即可。
