前言
在Swift 的开发中图形的绘制是一个基本工作。绘制图形，路径是不可少的。今天我们将要介绍的是CGMutablePath 和 CGPath 。
一、 CGMutablePath 的使用。
1》 CGMutablePath 的基本使用
1、 CGMutablePath 的对象创建
// 设置绘制的路径
let paths = CGMutablePath.init()
2、设置其实画笔的起始点
// 设置起始点
paths.move(to: CGPoint.init(x: 10, y: 10))
3、添加路径
// 添加路径
paths.addLine(to: CGPoint.init(x: 100, y: 10))
4、闭合路径
// 闭合路径（路径最后一点到起始点）
paths.closeSubpath()
2》 CGMutablePath 一些形状的绘制。
1、 绘制虚线
// MARK: 绘制虚线
func drawDottedLine(rect:CGRect,context:CGContext) -> Void {
// 设置绘制路径
let paths = CGMutablePath.init()
paths.move(to: CGPoint.init(x: 120, y: 100))
paths.addLine(to: CGPoint.init(x: 320, y: 100))
// 添加路径到上下文
context.addPath(paths)
// 设置颜色
UIColor.green.set()
// 设置画笔的宽度
context.setLineWidth(5)
/**
设置间隔虚线
*/
var legth:[CGFloat]!
// 先绘制16像素，在跳过8像素，在绘制16像素，在跳过8像素这样一直循环。
legth = [16,8]
// 先绘制20像素，在跳过10像素，在绘制5像素，在跳过20像素，在绘制10像素，在跳过5像素，在绘制20像素...这样循环下去。
legth = [20,10,5]
// phase 是指先绘制的差值。 这个是先绘制 legth.first - phase 像素，在跳过5像素，在绘制20像素，在跳过5像素，这样循环。
legth = [20,5]
context.setLineDash(phase: 10, lengths: legth)
// 绘制路径
context.strokePath()
}
2、绘制单点或者两点控制的曲线
// MARK: 单点和两点控制曲线绘制
func drawQuadCurve(rect:CGRect,context:CGContext) -> Void {
// 设置绘制路径
let paths = CGMutablePath.init()
paths.move(to: CGPoint.init(x: 20, y: 100))
/**
/**
单点控制曲线
to: CGPoint :曲线的绘制结束点。
control: CGPoint : 曲线绘制的控制点。
transform : 曲线绘制的旋转角度。
*/
paths.addQuadCurve(to: CGPoint.init(x: 220, y: 200), control: CGPoint.init(x: 120, y: 100), transform: .identity)
*/
/**
双点控制
to: CGPoint :曲线的绘制结束点。
control1: CGPoint : 曲线绘制的控制点一。
control2: CGPoint : 曲线绘制的控制点二。
transform : 曲线绘制的旋转角度。
*/
paths.addCurve(to: CGPoint.init(x: 220, y: 300), control1: CGPoint.init(x: 80, y: 220), control2: CGPoint.init(x: 160, y: 150), transform: .identity)
// 添加路径到上下文
context.addPath(paths)
// 设置颜色
UIColor.green.set()
// 设置画笔的宽度
context.setLineWidth(5)
// 绘制路径
context.strokePath()
}
3、绘制圆弧曲线
// MARK: 绘制圆弧曲线
func drawCircularArc(rect:CGRect,context:CGContext) {
let paths = CGMutablePath.init()
/**
/**
画一个简单的圆弧
center: 圆弧的中心点。
radius: 圆弧的半径。
startAngle: 圆弧开始角度。
endAngle: 结束圆弧的角度。
clockwise: 是顺时针还是逆时针绘制圆弧。true为顺、false为逆。
*/
paths.addArc(center: self.center, radius: 40, startAngle: 0, endAngle: .pi * 2, clockwise: true)
/**
绘制一个圆弧，没有结束的角度。
center: 圆弧的中心点。
radius: 圆弧的半径。
startAngle: 圆弧开始角度。
delta: 向前或者向后绘制弧度的大小。
*/
paths.addRelativeArc(center: self.center, radius: 40, startAngle: 0, delta: .pi * 2)
*/
// 设置画笔的起始点
paths.move(to: CGPoint.init(x: 10, y: 10))
/**
有两个切点和半径绘制特定的圆弧
tangent1End : 切点一。
tangent2End : 切点二。
radius : 圆的半径。
*/
paths.addArc(tangent1End: CGPoint.init(x: 300, y: 100), tangent2End: CGPoint.init(x: 1, y: 200), radius: 40)
context.addPath(paths)
UIColor.red.set()
context.setLineWidth(1)
context.strokePath()
}
4、绘制椭圆
// MARK: 给定区域绘制椭圆
func drawEllipse(rect:CGRect,context:CGContext) -> Void {
let paths = CGMutablePath.init()
/**
绘制椭圆的函数
CGRect: 绘制椭圆的大小。
*/
paths.addEllipse(in: CGRect.init(x: 10, y: 20, width: 130, height: 200))
context.addPath(paths)
context.setLineWidth(2)
UIColor.red.set()
context.strokePath()
}
5、绘制四边形
// MARK: 绘制四边形
func drawAddRects(rect:CGRect,context:CGContext) -> Void {
let paths = CGMutablePath.init()
/**
绘制函数
// 另一种函数：
public func addRects(_ rects: [CGRect], transform: CGAffineTransform = default)
CGRect : 绘制四边形的大小。
CGAffineTransform : 是指四边形绘制后的旋转。
*/
paths.addRect(CGRect.init(x: 10, y: 10, width: 100, height: 200))
context.addPath(paths)
context.setLineWidth(2)
UIColor.red.set()
context.strokePath()
}
6、 绘制点之间的线段
// MARK: 点之间绘制线段
func drawAddLines(rect:CGRect,context:CGContext) -> Void {
let paths = CGMutablePath.init()
/**
绘制的函数
between : 是一个数组，里面存放的是多个点。
*/
paths.addLines(between: [CGPoint.init(x: 40, y: 100),CGPoint.init(x: 100, y: 200)])
context.addPath(paths)
context.setLineWidth(2)
UIColor.red.set()
context.strokePath()
}
7、绘制带切角的四边行
// MARk: 绘制带切角的四边形
func drawAddRoundedRect(rect:CGRect,context:CGContext) -> Void {
let paths = CGMutablePath.init()
/**
绘制函数
CGRect: 绘制四边形的大小
cornerWidth : 切角的宽
cornerHeight: 切角的高
注意： cornerWidth 的宽度的 2 倍不能超过 CGRect 的宽度。
*/
paths.addRoundedRect(in: CGRect.init(x: 10, y: 20, width: 100, height: 100), cornerWidth: 3, cornerHeight: 2)
context.addPath(paths)
context.setLineWidth(2)
UIColor.red.set()
context.strokePath()
}
8、通过拷贝路径绘制曲线
// MARK: 通过拷贝路径绘制虚线
func pathCopys(rect:CGRect,context:CGContext) -> Void {
let paths1 = CGMutablePath.init()
paths1.move(to: CGPoint.init(x: 10, y: 10))
paths1.addLine(to: CGPoint.init(x: 200, y: 200))
paths1.closeSubpath()
/**
路径拷贝函数
dashingWithPhase: 差度绘制。
lengths: 绘制长度集合数组。
*/
let path2 = paths1.copy(dashingWithPhase: 20, lengths: [20,30,80])
print(path2)
/**
路径拷贝绘制
strokingWithWidth : 绘制路径的宽度。
lineCap : 绘制路径的尾端形状。
lineJoin : 绘制路径拐弯点的形状。
miterLimit : 路径绘制的切角最低限制。
*/
let path3 = paths1.copy(strokingWithWidth: 10, lineCap: .round, lineJoin: .miter, miterLimit: 10)
// 判断路径内是否包含某点。
let isContent = path3.contains(CGPoint.init(x: 60, y: 60))
print(isContent)
context.addPath(path3)
context.setLineWidth(5)
UIColor.red.set()
context.strokePath()
}
9 、一些其他知识点
func pathKnowledge() -> Void {
// 创建一个路径
let paths = CGMutablePath.init()
// 判断路径是否为空
print(paths.isEmpty)
// 添加路径
paths.move(to: CGPoint.init(x: 10, y: 200))
paths.addLine(to: CGPoint.init(x: 20, y: 100))
paths.addLine(to: CGPoint.init(x: 30, y: 50))
// 判断路径是否为空
print(paths.isEmpty)
// 获取路径当前的点
print(paths.currentPoint)
// 返回包含路径的最小矩形（包含二次曲线）
print(paths.boundingBox)
// 返回包含路径的最小矩形（不包含二次曲线）
print(paths.boundingBoxOfPath)
// 清楚路径
paths.closeSubpath()
}
