How to draw a circle in pixels?

Question

I can draw a square pixel by pixel below

for(int i=0 ;i<drawbox.size.width/2;i++)
    {
        for (int j=0; j<drawbox.size.height/2; j++)
        {
                 Point.y++;
                 NSLog(@"point:%f,%f",Point.x,Point.y);  
        }
        Point.x++;
    }

Here drawrect is CGRect, and Point is CGPoint, which I use to draw pixel by pixel

I go over it and find the square to be done. This square is filled with every pixel, so it just does not draw a square with a border, but includes all the pixels in the square.

I want the same thing, but for a circle (filled circular pixels).

How can i achieve this?

Answer 1

Cancel drawRect with the following code:

You need to take care of 5 things:

SIDE_WEITH= Circle width

Color constants:

_r = Red

_g = Green

_b = Blue

_a = Alpha

"" : _progress

.

- (void)drawRect:(CGRect)rect
{
  [super drawRect:rect];

////    [image drawInRect:rect];

// find the radius and position for the largest circle that fits in the UIView frame.
int radius, x, y;
int offset = SIDE_WEITH;

// in case the given frame is not square (oblong) we need to check and use the shortest side as our radius.
CGRect frame = self.frame;
if (frame.size.width > frame.size.height) {
    radius = frame.size.height;
    // we want our circle to be in the center of the frame.
    int delta = frame.size.width - radius;
    x = delta/2 - 1;
    y = 0;
} else {
    radius = frame.size.width;
    int delta = frame.size.height - radius;
    y = delta/2 - 1;
    x = 0;
}

// store the largest circle position and radius in class variable.
_outerCircleRect = CGRectMake(x, y, radius, radius);
// store the inner circles rect, this inner circle will have a radius 10pixels smaller than the outer circle.
// we want to the inner circle to be in the middle of the outer circle.
//_innerCircleRect = CGRectMake(x+offset, y+offset, radius-2*offset , radius-2*offset);
_innerCircleRect = CGRectMake(x+offset, y+offset, radius-2*offset , radius-2*offset);

// get the drawing canvas (CGContext):
CGContextRef context = UIGraphicsGetCurrentContext();

// save the context previous state:
CGContextSaveGState(context);

// our custom drawing code will go here:

// Draw the gray background for our progress view:

// gradient properties:
CGGradientRef myGradient;
// You need tell Quartz your colour space (how you define colours), there are many colour spaces: RGBA, black&white...
CGColorSpaceRef myColorspace;
// the number of different colours
size_t num_locations = 3;
// the location of each colour change, these are between 0 and 1, zero is the first circle and 1 is the end circle, so 0.5 is in the middle.
CGFloat locations[3] = { 0.0, 0.5 ,1.0 };
// this is the colour components array, because we are using an RGBA system each colour has four components (four numbers associated with it).
CGFloat components[12] = {
    0.4, 0.4, 0.4, 0.9,    // Start colour
    0.9, 0.9, 0.9, 1.0, // middle colour
    0.4, 0.4, 0.4, 0.9
}; // End colour

myColorspace = CGColorSpaceCreateDeviceRGB();
myGradient = CGGradientCreateWithColorComponents (myColorspace, components,locations, num_locations);

// gradient start and end points
CGPoint myStartPoint, myEndPoint;
CGFloat myStartRadius, myEndRadius;
myStartPoint.x = _innerCircleRect.origin.x + _innerCircleRect.size.width/2;
myStartPoint.y = _innerCircleRect.origin.y + _innerCircleRect.size.width/2;
myEndPoint.x = _innerCircleRect.origin.x + _innerCircleRect.size.width/2;
myEndPoint.y = _innerCircleRect.origin.y + _innerCircleRect.size.width/2;
myStartRadius = _innerCircleRect.size.width/2 ;
myEndRadius = _outerCircleRect.size.width/2;

// draw the gradient.
/*CGContextDrawRadialGradient(context,
 myGradient,
 myStartPoint, myStartRadius, myEndPoint, myEndRadius, 0);
 CGGradientRelease(myGradient);*/

// draw outline so that the edges are smooth:

// set line width
//CGContextSetLineWidth(context, 1);
// set the colour when drawing lines R,G,B,A. (we will set it to the same colour we used as the start and end point of our gradient )
/*CGContextSetRGBStrokeColor(context, 0.4,0.4,0.4,0.9);

 // draw an ellipse in the provided rectangle
 CGContextAddEllipseInRect(context, _outerCircleRect);
 CGContextStrokePath(context);*/

/*CGContextAddEllipseInRect(context, _innerCircleRect);
 CGContextStrokePath(context);*/


// Draw the progress:

// First clip the drawing area:
// save the context before clipping
CGContextSaveGState(context);
CGContextMoveToPoint(context,
                     _outerCircleRect.origin.x + _outerCircleRect.size.width/2, // move to the top center of the outer circle
                     _outerCircleRect.origin.y +1); // the Y is one more because we want to draw inside the bigger circles.
// add an arc relative to _progress
CGContextAddArc(context,
                _outerCircleRect.origin.x + _outerCircleRect.size.width/2,
                _outerCircleRect.origin.y + _outerCircleRect.size.width/2,
                _outerCircleRect.size.width/2-1,
                -M_PI/2,
                (-M_PI/2 + _progress*2*M_PI), 0);
CGContextAddArc(context,
                _outerCircleRect.origin.x + _outerCircleRect.size.width/2,
                _outerCircleRect.origin.y + _outerCircleRect.size.width/2,
                _outerCircleRect.size.width/2 - 9,
                (-M_PI/2 + _progress*2*M_PI),
                -M_PI/2, 1);
// use clode path to connect the last point in the path with the first point (to create a closed path)
CGContextClosePath(context);
// clip to the path stored in context
CGContextClip(context);

// Progress drawing code comes here:

// set the gradient colours based on class variables.
CGFloat components2[12] = {  _r, _g, _b, _a, // Start color
    ((_r + 0.5 > 1) ? 1 : (_r+0.5) ) , ((_g + 0.5 > 1) ? 1 : (_g+0.5) ), ((_b + 0.5 > 1) ? 1 : (_b+0.5) ), ((_a + 0.5 > 1) ? 1 : (_a+0.5)),
    _r, _g, _b, _a }; // End color

myGradient = CGGradientCreateWithColorComponents (myColorspace, components2,locations, num_locations);

myStartPoint.x = _innerCircleRect.origin.x + _innerCircleRect.size.width/2;
myStartPoint.y = _innerCircleRect.origin.y + _innerCircleRect.size.width/2;
myEndPoint.x = _innerCircleRect.origin.x + _innerCircleRect.size.width/2;
myEndPoint.y = _innerCircleRect.origin.y + _innerCircleRect.size.width/2;
// set the radias for start and endpoints a bit smaller, because we want to draw inside the outer circles.
myStartRadius = _innerCircleRect.size.width/2;
myEndRadius = _outerCircleRect.size.width/2;

CGContextDrawRadialGradient(context,
                            myGradient,
                            myStartPoint, myStartRadius, myEndPoint, myEndRadius, 0);

// release myGradient and myColorSpace
CGGradientRelease(myGradient);
CGColorSpaceRelease(myColorspace);


// draw circle on the outline to smooth it out.

CGContextSetRGBStrokeColor(context, _r,_g,_b,_a);

// draw an ellipse in the provided rectangle
CGContextAddEllipseInRect(context, _outerCircleRect);
CGContextStrokePath(context);

CGContextAddEllipseInRect(context, _innerCircleRect);
CGContextStrokePath(context);


//restore the context and remove the clipping area.
CGContextRestoreGState(context);

// restore the context state when we are done with it:
CGContextRestoreGState(context);


/*CGPathRef circlePath = CGPathCreateMutable();
 CGPathAddEllipseInRect(circlePath , NULL , rect);
 CAShapeLayer *circle = [[CAShapeLayer alloc] init];
 circle.path = circlePath;
 circle.opacity = 0.5;
 [self.imageView.layer addSublayer:circle];
 CGPathRelease( circlePath );
 [circle release];*/
}

Answer 2

for (int i=0; i<drawbox.size.width/2; i++) {
    for (int j=(int)(-drawbox.size.height/4.0 * sqrt(1 - pow(4.0*i/drawbox.size.width - 1, 2)) + drawbox.size.height/4.0); 
             j<=(int)(drawbox.size.height/4.0 * sqrt(1 - pow(4.0*i/drawbox.size.width - 1, 2)) + drawbox.size.height/4.0); 
             j++) 
    {
         Point.y++;
         NSLog(@"point:%f,%f",Point.x,Point.y);  
    }
    tStartPoint.x++;
}

, .