影付きグラデーション円を描く

Question

グラデーション円を影で描きたい。 これは私が欲しいものです：

をそして、これは私が得るものです：

ここで私が試したコードですが、それが唯一の影なしグラデーション円を描きます。

誰かがCGContextSetShadowWithColorとCGContextDrawLinearGradientと一緒に働く方法を助けるか、説明することができますか？その円の上に勾配を描く第次いでシャドウ黒円を描くことによって解決

override func drawRect(rect: CGRect) { 
    // context 
    let context = UIGraphicsGetCurrentContext() 
    // value 
    let centerX = rect.width/2.0 
    let centerY = rect.height/2.0 
    let radius = rect.width * 0.33 
    // colors 
    let shadowColor = UIColor(white: 0.0, alpha: 0.8)   
    // gradient 
    CGContextSaveGState(context) 

    CGContextSetShadowWithColor(
     context, 
     CGSizeMake(0, 0), 
     10.0, 
     shadowColor.CGColor 
    ) 

    let ellipseRect = CGRectMake(centerX - radius/2, centerY - radius/2, radius, radius) 
    CGContextAddEllipseInRect(context, ellipseRect) 
    CGContextClip(context) 


    let colorSpace = CGColorSpaceCreateDeviceRGB() 
    let colors: [CGFloat] = [ 
     // rgba 
     44.0/255.0, 61.0/255.0, 96.0/255.0, 1.0, 
     09.0/255.0, 18.0/255.0, 30.0/255.0, 1.0 
    ] 
    let gradient: CGGradientRef = CGGradientCreateWithColorComponents(colorSpace, colors, nil, 2)! 
    let gradientStart: CGPoint = CGPointMake(centerX, centerY - radius/2); 
    let gradientEnd: CGPoint = CGPointMake(centerX, centerY + radius/2); 
    CGContextDrawLinearGradient(context, gradient, gradientStart, gradientEnd, .DrawsBeforeStartLocation) 

    CGContextRestoreGState(context) 
} 

Answer 1

。ここで

コードです：

override func drawRect(rect: CGRect) { 
    if let context = UIGraphicsGetCurrentContext() { 
     // values 
     let centerX = rect.width/2.0 
     let centerY = rect.height/2.0 
     let radius = rect.width * 0.33 
     // colors 
     let shadowColor = UIColor(white: 0.0, alpha: 0.8) 
     // circle in center with shadow 
     let ellipseRect = CGRectMake(centerX - radius/2, centerY - radius/2, radius, radius) 
     CGContextSaveGState(context) 
     CGContextSetShadowWithColor(
      context, 
      CGSizeMake(0, 0), 
      10.0, 
      shadowColor.CGColor 
     ) 
     CGContextFillEllipseInRect(context, ellipseRect) 
     CGContextRestoreGState(context) 
     // gradient 
     let colors: [CGFloat] = [ 
      // rgba 
      44.0/255.0, 61.0/255.0, 96.0/255.0, 1.0, 
      09.0/255.0, 18.0/255.0, 30.0/255.0, 1.0 
     ] 
     CGContextSaveGState(context) 
     let colorSpace = CGColorSpaceCreateDeviceRGB() 
     let gradient: CGGradientRef = CGGradientCreateWithColorComponents(colorSpace, colors, nil, 2)! 
     CGContextAddEllipseInRect(context, ellipseRect) 
     CGContextClip(context) 
     let gradientStart: CGPoint = CGPointMake(centerX, centerY - radius/2); 
     let gradientEnd: CGPoint = CGPointMake(centerX, centerY + radius/2); 
     CGContextDrawLinearGradient(context, gradient, gradientStart, gradientEnd, .DrawsBeforeStartLocation) 
     CGContextRestoreGState(context) 
    } 
} 

Answer 2

同じコード、スウィフト3互換

override func draw(_ rect: CGRect) { 
    if let context = UIGraphicsGetCurrentContext() { 
     // values 
     let centerX = rect.width/2.0 
     let centerY = rect.height/2.0 
     let radius = rect.width * 0.33 
     // colors 
     let shadowColor = UIColor(white: 0.0, alpha: 0.8) 
     // circle in center with shadow 
     let ellipseRect = CGRect(x: centerX - radius/2, y: centerY - radius/2, width: radius, height: radius) 
     context.saveGState() 
     context.setShadow(
      offset: CGSize(width: 0, height: 0), 
      blur: 10.0, 
      color: shadowColor.cgColor 
     ) 
     context.fillEllipse(in: ellipseRect) 
     context.restoreGState() 
     // gradient 
     let colors: [CGFloat] = [ 
      // rgba 
      44.0/255.0, 61.0/255.0, 96.0/255.0, 1.0, 
      09.0/255.0, 18.0/255.0, 30.0/255.0, 1.0 
     ] 
     context.saveGState() 
     let colorSpace = CGColorSpaceCreateDeviceRGB() 
     let gradient: CGGradient = CGGradient(colorSpace: colorSpace, colorComponents: colors, locations: nil, count: 2)! 
     context.addEllipse(in: ellipseRect) 
     context.clip() 
     let gradientStart: CGPoint = CGPoint(x: centerX, y: centerY - radius/2); 
     let gradientEnd: CGPoint = CGPoint(x: centerX, y: centerY + radius/2); 
     context.drawLinearGradient(gradient, start: gradientStart, end: gradientEnd, options: .drawsBeforeStartLocation) 
     context.restoreGState() 
    } 
}