#18設計特別形狀-Sticky Monster Lab

利用UIBezierPath

https://shop.minemine.com.tw/V2/Official/SalePageCategory/324616?o=c&m=s&shopId=27289&sortMode=Newest

用療癒的Sticky Monster 設計特別形狀的介面

📌首先把原本專案預設的ViewController.Swift

📌建立新檔案，快捷鍵(cmd + n)，選擇Cocoa Touch Class

📌是使用UIImageView來顯示圖片，Subclass of(父類別)要選擇UIImageView

📌回到View Controller點選Image View把Class改為剛新建的SMLImageView

📌製造斜邊的程式碼，定義 function layoutSubviews

override func layoutSubviews() {
super.layoutSubviews()
let smlPath = UIBezierPath()
//從座標（0,0)
smlPath.move(to: CGPoint.zero)
//座標(x的寬,0)
smlPath.addLine(to: CGPoint(x: bounds.width, y: 0))
//座標(x的寬,y的高)
smlPath.addLine(to: CGPoint(x: bounds.width, y: bounds.height))
//座標(0,y的高 * 0.8)
smlPath.addLine(to: CGPoint(x: 0, y: bounds.height * 0.8))
//回到座標(0,0)
smlPath.close()
let smlLayer = CAShapeLayer()
smlLayer.path = smlPath.cgPath
layer.mask = smlLayer
}

📌再建一個UIViewController，用來控制UILabel旋轉角度

📌建立IBOutlet(宣告)

📌旋轉程式碼

smlLabel.transform = CGAffineTransform(rotationAngle: .pi/180 * 17)

💡不過斜邊 & 旋轉，在模擬器跑才看得見效果

成品圖：

參考來源

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