利用 UIBezierPath 設計特別形狀的圖片 — 風景介紹
前言
這次要分享的是瓜地馬拉的風景，這也是我曾待過一年的地方，想當初那些年～～～，是非常精彩與快樂的日子，這邊位於中南美洲墨西哥下方，一個國家稱之Guatemala，是台灣友邦國家。
也是目前少之又少的穩定友邦XD
這些時光是我在擔任外交替代役的時候待的地方，想當初自己年輕時跑了好多地方，學著講西班牙文，遇見許多台灣的志工，那種他鄉遇故知的感覺，想起來就令人愉悅。
好了，說得有點太多，就進入此次主題吧！
重點
這次練習的項目是將每個照片做排版，不再是一張四四方方的圖片，我們可以透過「遮罩」的功能，再加上貝茲曲線來做個斜邊。
如果不太熟悉，可以先看這個教學：
操作步驟
先找個幾張漂亮的風景，當然就是靠Google大神，於是找好了圖片就放到Xcode中的Assets.xcassets。
接著在storyboard上面拉滿一定數量的UIImageView，並將圖片設定上去，文字部分則是採用Label的方式加上背景顏色和透明度的方式來呈現。
希望每一個圖片之間都有斜邊來做區隔，所以會發現第一張和最後一張的範圍會不一樣，第二張到第四張都是相同模式，所以以下需要三個動作。
建立UIImageView Class
針對Class撰寫layoutSubviews
上述完成後，接著開始針對Class來寫一些初始時要進行遮罩的程式碼Function。
這部分我們將使用到layoutSubViews，這部分我以為他會自己產生，但似乎不會，不過看到override這樣的字眼想必一定是父類別就有的function，所以才可以這樣做。
在定義這個function時，最好也加上super.layoutSubviews()，因為要override做自己事情時，也把原來會做的事做完再做自己的事情，除非你不想要執行原來function做的事情。
使用UIBezierPath來畫出遮罩面積
//宣告path為貝茲曲線物件
let path = UIBezierPath()
//第一個座標點，使用CGPoint.zero(x=0,y=0)
path.move(to: CGPoint.zero)
//使用bouns取得圖片寬度，畫到圖像右上邊界(x為圖片寬度,y不變)
path.addLine(to: CGPoint(x: bounds.width, y: 0))
//使用bouns取得圖片寬度，畫到圖像右下邊界(x不變，y畫到圖片右下邊界)
path.addLine(to: CGPoint(x: bounds.width, y: bounds.height))
//使用bouns取得圖片寬度，畫到圖像左下邊界(x到圖片左邊，y畫到圖片左下高度*0.8)也就是往上裁切
path.addLine(to: CGPoint(x: 0, y: bounds.height * 0.8))
//回到第一個點(0,0)
path.close()
let shapeLayer = CAShapeLayer()
//取得路徑
shapeLayer.path = path.cgPath
//指定遮罩
layer.mask = shapeLayer
第二張至第四張圖片
這次改變作法，第二張呈現的方式在上面就要往右下畫，這次計算的方式就有點不太同，因為一開始就要算出第一張圖片的斜角(左邊與右邊)差異的高度。
由上圖來看大概就是藍色線條高度-黃色線條高度，可以得到高度差，程式碼大概如下，其實只是順序大致上改變了，喔對了，這部分我是另外新增一個UIImageView Class來做處理。
let path = UIBezierPath()
path.move(to: CGPoint.zero)
//第一條線就往下傾斜
path.addLine(to: CGPoint(x: bounds.width, y: 49))
path.addLine(to: CGPoint(x: bounds.width, y: bounds.height))
//最後一條也要往上傾斜
path.addLine(to: CGPoint(x: 0, y: bounds.height — 49))
path.close()
let shapeLayer = CAShapeLayer()
shapeLayer.path = path.cgPath
layer.mask = shapeLayer
最後一張
最後一張就是只有上面要做斜角，跟第一張相反，所以也是偷懶用一個新的UIImageView Class來做，程式碼如下。
let path = UIBezierPath()
path.move(to: CGPoint.zero)
//第一條就傾斜
path.addLine(to: CGPoint(x: bounds.width, y: 49))
path.addLine(to: CGPoint(x: bounds.width, y: bounds.height))
//最後一條就給他圖片高度
path.addLine(to: CGPoint(x: 0, y: bounds.height))
path.close()
let shapeLayer = CAShapeLayer()
shapeLayer.path = path.cgPath
layer.mask = shapeLayer
成果分享
