學習記錄#利用 UIBezierPath 設計特別形狀的圖片 — 比方斜邊 & 愛心
Published in
6 min readJan 21, 2021
目的:利用UIBezierPath創作任意形狀的圖片。
1.畫面加入imageView
2.新增繼承 UIImageView 的 SharpImageView。
3.選擇 iOS 下的 Cocoa Touch Class。
4.記得 Subclass of (父類別) 要設為 UIImageView。
5.將 image view 的 Class(類別)設為 SharpImageView。
6.在 SharpImageView.swift 裡加入製造斜邊的程式碼。
定義 function layoutSubviews。
override func layoutSubviews() {super.layoutSubviews()//宣告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))path.close()let shapeLayer = CAShapeLayer()shapeLayer.path = path.cgPathlayer.mask = shapeLayer}
在二~四張一開始就要畫下來所以改成
path.addLine(to: CGPoint(x: bounds.width, y: bounds.height * 0.2))7.在 SharpImageView.swift 裡加入製造星星的程式碼。
override func layoutSubviews() {super.layoutSubviews()let path = UIBezierPath()path.move(to: CGPoint(x: 91, y: 14))path.addLine(to: CGPoint(x: 112, y: 60))path.addLine(to: CGPoint(x: 161, y: 69))path.addLine(to: CGPoint(x: 129, y: 109))path.addLine(to: CGPoint(x: 135, y: 163))path.addLine(to: CGPoint(x: 91, y: 141))path.addLine(to: CGPoint(x: 45, y: 163))path.addLine(to: CGPoint(x: 51, y: 110))path.addLine(to: CGPoint(x: 14, y: 72))path.addLine(to: CGPoint(x: 64, y: 60))path.close()let shapeLayer = CAShapeLayer()shapeLayer.path = path.cgPathlayer.mask = shapeLayer}
8.在 SharpImageView.swift 裡加入製造愛心的程式碼。
override func layoutSubviews() {super.layoutSubviews()let path = UIBezierPath()path.move(to: CGPoint(x: 160,y: 120))path.addQuadCurve(to: CGPoint(x: 160, y: 260), controlPoint: CGPoint(x: 280, y: 60))path.addQuadCurve(to: CGPoint(x: 160, y: 120), controlPoint: CGPoint(x: 50, y: 60))path.close()let shapeLayer = CAShapeLayer()shapeLayer.path = path.cgPathlayer.mask = shapeLayer}
參考資料:
