Draw a simple circle uiimage
Solution 1
You need to include alpha channel into your bitmap: UIGraphicsBeginImageContextWithOptions(..., NO, ...)
if you want to see what is behind the corners.
Solution 2
Thanks for the Q&A! Swift code as below:
extension UIImage {
class func circle(diameter: CGFloat, color: UIColor) -> UIImage {
UIGraphicsBeginImageContextWithOptions(CGSizeMake(diameter, diameter), false, 0)
let ctx = UIGraphicsGetCurrentContext()
CGContextSaveGState(ctx)
let rect = CGRectMake(0, 0, diameter, diameter)
CGContextSetFillColorWithColor(ctx, color.CGColor)
CGContextFillEllipseInRect(ctx, rect)
CGContextRestoreGState(ctx)
let img = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return img
}
}
Swift 3 version provided by Schemetrical:
extension UIImage {
class func circle(diameter: CGFloat, color: UIColor) -> UIImage {
UIGraphicsBeginImageContextWithOptions(CGSize(width: diameter, height: diameter), false, 0)
let ctx = UIGraphicsGetCurrentContext()!
ctx.saveGState()
let rect = CGRect(x: 0, y: 0, width: diameter, height: diameter)
ctx.setFillColor(color.cgColor)
ctx.fillEllipse(in: rect)
ctx.restoreGState()
let img = UIGraphicsGetImageFromCurrentImageContext()!
UIGraphicsEndImageContext()
return img
}
}
Solution 3
Swift 3 & 4:
extension UIImage {
class func circle(diameter: CGFloat, color: UIColor) -> UIImage {
UIGraphicsBeginImageContextWithOptions(CGSize(width: diameter, height: diameter), false, 0)
let ctx = UIGraphicsGetCurrentContext()!
ctx.saveGState()
let rect = CGRect(x: 0, y: 0, width: diameter, height: diameter)
ctx.setFillColor(color.cgColor)
ctx.fillEllipse(in: rect)
ctx.restoreGState()
let img = UIGraphicsGetImageFromCurrentImageContext()!
UIGraphicsEndImageContext()
return img
}
}
Swift autocorrect is godly. Thanks to Valentin.
Solution 4
Xamarin.iOS sample:
public static UIImage CircleImage(nfloat diameter, UIColor color, bool opaque = false)
{
var rect = new CGRect(0, 0, diameter, diameter);
UIGraphics.BeginImageContextWithOptions(rect.Size, opaque, 0);
var ctx = UIGraphics.GetCurrentContext();
ctx.SaveState();
ctx.SetFillColor(color.CGColor);
ctx.FillEllipseInRect(rect);
ctx.RestoreState();
var img = UIGraphics.GetImageFromCurrentImageContext();
UIGraphics.EndImageContext();
return img;
}
Solution 5
I just want to add that the most simple and sexy way of drawing shapes and have them as rastered images (with transparent background) that I found is the way how Paul Hudson did it on his hackingwithswift.com website.
Snippet from the site:
let renderer = UIGraphicsImageRenderer(size: CGSize(width: 512, height: 512))
let img = renderer.image { ctx in
ctx.cgContext.setFillColor(UIColor.red.cgColor)
ctx.cgContext.setStrokeColor(UIColor.green.cgColor)
ctx.cgContext.setLineWidth(10)
let rectangle = CGRect(x: 0, y: 0, width: 512, height: 512)
ctx.cgContext.addEllipse(in: rectangle)
ctx.cgContext.drawPath(using: .fillStroke)
}
Mattia Lancieri
Updated on July 10, 2022Comments
-
Mattia Lancieri almost 2 years
I try to make a 20x20 UIImage with a simple blue circle. I try with this function, but the result is a blue circle in a black square. How do I remove the black square around the circle?
Function:
+ (UIImage *)blueCircle { static UIImage *blueCircle = nil; static dispatch_once_t onceToken; dispatch_once(&onceToken, ^{ UIGraphicsBeginImageContextWithOptions(CGSizeMake(20.f, 20.f), YES, 0.0f); CGContextRef ctx = UIGraphicsGetCurrentContext(); CGContextSaveGState(ctx); CGRect rect = CGRectMake(0, 0, 20, 20); CGContextSetFillColorWithColor(ctx, [UIColor cyanColor].CGColor); CGContextFillEllipseInRect(ctx, rect); CGContextRestoreGState(ctx); blueCircle = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); }); return blueCircle; }
actual result:
-
Schemetrical over 7 yearsSwift 3 code below for others. Thanks for the solution by the way.