Core Graphics 之 Paths（二）

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)
        
    }

路径的一些参数