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()。

希望你明白了。

CoreGraphics - 绘制弧线描边

CoreGraphics - Draw stroke of arc

core-graphics

ios

swift