绘制 UIView 的径向渐变 iOS 上半部分区域答案

【问题标题】：Draw Radial Gradient iOS top half area of a UIView绘制 UIView 的径向渐变 iOS 上半部分区域
【发布时间】：2017-01-01 07:08:33
【问题描述】：

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)

所以，为了在上半部分区域（浅橙色区域）赋予圆弧的光泽效果。

【问题讨论】：

标签： ios swift cgcontext radial-gradients

【解决方案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()

}

取得了以下结果。

【讨论】：