ios - CoreGraphics - 绘制弧线描边

Question

我有一个UIBezierPath，它是一个弧线。我只想在图形上下文中绘制笔划(即圆弧的笔划，不包括连接圆弧终点和起点的线)

完成此操作后，我可以向上下文添加线性渐变，从而有效地在圆弧笔划上绘制渐变。

这是我的drawRect:

    let context = UIGraphicsGetCurrentContext()

    CGContextSaveGState(context)
    CGContextAddPath(context, _progressPathForProgress(_progressToDrawForProgress(progress)).CGPath)
    CGContextStrokePath(context)
    CGContextClip(context)

    let colours = [self.startColour.CGColor, self.endColour.CGColor]
    let colourSpace = CGColorSpaceCreateDeviceRGB()
    let colourLocations: [CGFloat] = [0.0, 1.0]

    let gradient = CGGradientCreateWithColors(colourSpace, colours, colourLocations)

    var startPoint = CGPoint.zeroPoint
    var endPoint = CGPoint(x: 0, y: bounds.height)
    CGContextDrawLinearGradient(context, gradient, startPoint, endPoint, CGGradientDrawingOptions.allZeros)

    CGContextRestoreGState(context)

但是这一切只是为我的整个 UIView 添加渐变。我哪里出错了？

Answer 1

路径需要闭合才能使剪裁工作。

如果您不想看到结束线，您可以将描边颜色设置为 UIColor.clearColor()，然后关闭路径。

CGContextSaveGState(context)
CGContextAddPath(context, _progressPathForProgress(_progressToDrawForProgress(progress)).CGPath)
CGContextStrokePath(context)

CGContextSetStrokeColorWithColor(context, UIColor.clearColor().CGColor)

// close the path, you will need to add some more points here, otherwise
// the end point is simply connected to the start point
CGPathCloseSubpath(...)

CGContextClip(context)

// draw the gradient

我将通过添加更多点来闭合路径 来解释我的意思。下面的图片是我的一个应用程序的屏幕截图，它是一个高度剖面图，在图形下方有一个渐变。

直接关闭路径会导致这种情况，这意味着渐变不会向下绘制到 x 轴:

为了正确地闭合路径，我从最后一个坐标 (x,y) 向下添加点到 x 轴 (x,0)，然后添加到 (0,0)，最后用第一个点闭合路径，就像这样:

我不想看到结束行，所以我在这里使用 UIColor.clearColor()。

希望你明白了。