绘制UIView的Radial Gradient iOS上半部分区域

Question

func drawRadialGradient(context:CGContext , rect:CGRect , startColor:UIColor , endColor:UIColor){

    let colorSpace = CGColorSpaceCreateDeviceRGB()
    let colorComponents = [startColor.cgColor,endColor.cgColor] as CFArray
    let locations:[CGFloat] = [0.0,1.0]
    context.saveGState()
    if let gradient = CGGradient.init(colorsSpace: colorSpace, colors: colorComponents, locations: locations) {



        context.drawRadialGradient(gradient, startCenter: CGPoint(x:rect.midX,y:0), startRadius: 0, endCenter: CGPoint(x:rect.midX,y:0), endRadius: rect.midX, options: .drawsBeforeStartLocation)


    }
    context.restoreGState()
}

上面的代码有rect 0,0，width，totalViewheight / 2.0。即浅橙色区域。其中totalViewheight = 40.0

lightOrangeRect = CGRectMake（0,0，width，totalViewheight / 2.0） 即（0,0,414,20）

I want to draw a radial gradient touching points 
1) 0,0 i.e (0,0)
2) lightOrangeRect/2.0, lightOrangeRect.height i.e (207,20)
3) lightOrangeRect, 0 i.e (414,0)

因此，在上半部分区域（浅橙色区域）给出弧线的光泽效果。

Answer 1

context.drawRadialGradient

在这里不起作用，因为它涉及计算中心，对于通过这些点的圆。

我发现以下解决方案适合我。绘制路径，剪切它然后我们在其中绘制线性渐变。

代码如下所示。

func drawRadialGradient(context:CGContext,rect:CGRect,startColor:UIColor , endColor:UIColor){
    context.saveGState()

    context.beginPath()
    context.move(to: CGPoint(x: rect.maxX, y: 0))
    context.addQuadCurve(to: CGPoint.zero, control: CGPoint(x: rect.midX, y: rect.maxY))
    context.closePath()
    context.clip()
    //...Your....drawLinearGradient...code here.
    context.restoreGState()

}

取得了以下成果。