用渐变笔画绘制一个圆

I am working on a task in which I must create a circle with no fill, but a gradient stroke. For reference, here is the end result I am after;

我正在开展一项任务,我必须在其中创建一个没有填充但是渐变笔划的圆。作为参考,这是我追求的最终结果;

Given other occurrences with the app, I am drawing my circle like so;

鉴于应用程序的其他事件,我正在画我的圈子;

let c = UIGraphicsGetCurrentContext()!
c.saveGState()
let clipPath: CGPath = UIBezierPath(roundedRect: converted_rect, cornerRadius: converted_rect.width / 2).cgPath
c.addPath(clipPath)
c.setLineWidth(9.0)
c.setStrokeColor(UIColor.blue.cgColor)
c.closePath()
c.strokePath()
c.restoreGState()
let result = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()

This results in a circle with a blue stroke. Despite many searches around SO, I'm struggling to figure out how I'd replace that setStrokeColor with a gradient, rather than a blue color. My most success came from creating a CAGradientLayer, then masking it with a CAShapeLayer created from the path, but I was only able to create a filled circle, not a hollow circle.

这导致具有蓝色笔划的圆圈。尽管在SO周围进行了很多搜索,我仍然在努力弄清楚如何用渐变而不是蓝色替换setStrokeColor。我最大的成功来自于创建一个CAGradientLayer,然后使用从路径创建的CAShapeLayer来屏蔽它,但我只能创建一个实心圆而不是空心圆。

Thank you!

1 个解决方案

#1

The basic idea is to use your path as a clipping path, then draw the gradient.

基本思想是使用您的路径作为剪切路径,然后绘制渐变。

let c = UIGraphicsGetCurrentContext()!
let clipPath: CGPath = UIBezierPath(ovalIn: converted_rect).cgPath

c.saveGState()
c.setLineWidth(9.0)
c.addPath(clipPath)
c.replacePathWithStrokedPath()
c.clip()

// Draw gradient
let colors = [UIColor.blue.cgColor, UIColor.red.cgColor]
let offsets = [ CGFloat(0.0), CGFloat(1.0) ]
let grad = CGGradient(colorsSpace: CGColorSpaceCreateDeviceRGB(), colors: colors as CFArray, locations: offsets)
let start = converted_rect.origin
let end = CGPoint(x: converted_rect.maxX, y: converted_rect.maxY)
c.drawLinearGradient(grad!, start: start, end: end, options: [])

c.restoreGState()

let result = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()

Setup a CGGradient first with the desired colors. Then for a linear gradient you use drawLinearGradient. For a radial gradient, use drawRadialGradient.

首先使用所需的颜色设置CGGradient。然后,对于线性渐变,您使用drawLinearGradient。对于径向渐变,请使用drawRadialGradient。

#1