2017-01-01 47 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