Paths路径介绍:
path定义了一个或者多个路径或者形状,是用来为Quartz 2D确定其绘制轨迹的对象。path路径可以是直线,点,曲线,或者组合。path路径具有打开路径和关闭路径之分,具体详情例子如下
封闭路径和未封闭路径:
封闭路径和未封闭路径的区别在于一条路径中首尾点是否进行连接。例子如下:
/*未封闭路径*/
override func draw(_ rect: CGRect) {
let startPoint:CGPoint = CGPoint(x: 200, y: 100)
let point1:CGPoint = CGPoint(x: 100, y: 300)
let point2:CGPoint = CGPoint(x: 300, y: 300)
let context:CGContext = UIGraphicsGetCurrentContext()!
context.setStrokeColor(UIColor.red.cgColor)
context.move(to: startPoint)
context.addLine(to: point1)
context.addLine(to: point2)
context.drawPath(using: .stroke)
}
/*封闭路径*/
override func draw(_ rect: CGRect) {
let startPoint:CGPoint = CGPoint(x: 200, y: 100)
let point1:CGPoint = CGPoint(x: 100, y: 300)
let point2:CGPoint = CGPoint(x: 300, y: 300)
let context:CGContext = UIGraphicsGetCurrentContext()!
context.setStrokeColor(UIColor.red.cgColor)
context.move(to: startPoint)
context.addLine(to: point1)
context.addLine(to: point2)
context.closePath()
context.drawPath(using: .stroke)
}
结果如图所示:
路径的创建与绘制:
1、设置起始点和添加lines:点是指用户在空间中指定的坐标位置,您可以调用context的moveToPoint方法去指定一个新路径的起始点,例如移动一个路径点到视图中心,并绘制一条直线
override func draw(_ rect: CGRect) {
let context:CGContext = UIGraphicsGetCurrentContext()!
context.setStrokeColor(UIColor.red.cgColor)
// 为新路径设定起始点
context.move(to: self.center)
// 使用一个点去添加一个直线
context.addLine(to: CGPoint(x: self.center.x + 200, y: self.center.y))
context.drawPath(using: .stroke)
}
2、绘制一条圆弧:添加一条圆弧我们可以使用addArc(center: CGPoint, radius: CGFloat, startAngle: CGFloat, endAngle: CGFloat, clockwise: Bool)。此方法也可以绘制圆,只是使用的角度和弧度的不同
参数:
center:圆心坐标
radius:绘制半径
startAngle:其实角度
endAngle:终点角度
clockwise:绘制方向,顺时针与逆时针方向
override func draw(_ rect: CGRect) {
let path:CGMutablePath = CGMutablePath.init()
path.addArc(center: self.center, radius: 50, startAngle: 0, endAngle: 1.5 * .pi, clockwise: false)
path.closeSubpath()
let context:CGContext = UIGraphicsGetCurrentContext()!
context.setStrokeColor(UIColor.red.cgColor)
context.setLineWidth(2.5)
context.addPath(path)
context.drawPath(using: .stroke)
}
3、绘制一个椭圆: 绘制椭圆的方法使用addEllipse(in: CGRect)方法去填充实现路径,例如可以使用宽度和高度不等的CGSize去实现椭圆的绘制
override func draw(_ rect: CGRect) {
let path:CGMutablePath = CGMutablePath.init()
path.addEllipse(in: CGRect(origin: self.center, size: CGSize(width: 100, height: 60)))
path.closeSubpath()
let context:CGContext = UIGraphicsGetCurrentContext()!
context.setStrokeColor(UIColor.red.cgColor)
context.setLineWidth(2.5)
context.addPath(path)
context.drawPath(using: .stroke)
}
4、绘制带圆角的矩形: 通过addRoundedRect方法去创建一条圆角的路径去绘制一个圆角巨型
override func draw(_ rect: CGRect) {
let path:CGMutablePath = CGMutablePath.init()
path.addRoundedRect(in: CGRect(x: 100, y: 100, width: self.frame.size.width - 200, height: self.frame.size.width - 200), cornerWidth: 50, cornerHeight: 50)
path.closeSubpath()
let context:CGContext = UIGraphicsGetCurrentContext()!
context.setStrokeColor(UIColor.red.cgColor)
context.setLineWidth(2.5)
context.addPath(path)
context.drawPath(using: .stroke)
}
5、绘制特殊个数的圆角矩形:已知的CGMutablePath去创建圆角矩形路径时会有四个圆角,如果我们需要两个或者一个圆角的矩形时则需要使用UIBezierPath去创建绘制路径
override func draw(_ rect: CGRect) {
let path:UIBezierPath = UIBezierPath.init(roundedRect: CGRect(x: 100, y: 100, width: self.frame.size.width - 200, height: self.frame.size.width - 200), byRoundingCorners: [UIRectCorner.topLeft, UIRectCorner.topRight], cornerRadii: CGSize(width: 50, height: 50))
let context:CGContext = UIGraphicsGetCurrentContext()!
context.setStrokeColor(UIColor.red.cgColor)
context.setLineWidth(2.5)
context.addPath(path.cgPath)
context.drawPath(using: .stroke)
}
6、绘制二次曲线和三次曲线: 使用addQuadCurve去绘制不同控制点的贝塞尔曲线。例如
/*二次贝塞尔曲线*/
override func draw(_ rect: CGRect) {
let path:CGMutablePath = CGMutablePath.init()
path.move(to: CGPoint(x: 250, y: 100))
path.addQuadCurve(to: CGPoint(x: 250, y: 500), control: self.center)
let context:CGContext = UIGraphicsGetCurrentContext()!
context.setStrokeColor(UIColor.red.cgColor)
context.setLineWidth(2.5)
context.addPath(path)
context.drawPath(using: .stroke)
}
/*两个控制点的贝塞尔曲线*/
override func draw(_ rect: CGRect) {
let path:CGMutablePath = CGMutablePath.init()
path.move(to: CGPoint(x: 200, y: 100))
path.addCurve(to: CGPoint(x: 200, y: 650), control1: CGPoint(x: 100, y: 400), control2: CGPoint(x: 300, y: 550))
let context:CGContext = UIGraphicsGetCurrentContext()!
context.setStrokeColor(UIColor.red.cgColor)
context.setLineWidth(2.5)
context.addPath(path)
context.drawPath(using: .stroke)
}
路径的一些常用参数:
1、line width:线宽度大小
2、line join:线连接点的类型
3、line cap:绘制线端点的方法
4、line dash pattern:分线段,常用与虚线绘制
5、 shadow 阴影
例如:
override func draw(_ rect: CGRect) {
let path:CGMutablePath = CGMutablePath.init()
path.addRoundedRect(in: CGRect(x: 100, y: 100, width: self.frame.size.width - 200, height: self.frame.size.width - 200), cornerWidth: 50, cornerHeight: 50)
path.closeSubpath()
let context:CGContext = UIGraphicsGetCurrentContext()!
context.setStrokeColor(UIColor.red.cgColor)
/*线的一些属性*/
context.setLineWidth(2.5)
context.setLineJoin(.round)
context.setLineCap(.round)
context.setLineDash(phase: 2.5, lengths: [2.5, 5.0]) // lengths:绘制规则为绘制2.5个像素,空余5.0个像素,以此类推
context.setShadow(offset: CGSize(width: -2.5, height: 2.5), blur: 2.5)
context.addPath(path)
context.drawPath(using: .stroke)
}