Как нарисовать линию с чередующимися цветами в Swift

Я не нашел статей, посвященных этой проблеме, хотя думал, что это более распространенная проблема. Эту пустоту в этой теме я хочу заполнить этой статьей.

Создание линии

Сначала давайте реализуем функцию, которая создает UIBezierPath через заданный массив CGPoints.

func createBezierPath(from coordinates: [CGPoint]) -> UIBezierPath {
    let path = UIBezierPath()
    
    guard let startPoint = coordinates.first else { return path }
    
    for (idx, point) in coordinates.enumerated() {
        if idx == 0 {
            path.move(to: point)
            continue
        }
        path.addLine(to: point)
    }
    
    return path
}

Сначала мы создали пустой UIBezierPath. Затем мы проверяли, есть ли у него точка, а если нет, возвращали пустой путь.

Затем проходим по всем точкам. Если это первая точка, мы перемещаем нашу воображаемую кисть в эту точку с помощью функции .move(to:_). Для всех остальных точек мы добавляем линию от нашей предыдущей точки до текущей точки. Если мы хотим рисовать только прямые линии, нам нужны только начальная и конечная точки, переместите кисть в начальную точку и добавьте линию в конечную точку.

Рисование UIBezierPath

Как теперь нарисовать путь, который возвращает функция выше? Для этого есть два способа. Один из них — создание собственного класса, который наследуется от класса View UIKit и требует переопределения функции onDraw(). В некоторых сценариях это может быть полезно, но второй вариант немного проще, поэтому сейчас я его покажу. Внутри функции loadView контроллера представления вам необходимо написать следующее:

let pathLayer = CAShapeLayer()
pathLayer.path = path.cgPath
pathLayer.strokeColor = UIColor.blue.cgColor
pathLayer.lineWidth = 3.0

view.layer.addSublayer(pathLayer)

Мы создаем подслой для нашего представления, и этот подслой будет содержать наш путь. Вы можете добавить несколько подслоев.

Создание пунктирной линии

Самое близкое, что я смог найти для линии чередующихся цветов, — это пунктирная линия. Это явно не то, что нам нужно, но пригодится позже.

func createDashedBezierPath(from coordinates: [CGPoint]) ->…