我有一个使用 CALayer 对象设置的进度 View 的相对直接的实现。进度 View 本身是 UIView 的 subview 。
这是设置进度环的代码:
self.progressRingLayer = CAShapeLayer()
let innerRect = CGRectInset(bounds, CGFloat(self.lineWidth) / 2, CGFloat(self.lineWidth) / 2)
let innerPath = UIBezierPath(ovalInRect: innerRect)
self.progressRingLayer.path = innerPath.CGPath
self.progressRingLayer.fillColor = UIColor.clearColor().CGColor
self.progressRingLayer.strokeColor = kProgressColor.CGColor
self.progressRingLayer.anchorPoint = CGPointMake(0.5, 0.5)
self.progressRingLayer.transform = CATransform3DRotate(self.progressRingLayer.transform, (CGFloat(M_PI))*1, 0, 0, 1)
self.progressRingLayer.lineCap = kCALineCapRound
self.progressRingLayer.lineWidth = CGFloat(self.lineWidth)
self.layer.addSublayer(self.progressRingLayer)
我现在想做的是向跟随(或弯曲)路径的 progressRingLayer 添加渐变。我已经成功地为填充添加了线性渐变,但不仅仅是路径。
这是我想要的效果的示例:
到目前为止,我发现的所有内容都需要使用 CoreGraphics 和 CGContext 进行一系列额外的步骤,这些步骤不太适合我的实现。任何帮助都会很棒,谢谢!
最佳答案
我会做的是绘制一个渐变图层,然后在该图层之上绘制一个黑色的图层,并删除圆弧。
这是我对您提供的图片的粗略尝试(我省略了中间的白色标签,但这很简单):
这是生成它的代码:
let r = CGRectMake(100,100,130,100)
let g = CAGradientLayer()
g.frame = r
let c1 = UIColor(
red: 151.0/255.0, green: 81.0/255.0, blue: 227.0/255.0, alpha: 1)
let c2 = UIColor(
red: 36.0/255.0, green: 176.0/255.0, blue: 233.0/255.0, alpha: 1)
g.colors = [c1.CGColor as AnyObject, c2.CGColor as AnyObject];
self.view.layer.addSublayer(g)
let percent = CGFloat(0.64) // percentage of circle
UIGraphicsBeginImageContextWithOptions(r.size, false, 0)
let con = UIGraphicsGetCurrentContext()
CGContextFillRect(con, CGRect(origin: CGPoint(), size: r.size))
CGContextSetLineWidth(con, 5)
CGContextSetLineCap(con, kCGLineCapRound)
CGContextSetBlendMode(con, kCGBlendModeClear)
let pi = CGFloat(M_PI)
CGContextAddArc(con, r.size.width/2.0, r.size.height/2.0, 30,
-pi/2.0, -pi/2.0 + percent*pi*2.0, 0)
CGContextStrokePath(con)
let im = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
let b = CALayer()
b.frame = r
b.contents = im.CGImage
self.view.layer.addSublayer(b)
渐变层(代码的第一部分)只是一个“服务建议”。如果这不是您想要的渐变,您可以设计自己的渐变。你可以在 Photoshop 中绘制它并使用图像作为渐变图层的内容。或者您可以使用第三方代码(例如 https://github.com/paiv/AngleGradientLayer)在代码中创建一个“角度”层。 .这个例子的目的只是为了展示如何“删除”黑色图层中的弧线以显示隐藏在它后面的渐变,从而看起来像是用渐变绘制的。
关于ios - Swift:沿贝塞尔路径渐变(使用 CALayers),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27931076/