前言
CAShapeLayer&UIBezierPath 在App開發繪制圖形時占有很重要的地位。CAShapeLayer&UIBezierPath 兩個類方法簡單，使用方便，能滿足我們的基本繪制需求。
CAShapeLayer 的方法介紹
// MARK: CAShapeLayer 的介紹
func IntroduceShapeLayer() -> Void {
// 創建對象
shapeLayer = CAShapeLayer()
shapeLayer = CAShapeLayer.init()
shapeLayer = CAShapeLayer.init(coder: NSCoder.init())
shapeLayer = CAShapeLayer.init(layer: self.layer)
// 添加路徑
shapeLayer?.path = UIBezierPath().cgPath
// 路徑的填充
shapeLayer?.fillColor = UIColor.red.cgColor
// 路徑填充規則
shapeLayer?.fillRule = "even-odd" // "even-zero"
// 設置路徑的顏色
shapeLayer?.strokeColor = UIColor.gray.cgColor
// 路徑開始繪制的進度百分比
shapeLayer?.strokeStart = 0.2
shapeLayer?.strokeEnd = 0.8
// 設置路徑的寬度
shapeLayer?.lineWidth = 6
// 設置路徑的尾端形狀 'butt'(和 square 一樣，矩形), `round'（半圓形）* and `square'（矩形）。
shapeLayer?.lineCap = "butt"
// 設置路徑結合處的形狀 'miter'(切角), `round'（圓?。?and `bevel'（正切角）.
shapeLayer?.lineJoin = "miter"
// 設置繪制虛線的起始偏差值
shapeLayer?.lineDashPhase = 10
// 設置繪制虛線的間隔值
shapeLayer?.lineDashPattern = [10,20]
}
UIBezierPath 的方法&參數介紹
// MARK： 介紹UIBezierPath的一些方法
func IntroduceBezierPath(rect: CGRect) -> Void {
// 初始化 UIBezierPath
var BezierPath:UIBezierPath!
BezierPath = UIBezierPath.init()
BezierPath = UIBezierPath.init(rect:rect)
// Storyboard & Xib 創建的時候
BezierPath = UIBezierPath.init(coder: NSCoder.init())
// CGPath 路徑創建 BezoerPath路徑
BezierPath = UIBezierPath.init(cgPath: CGPath.init(rect: rect, transform: UnsafePointer.init(bitPattern: 2)))
// 一個橢圓路徑
BezierPath = UIBezierPath.init(ovalIn: rect)
// 四邊形帶切記的路徑
BezierPath = UIBezierPath.init(roundedRect: rect, cornerRadius: 2)
// 繪制一個圓形路徑
BezierPath = UIBezierPath.init(arcCenter: CGPoint.init(x: 100, y: 100), radius: 30, startAngle: 0, endAngle: .pi, clockwise: true)
// 移動起始點
BezierPath.move(to: CGPoint.zero)
// 添加路線點
BezierPath.addLine(to: CGPoint.zero)
// 繪制單點控制曲線
BezierPath.addQuadCurve(to: CGPoint.zero, controlPoint: CGPoint.zero)
// 繪制雙點控制曲線
BezierPath.addCurve(to: CGPoint.zero, controlPoint1: CGPoint.zero, controlPoint2: CGPoint.zero)
// 繪制圓形路徑
BezierPath.addArc(withCenter: CGPoint.zero, radius: 30, startAngle: 0, endAngle: .pi, clockwise: true)
// 追加路徑
BezierPath.append(BezierPath)
// 移除路徑上的所有點
BezierPath.removeAllPoints()
// 關閉路徑
BezierPath.close()
// 修改路徑
BezierPath = BezierPath.reversing()
// 轉化路徑
BezierPath.apply(CGAffineTransform.identity)
// 獲取路徑的一些信息
// 判斷路徑是否存在
let isSave = BezierPath.isEmpty
print(isSave)
// 獲取路徑當前點
let cPoint = BezierPath.currentPoint
print(cPoint)
// 獲取路徑的rect
let PathRect = BezierPath.bounds
print(PathRect)
// 判斷某點是否在路徑上
let isContains = BezierPath.contains(CGPoint.zero)
print(isContains)
// 設置路徑的寬度
BezierPath.lineWidth = 5
/**
設置路徑頭部的形狀
CGLineCap 可選的類型如下:
@ butt 粗況的線段和square ,樣式一樣，是一個矩形（或則正方形）。
@ round 圓形的路徑頭部。
@ square 和butt形狀一樣。
*/
BezierPath.lineCapStyle = .butt
/**
設置路徑結合處的形狀
CGLineJoin 可選的類型如下:
@ miter 斜方切角
@ round 圓形
@ bevel 斜切角
*/
BezierPath.lineJoinStyle = .bevel
// 設置切角
BezierPath.miterLimit = 6
// 設置路徑繪制的精度，精度越大，處理時間約長
BezierPath.flatness = 0.6
// 是否使用 even-oldfill 的填充規則
BezierPath.usesEvenOddFillRule = false
// 填充路徑
BezierPath.fill()
// 閉合路徑
BezierPath.stroke()
// 填充規則和深度
BezierPath.fill(with: .colorDodge, alpha: 1.0)
// 路徑閉合的規則和路徑透明度
BezierPath.stroke(with: .colorDodge, alpha: 1)
}
UIBezierPath 的一些圖形的繪制
1、 四邊形的繪制
// MARK: 繪制四邊形
func drawQuadrilateral() -> UIBezierPath {
let BzPath = UIBezierPath.init()
BzPath.move(to: CGPoint.init(x: 50, y: 50))
BzPath.addLine(to: CGPoint.init(x: 250, y: 50))
BzPath.addLine(to: CGPoint.init(x: 250, y: 250))
BzPath.addLine(to: CGPoint.init(x: 50, y: 250))
BzPath.close()
return BzPath
}
/**
四邊形繪制調用的方法
// 創建一個CALayer的對象
shapeLayer = CAShapeLayer.init()
// 路徑賦值
shapeLayer?.path = self.drawQuadrilateral().cgPath
// 設置路徑的顏色
shapeLayer?.strokeColor = UIColor.red.cgColor
// 設置路徑圍成區域的填充色
shapeLayer?.fillColor = UIColor.white.cgColor
// 設置路徑的寬度
shapeLayer?.lineWidth = 6
// 向繪制的View上添加 layer
self.layer.addSublayer(shapeLayer!)
*/
效果圖如下：
B229C63B-80C8-41FC-8FC5-729B5C829931.png
2、圓形的繪制
// MARK:繪制圓形
func drawArcBzPath() -> UIBezierPath {
let BzPath = UIBezierPath.init()
/**
繪制圓形
@ withCenter 圓的中心
@ radius 繪制圓的半徑
@ startAngle 繪制圓開始的角度
@ endAngle 繪制圓結束的角度
@ clockwise 繪制圓的方向。 true為順時針，false為逆時針方向
*/
BzPath.addArc(withCenter: CGPoint.init(x: self.bounds.width * 0.5, y: self.bounds.height*0.5), radius: 50, startAngle: 0, endAngle: .pi * 2, clockwise: true)
// 繪繪制結束
BzPath.stroke()
return BzPath
}
/**
圓繪制調用的方法
// 創建一個CALayer的對象
shapeLayer = CAShapeLayer.init()
// 路徑賦值
shapeLayer?.path = self.drawArcBzPath().cgPath
// 設置路徑的顏色
shapeLayer?.strokeColor = UIColor.red.cgColor
// 設置路徑圍成區域的填充色
shapeLayer?.fillColor = UIColor.white.cgColor
// 設置路徑的寬度
shapeLayer?.lineWidth = 6
// 向繪制的View上添加 layer
self.layer.addSublayer(shapeLayer!)
*/
效果圖如下：
9D252CD4-B28E-40D3-A575-9C056C632A48.png
3、曲線的繪制
// 繪制貝塞爾曲線
func drawBesselCurve(controlPoints:Bool) -> UIBezierPath {
let BzPath = UIBezierPath.init()
// 添加起始點
BzPath.move(to: CGPoint.init(x: 10, y: 150))
if controlPoints {
/**
雙點控制曲線
@ to 曲線結束點
@ controlPoint1 控制曲線點一
@ controlPoint2 控制曲線點二
*/
BzPath.addCurve(to: CGPoint.init(x: 290, y: 150), controlPoint1: CGPoint.init(x: 100, y: 50), controlPoint2: CGPoint.init(x: 200, y: 250))
}else {
/**
單點控制器曲線
@ to 曲線結束點
@ controlPoint 控制曲線點一
*/
BzPath.addQuadCurve(to: CGPoint.init(x: 290, y: 150), controlPoint: CGPoint.init(x: 150, y: 50))
}
// 閉合曲線
BzPath.stroke()
return BzPath
}
/**
貝塞爾曲線的繪制調用的方法
// 創建一個CALayer的對象
shapeLayer = CAShapeLayer.init()
// 路徑賦值
shapeLayer?.path = self.drawBesselCurve(controlPoints: false).cgPath
// 設置路徑的顏色
shapeLayer?.strokeColor = UIColor.red.cgColor
// 設置路徑的寬度
shapeLayer?.lineWidth = 6
// 向繪制的View上添加 layer
self.layer.addSublayer(shapeLayer!)
*/
效果圖如下：
306E11EC-8B5F-4CB6-B6A1-3CD62B5754AC.png
D8ECCFEC-7079-4D7D-95E2-339460875A0A.png
4、虛線的繪制
// MARK: 虛線繪制
func drawDashLine() -> UIBezierPath {
let BzPath = UIBezierPath.init()
BzPath.move(to: CGPoint.init(x: 10, y: 150))
BzPath.addLine(to: CGPoint.init(x: 290, y: 150))
return BzPath
}
/**
繪制虛線的調用方法
// 創建對象
shapeLayer = CAShapeLayer.init()
// 設置路徑
shapeLayer?.path = self.drawDashLine().cgPath
// 設置路徑的顏色
shapeLayer?.strokeColor = UIColor.red.cgColor
// 設置虛線的間隔
shapeLayer?.lineDashPattern = [10,20];
// 設置路徑的寬度
shapeLayer?.lineWidth = 6
// 路徑的渲染
self.layer.addSublayer(shapeLayer!)
*/
效果圖如下：
4F7E987B-80E6-4239-94CB-1CAE1BB19029.png
5、 繪制橢圓
// MARK: 繪制橢圓
func drawEllipse() -> UIBezierPath {
let BzPath = UIBezierPath.init(ovalIn: CGRect.init(x: 10, y: 75, width: 280, height: 150))
return BzPath
}
/**
繪制橢圓的調用方法
// 創建一個CALayer的對象
shapeLayer = CAShapeLayer.init()
// 路徑賦值
shapeLayer?.path = drawEllipse().cgPath
// 設置路徑的顏色
shapeLayer?.strokeColor = UIColor.red.cgColor
// 設置路徑圍成區域的填充色
shapeLayer?.fillColor = UIColor.white.cgColor
// 設置路徑的寬度
shapeLayer?.lineWidth = 6
// 向繪制的View上添加 layer
self.layer.addSublayer(shapeLayer!)
*/
效果圖如下：
FD5E27B3-504D-4178-871D-C4E85A5366A7.png
