用渐变描边画一个圆

Posted 2023-02-23

【中文标题】用渐变描边画一个圆

【英文标题】：Drawing A Circle With Gradient Stroke

【发布时间】：2017-08-13 17:34:43

【问题描述】：

我正在处理一项任务，我必须创建一个没有填充但有渐变笔触的圆圈。供参考，这是我追求的最终结果；

鉴于该应用程序的其他情况，我正在画我的圆圈；

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

这会产生一个带有蓝色笔划的圆圈。尽管围绕 SO 进行了很多搜索，但我仍在努力弄清楚如何将 setStrokeColor 替换为渐变而不是蓝色。我最大的成功来自于创建一个CAGradientLayer，然后用从路径创建的CAShapeLayer 掩盖它，但我只能创建一个实心圆，而不是一个空心圆。

谢谢！

【问题讨论】：

在这种情况下，带有适当蒙版的渐变层是否有效？

@solenoid 我试过了，但效果有限。这让我得到了一个带有渐变的实心圆，但不是一个带有渐变笔触的圆。

你看过these search results吗？

嗯，面具是一种 2 路径 - 一个里面一个外面

@rmaddy 我有。我似乎无法转换逻辑的地方是如何在上下文中绘制任何类型的圆/渐变，而不是添加到视图的图层，这在我的情况下是不切实际的。

【参考方案1】：

基本思路是用你的路径作为剪切路径，然后绘制渐变。

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

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

【讨论】：

我已经尝试过了，但实际上没有绘制任何内容。线性渐变如何理解它与剪辑路径有任何关联？

一切都取决于您如何设置CGGradient 并使用drawLinearGradient 或drawRadialGradient 绘制它。

宾果游戏，@rmaddy！这非常有效。感谢您提供完整的答案，这正是我所追求的。你摇滚！

很好的答案！对我帮助很大！