使用CGPath绘制一条多彩线路

Question

以下是一段代码，每次调用drawMulticolorLine时会绘制一条多色线。

    void drawMulticolorLine
    {
        CGContextBeginPath(secondaryContext);
        CGContextMoveToPoint(secondaryContext, h, v);
        for( int i = 1; i < lineWidth; ++ )
        {
            SetStrokeColor(i);
            CGContextAddLineToPoint(secondaryContext, h+i, v);
            CGContextDrawPath(secondaryContext, kCGPathFillStroke);
            CGContextMoveToPoint(secondaryContext, h+i, v);
        }
    }

    //a function that sets a different color for each i
    void SetStrokeColor(int i)
    {
        CGContextSetRGBStrokeColor(secondaryContext,…
    }

上述代码可以工作，但如果在实际应用中使用它，性能会受到影响。因此，我尝试通过下面的代码来提高绘图性能。

    void drawMulticolorLine
    {
        CGContextBeginPath(secondaryContext);
        CGContextMoveToPoint(secondaryContext, h, v);
        for( int i = 1; i < lineWidth; ++ )
        {
            SetStrokeColor(i);
            CGContextAddLineToPoint(secondaryContext, h+i, v);
        }
        CGContextDrawPath(secondaryContext, kCGPathFillStroke);
    }

    //a function that sets a different color for each i
    void SetStrokeColor(int i)
    {
        CGContextSetRGBStrokeColor(secondaryContext,…
    }

这段代码在线条颜色始终相同时性能良好。

我的问题是，一旦调用CGContextDrawPath，整条线就会用最后一个CGContextSetRGBStrokeColor的颜色绘制。

有没有办法让路径保持添加的每个线段的颜色？

非常感谢任何帮助。

祝好， bzt

- bzt

---

我不是核心图形专家，但CGContextSetStrokePattern对您有用吗？ - Ben Flynn

不，我已经考虑过了，使用模式不可行，因为SetStrokeColor设置的颜色是动态的。每个计算出来的线段在i（线段）方面都有不同的颜色，每条完成的线段（当i == lineWidth时）会向垂直方向移动，然后绘制一条新线... - bzt

Answer 1

最近在游乐场玩，所以分享源代码。

extension CGFloat {
    static func random() -> CGFloat {
        return CGFloat(arc4random()) / CGFloat(UInt32.max)
    }
}

extension UIColor {
    static func random() -> UIColor {
        return UIColor(red:   .random(),
                       green: .random(),
                       blue:  .random(),
                       alpha: 1.0)
    }
}
let copy: CGPath = ...
let image = UIGraphicsImageRenderer(size: copy.boundingBoxOfPath.size).image { context in

    context.cgContext.setLineWidth(2)

    copy.applyWithBlock { element in
        switch element.pointee.type {
        case .moveToPoint:
            context.cgContext.move(to: element.pointee.points[0])
        case .addLineToPoint:
            context.cgContext.addLine(to: element.pointee.points[0])
            context.cgContext.setStrokeColor(UIColor.random().cgColor)
            context.cgContext.strokePath()
            context.cgContext.move(to: element.pointee.points[0])
        case .addQuadCurveToPoint:
            let controlPoint = element.pointee.points[0]
            let point = element.pointee.points[1]
            context.cgContext.addCurve(to: point, control1: controlPoint, control2: controlPoint)
            context.cgContext.setStrokeColor(UIColor.random().cgColor)
            context.cgContext.strokePath()
            context.cgContext.move(to: point)
        case .addCurveToPoint:
            let controlPoint1 = element.pointee.points[0]
            let controlPoint2 = element.pointee.points[1]
            let point = element.pointee.points[2]
            context.cgContext.addCurve(to: point, control1: controlPoint1, control2: controlPoint2)
            context.cgContext.setStrokeColor(UIColor.random().cgColor)
            context.cgContext.strokePath()
            context.cgContext.move(to: point)
        case .closeSubpath:
            context.cgContext.setStrokeColor(UIColor.random().cgColor)
            context.cgContext.strokePath()
        }
    }
}

- Kirow