Core Graphics 之 路径的填充规则与混合模式 （三）

前提：

在CGContext的众多方法中有着特殊的两个绘制当前路径方法

1、func drawPath(using: CGPathDrawingMode)

2、func fillPath(using: CGPathFillRule)

此方法中含有一个CGPathDrawingMode类型与CGPathFillRule类型，我们称之为绘制模型与填充规则

绘制模型为一个枚举类型，其结构如下

public enum CGPathDrawingMode : Int32 {

    case fill :使用非零环绕路径渲染规则

    case eoFill：奇偶渲染规则

    case stroke：沿着路径渲染一条线

    case fillStroke：先按照非零环绕进行填充然后进行绘制路径

    case eoFillStroke：先按照奇偶规则填充，然后进行绘制路径

}

填充规则数据结构如下:

public enum CGPathFillRule : Int {

            case winding 非零环绕规则

            case evenOdd 奇偶规则

}

奇偶规则：

从路径覆盖范围内的任意一点做一条射线(确保这条射线的长度要比路径覆盖范围要大) , 如果与该射线相交的边的数量为奇数, 则该点是路径的内部点, 反之该点则是路径的外部点。

详细代码如下:

 override func draw(_ rect: CGRect) {
        let drawRect:CGRect = CGRect(x: 20, y: 70, width: rect.maxX - 40, height: rect.maxY - 140)
        // 五角星的五个点:
        let A:CGPoint = CGPoint(x: drawRect.midX, y: drawRect.minY)
        let B:CGPoint = CGPoint(x: drawRect.minX, y: 250)
        let C:CGPoint = CGPoint(x: drawRect.midX - (drawRect.midX / 2), y: 500)
        let D:CGPoint = CGPoint(x: drawRect.midX + (drawRect.midX / 2), y: 500)
        let E:CGPoint = CGPoint(x: drawRect.maxX, y: 250)
        
        // 五角星路径
        let path:CGMutablePath = CGMutablePath.init()
        path.move(to: A)
        path.addLine(to: C)
        path.addLine(to: E)
        path.addLine(to: B)
        path.addLine(to: D)
        
        // 路径绘制
        let context:CGContext = UIGraphicsGetCurrentContext()!
        context.setLineWidth(2.5)
        context.setStrokeColor(UIColor.red.cgColor)
        context.setFillColor(UIColor.blue.cgColor)
        context.addPath(path)
        context.closePath()
        /*填充规则设置*/
        context.fillPath(using: .evenOdd)
        context.drawPath(using: .stroke)
        
        
    }

奇偶填充规则

 

非零环绕数原则：

 首先定义一个用于焦点统计的count值，然后从路径覆盖范围内的任意一点做一条射线(确保这条射线的长度要比路径覆盖范围要大). 然后我们对每一条和该射线相交的路径进行统计, 统计规则是这样的: 当路径是从右向左穿过射线的时候, count++, 当路径是从左向右穿过射线的时候, count--. 当我们统计完所有相交的路径后, 如果 count不为0, 则该点是内部点, 该点所在的封闭区域需要填充, 反之该点则是路径的外部点

一个例子如下：

func drawTXY(_ rect:CGRect) {
        /*内部与外部圆心路径*/
        let basePath:CGMutablePath = CGMutablePath.init()
        let inPath:CGMutablePath = CGMutablePath.init()
        let outPath:CGMutablePath = CGMutablePath.init()
        inPath.addArc(center: self.center, radius: 50, startAngle: 0, endAngle: 2.0 * .pi, clockwise: true)
        outPath.addArc(center: self.center, radius: 100, startAngle: 0, endAngle: 2.0 * .pi, clockwise: false)
        basePath.addPath(inPath)
        basePath.addPath(outPath)
        /*绘制引擎*/
        let context:CGContext = UIGraphicsGetCurrentContext()!
        context.setLineWidth(2.0)
        context.setStrokeColor(UIColor.red.cgColor)
        context.setFillColor(UIColor.blue.cgColor)
        context.addPath(basePath)
        /*填充规则为非零环绕规则*/
        context.fillPath(using: .winding)
        context.drawPath(using: .stroke)
        
        
    }

非零环绕填充规则

 

混合模式

混合模式是指在进行绘制时如何使用绘制背景的方式！Quartz2D中使用默认的混合方式，并使用以下公式将背景画和前景画进行结合：

result = (alpha * foreground) + (1 - alpha) * background 、alpha表示颜色的不透明值