2017-01-01 18 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() 
} 

上記のコードは、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

関連する問題