如何将 CAGradientLayer 添加到 CAShapeLayer？
Posted
技术标签:
【中文标题】如何将 CAGradientLayer 添加到 CAShapeLayer？【英文标题】：How to Add a CAGradientLayer to a CAShapeLayer? 【发布时间】：2015-08-20 04:31:42 【问题描述】：我正在尝试将 CAGradientLayer 添加到 CAShapeLayer，但渐变不符合图层的形状。相反，渐变采用 UIView 本身的形状。我最初尝试使用 UIBezierPath 进行此操作，但它也不起作用。我正在尝试在我的形状中添加渐变。
override func drawRect(rect: CGRect)
let bounds = CGRect(x: 0, y: 0, width: self.bounds.width, height: self.bounds.height)
let center = self.center
let path = CAShapeLayer()
path.bounds = bounds
path.position = CGPoint(x: center.x, y: center.y)
//path.backgroundColor = UIColor.redColor().CGColor
path.cornerRadius = 20
//self.layer.addSublayer(path)
let gradientLayer = CAGradientLayer()
gradientLayer.frame = path.bounds
gradientLayer.colors = [cgColorForRed(209.0, green: 0.0, blue: 0.0),
cgColorForRed(255.0, green: 102.0, blue: 34.0),
cgColorForRed(255.0, green: 218.0, blue: 33.0),
cgColorForRed(51.0, green: 221.0, blue: 0.0),
cgColorForRed(17.0, green: 51.0, blue: 204.0),
cgColorForRed(34.0, green: 0.0, blue: 102.0),
cgColorForRed(51.0, green: 0.0, blue: 68.0)]
gradientLayer.startPoint = CGPoint(x:0,y:0)
gradientLayer.endPoint = CGPoint(x:0, y:1)
path.insertSublayer(gradientLayer, atIndex: 1)
self.layer.addSublayer(path)
func cgColorForRed(red: CGFloat, green: CGFloat, blue: CGFloat ) -> AnyObject
return UIColor(red: red/255.0, green: green/255.0, blue: blue/255.5, alpha: 1.0).CGColor as AnyObject
最初我将路径定义为带有圆角的矩形的 UIBezierPath，我希望用渐变填充它：
let insetRect = CGRectInset(rect, lineWidth / 2, lineWidth / 2)
let path = UIBezierPath(roundedRect: insetRect, cornerRadius: 10)
fillColor.setFill()
path.fill()
path.lineWidth = self.lineWidth
UIColor.blackColor().setStroke()
path.stroke()
根据 Larcerax 的回复编辑：
class Thermometer: UIView
//@IBInspectable var fillColor: UIColor = UIColor.greenColor()
let lineWidth: CGFloat = 2
override func drawRect(rect: CGRect)
let context = UIGraphicsGetCurrentContext()
let svgid = CGGradientCreateWithColors(CGColorSpaceCreateDeviceRGB(), [cgColorForRed(209.0, green: 0.0, blue: 0.0),
cgColorForRed(255.0, green: 102.0, blue: 34.0),
cgColorForRed(255.0, green: 218.0, blue: 33.0),
cgColorForRed(51.0, green: 221.0, blue: 0.0),
cgColorForRed(17.0, green: 51.0, blue: 204.0),
cgColorForRed(34.0, green: 0.0, blue: 102.0),
cgColorForRed(51.0, green: 0.0, blue: 68.0)], [0,1])
CGContextSaveGState(context)
let insetRect = CGRectInset(rect, lineWidth / 2, lineWidth / 2)
let path = UIBezierPath(roundedRect: insetRect, cornerRadius: 10)
path.addClip()
CGContextDrawLinearGradient(context, svgid, CGPoint(x: 0, y: path.bounds.height),
CGPoint(x: path.bounds.width, y: path.bounds.height),
UInt32(kCGGradientDrawsBeforeStartLocation) | UInt32(kCGGradientDrawsAfterEndLocation))
CGContextRestoreGState(context)
【问题讨论】：
【参考方案1】：您可以尝试以下设置以生成以下形状，这只是向您展示设置的示例，但应该这样做：
let context = UIGraphicsGetCurrentContext()
let gradientColor3 = UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1.000)
let gradientColor4 = UIColor(red: 0.000, green: 1.000, blue: 0.000, alpha: 1.000)
let sVGID_1_2 = CGGradientCreateWithColors(CGColorSpaceCreateDeviceRGB(), [gradientColor3.CGColor, gradientColor4.CGColor], [0, 1])
CGContextSaveGState(context)
CGContextTranslateCTM(context, 198.95, 199.4)
CGContextRotateCTM(context, -30 * CGFloat(M_PI) / 180)
var polygonPath = UIBezierPath()
polygonPath.moveToPoint(CGPointMake(0, -145.95))
polygonPath.addLineToPoint(CGPointMake(126.4, -72.98))
polygonPath.addLineToPoint(CGPointMake(126.4, 72.97))
polygonPath.addLineToPoint(CGPointMake(0, 145.95))
polygonPath.addLineToPoint(CGPointMake(-126.4, 72.98))
polygonPath.addLineToPoint(CGPointMake(-126.4, -72.97))
polygonPath.closePath()
CGContextSaveGState(context)
polygonPath.addClip()
CGContextDrawLinearGradient(context, sVGID_1_2,
CGPointMake(-126.4, -72.97),
CGPointMake(126.41, 72.99),
UInt32(kCGGradientDrawsBeforeStartLocation) | UInt32(kCGGradientDrawsAfterEndLocation))
CGContextRestoreGState(context)
制作这个：
如果这不起作用，请告诉我，我会尝试修复它以使其正常工作。
另外，这里只是一个简单的矩形：
let context = UIGraphicsGetCurrentContext()
let gradientColor = UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1.000)
let gradientColor2 = UIColor(red: 0.988, green: 0.933, blue: 0.129, alpha: 1.000)
let gradientColor3 = UIColor(red: 1.000, green: 0.000, blue: 1.000, alpha: 1.000)
let sVGID_1_3 = CGGradientCreateWithColors(CGColorSpaceCreateDeviceRGB(), [gradientColor.CGColor, gradientColor2.CGColor, gradientColor3.CGColor], [0, 0.43, 1])
let rectanglePath = UIBezierPath(rect: CGRectMake(68, 28, 78.4, 78.4))
CGContextSaveGState(context)
rectanglePath.addClip()
CGContextDrawLinearGradient(context, sVGID_1_3,
CGPointMake(68, 67.19),
CGPointMake(146.38, 67.19),
UInt32(kCGGradientDrawsBeforeStartLocation) | UInt32(kCGGradientDrawsAfterEndLocation))
CGContextRestoreGState(context)
这里有一个功能可以尝试，你必须弄乱颜色，但你可以输入一个框架：
class func drawStuff(#frame: CGRect)
let context = UIGraphicsGetCurrentContext()
let gradientColor = UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1.000)
let gradientColor2 = UIColor(red: 0.988, green: 0.933, blue: 0.129, alpha: 1.000)
let gradientColor3 = UIColor(red: 1.000, green: 0.000, blue: 1.000, alpha: 1.000)
let sVGID_1_4 = CGGradientCreateWithColors(CGColorSpaceCreateDeviceRGB(), [gradientColor.CGColor, gradientColor2.CGColor, gradientColor3.CGColor], [0, 0.43, 1])
let rectangleRect = CGRectMake(frame.origin.x, frame.origin.y, frame.size.width, frame.size.height)
let rectanglePath = UIBezierPath(rect: rectangleRect)
CGContextSaveGState(context)
rectanglePath.addClip()
CGContextDrawLinearGradient(context, sVGID_1_4, CGPointMake(rectangleRect.minX, rectangleRect.midY),CGPointMake(rectangleRect.maxX, rectangleRect.midY), 0)
CGContextRestoreGState(context)
【讨论】：
这很好用，尽管当我启动模拟器并单击形状时它会表现出奇怪的行为，它会改变颜色，有时渐变会消失而留下轮廓。我目前没有segues。也许这是我的自动布局约束？ 这很奇怪，我看看能不能测试一下 废话，我两次调用“CGContextRestoreGState(context)”，删除第二次，不确定这是否重要 所以，单独尝试矩形形状，它非常简化，是的，您的约束可能会导致和问题 我以为你不是故意的。【参考方案2】：或者你可以使用我自己写的这个:) https://github.com/BilalReffas/SwiftyGradient
【讨论】：
【参考方案3】：Swift 4 版本的来自@Loxx answer above 的第一个形状，它产生以下输出：
.
private func drawShape()
guard let context = UIGraphicsGetCurrentContext() else
print("No context, handle me")
return
let gradientColor3 = UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1.000)
let gradientColor4 = UIColor(red: 0.000, green: 1.000, blue: 0.000, alpha: 1.000)
guard let sVGID_1_2 = CGGradient(colorsSpace: CGColorSpaceCreateDeviceRGB(), colors: [gradientColor3.cgColor, gradientColor4.cgColor] as CFArray, locations: [0, 1]) else
print("No gradient, handle me")
context.restoreGState()
return
context.saveGState()
context.translateBy(x: 198.95, y: 199.4)
context.rotate(by: -30 * CGFloat(Double.pi) / 180)
let polygonPath = UIBezierPath()
polygonPath.move(to: CGPoint(x: 0, y: -145.95))
polygonPath.addLine(to: CGPoint(x: 126.4, y: -72.98))
polygonPath.addLine(to: CGPoint(x: 126.4, y: 72.97))
polygonPath.addLine(to: CGPoint(x: 0, y: 145.95))
polygonPath.addLine(to: CGPoint(x: -126.4, y: 72.98))
polygonPath.addLine(to: CGPoint(x: -126.4, y: -72.97))
polygonPath.close()
context.saveGState()
polygonPath.addClip()
context.drawLinearGradient(sVGID_1_2,
start: CGPoint(x: -126.4, y: -72.97),
end: CGPoint(x: 126.41, y: 72.99),
options: [.drawsBeforeStartLocation, .drawsAfterEndLocation])
context.restoreGState()
我发布它是因为基本上每一行在转换为 Swift 4 时都发生了变化，并且需要一段时间来转换它以检查它是否有效。
【讨论】：
以上是关于如何将 CAGradientLayer 添加到 CAShapeLayer？的主要内容，如果未能解决你的问题，请参考以下文章
如何将 CAGradientLayer 添加到 UIButton
Objective C - CAGradientLayer 覆盖 UILabel 中的文本？
如何在具有组合布局的新集合视图中将 CAGradientLayer 添加到 UIBackgroundConfiguration？