Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to draw a simple rounded rect in swift (rounded corners)

Tags:

I managed to draw a rect :-) But I don't know how to draw a rounded rect.

Can someone help me out with the following code how to round the rect?

let canvas = UIGraphicsGetCurrentContext() rec = CGRectMake(0, 0, 40, 40);  //var maskPath = UIBezierPath(roundedRect: rec, byRoundingCorners: .BottomLeft | .BottomRight, cornerRadii: CGSize(width: 3, height: 3))  CGContextAddRect(canvas, rec); CGContextFillPath(canvas); 
like image 918
mcfly soft Avatar asked May 21 '15 08:05

mcfly soft


People also ask

How do I round the corners of an image in Swift?

Setting the corner radius to 100 will make the image view completely rounded. Try different corner radius like 10, 20, 30, 40 to get image corners of different radius.

Which method is used for drawing rounded rectangle?

degToRad( ) method from Recipe 5.12: rotation = Math. degToRad(rotation); The length of the three imaginary lines used for drawing the rounded corners, as shown in Figure 4-2, are calculated using the Pythagorean theorem, as discussed in Recipe 5.13.


2 Answers

//Put this code in ur drawRect

Objective - C

 - (void)drawRect:(CGRect)rect {  CGContextRef ctx = UIGraphicsGetCurrentContext(); CGContextSaveGState(ctx);    CGPathRef clippath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(x,y, width, height) cornerRadius:6].CGPath; CGContextAddPath(ctx, clippath);  CGContextSetFillColorWithColor(ctx, self.color.CGColor);  CGContextClosePath(ctx); CGContextFillPath(ctx);  [self.color set];   [_path closePath]; // Implicitly does a line between p4 and p1 [_path fill]; // If you want it filled, or... [_path stroke]; // ...if you want to draw the outline. CGContextRestoreGState(ctx); } 

Swift 3

func drawRect(rect : CGRect) { // Size of rounded rectangle let rectWidth = rect.width let rectHeight = rect.height  // Find center of actual frame to set rectangle in middle let xf:CGFloat = (self.frame.width  - rectWidth)  / 2 let yf:CGFloat = (self.frame.height - rectHeight) / 2  let ctx: CGContext = UIGraphicsGetCurrentContext()! ctx.saveGState()  let rect = CGRect(x: xf, y: yf, width: rectWidth, height: rectHeight) let clipPath: CGPath = UIBezierPath(roundedRect: rect, cornerRadius: rectCornerRadius).cgPath  ctx.addPath(clipPath) ctx.setFillColor(rectBgColor.cgColor)     ctx.closePath() ctx.fillPath() ctx.restoreGState()  } 
like image 199
Mukesh Avatar answered Nov 15 '22 08:11

Mukesh


How to create a rounded corner rectangle using BezierPath

 var roundRect = UIBezierPath(roundedRect: <CGRect>, byRoundingCorners: <UIRectCorner>, cornerRadii: <CGSize>) 

Or for an example with values:

var roundRect = UIBezierPath(roundedRect: CGRectMake(0, 0, 100, 100), byRoundingCorners:.AllCorners, cornerRadii: CGSizeMake(16.f, 16.f)) 

Swift 5

var roundRect = UIBezierPath(roundedRect: CGRect(x: 0, y: 0, width: 100, height: 100), byRoundingCorners:.allCorners, cornerRadii: CGSize(width: 16.0, height: 16.0)) 
like image 22
Icaro Avatar answered Nov 15 '22 08:11

Icaro