Why aren't my ellipses in the center?

Question

I'm trying to have several ellipses centered with different sizes and different rotations around their center but I'm getting this:

My playground code so far:

import UIKit

func radians(x: Int)->CGFloat{
    let pi = M_PI
    return CGFloat(pi * Double(x) / 180.0)
}

let size = CGSize(width: 600, height: 600)
UIGraphicsBeginImageContextWithOptions(size, true, 0.0)

let context = UIGraphicsGetCurrentContext()

CGContextSetStrokeColorWithColor(context, UIColor.whiteColor().CGColor);

let center:CGPoint=CGPointMake(size.width/2, size.height/2)

CGContextSetLineWidth(context, 2.0);

var step=0
while step<12{
var width:CGFloat = 25.0+CGFloat(step)*20.0
var height:CGFloat = 100.0+CGFloat(step)*20.0
CGContextRotateCTM( context, radians( 10 ) ) ;
var circle:CGRect = CGRectMake(center.x-width/2,center.y-height/2,width,height);


CGContextAddEllipseInRect(context, circle);

CGContextStrokePath(context);
    step++
}

let image = UIGraphicsGetImageFromCurrentImageContext()


UIGraphicsEndImageContext()

@LeoDabus CGRectMake(center.x-width/2,center.y-height/2,width,height); is exactly that, isn't it? — Leonardo Marques, Jan 31 '16 at 01:30
It's a little unclear what you're aiming for. Can you include a sketch of what it should look like? — Craig Siemens, Jan 31 '16 at 02:25

Leonardo Marques · Answer 1 · 2016-01-31T08:46:08.970

The expected result was:

And I found a solution after SEVERAL tries.

import UIKit

func radians(x: Int)->CGFloat{
    let pi = M_PI
    return CGFloat(pi * Double(x) / 180.0)
}

let size = CGSize(width: 300, height: 300)
UIGraphicsBeginImageContextWithOptions(size, true, 0.0)

let context = UIGraphicsGetCurrentContext()

CGContextSetStrokeColorWithColor(context, UIColor.whiteColor().CGColor);

let center:CGPoint=CGPointMake(size.width/2, size.height/2)

CGContextSetLineWidth(context, 2.0);
CGContextTranslateCTM(context, center.x, center.y)
var step=0
while step<12{
var width:CGFloat = 30.0+CGFloat(step)*CGFloat(step)
var height:CGFloat = 50.0+CGFloat(step)*CGFloat(2*step)

var circle:CGRect = CGRectMake(-width/2,-height/2,width,height)
    CGContextRotateCTM( context, radians(step))

CGContextAddEllipseInRect(context, circle);

CGContextStrokePath(context);
    step++
}

let image = UIGraphicsGetImageFromCurrentImageContext()

UIGraphicsEndImageContext()

you ended up using the frame I told you X minus half width and Y minus half height `CGRectMake(-width/2,-height/2,width,height)` — Leo Dabus, Jan 31 '16 at 16:03
You had also to use CGContextTranslateCTM to move the rotation center to the center of the view. You should post an explanation with your new code. — Leo Dabus, Jan 31 '16 at 16:21

Why aren't my ellipses in the center?

1 Answers1