代码之家  ›  专栏  ›  技术社区  ›  Mumphus

如何用梯度做UIBezierPath?[副本]

  •  0
  • Mumphus  · 技术社区  · 6 年前

    我用CALayer对象设置了一个相对直接的进度视图实现。进度视图本身是UIView的一个子视图。

            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)
    

    我现在要做的是给progressinglayer添加一个渐变,这个渐变跟随(或弯曲)路径。我已经成功地为填充添加了线性渐变,但不仅仅是路径。

    以下是我想要的效果示例:

    enter image description here

    到目前为止,我所找到的所有东西都需要一些额外的步骤,包括CoreGraphics和CGContext,这些步骤不太适合我的实现。任何帮助都很好,谢谢!

    0 回复  |  直到 10 年前
        1
  •  7
  •   matt    10 年前

    我要做的是画一个渐变层,然后在上面画一个黑色的层,去掉弧线。

    enter image description here

    下面是生成它的代码:

    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 . 这个例子的目的仅仅是说明如何能够“擦除”黑色层中的一个弧,从而揭示隐藏在它后面的渐变,从而显示出用渐变绘制的效果。