2017-01-01 95 views
0
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绘制UIView的径向渐变iOS上半部分区域

lightOrangeRect = CGRectMake(0,0,宽度,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) 

因此,作为得到的圆弧的在光泽效果上半部分区域(浅橙色区域)。

enter image description here

回答

-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() 

} 

以下结果已经达到。

enter image description here