2014-01-17 179 views
4

我能夠通過像素如下如何逐個像素繪製一個圓圈?

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++; 
    } 

這裏的drawRect是的CGRect和點是我使用的像素畫像素

我遍歷這個,找到一個正方形的CGPoint繪製一個正方形像素被製造。這個正方形用每個像素填充,所以它不會畫出帶邊框的正方形,但它包含正方形內的所有像素。

我想要同樣的事情,但圓(實心圓的像素)。

我該如何做到這一點?

+3

遍歷在[柱座標系]的角度(http://en.wikipedia.org/wiki/Cylindrical_coordinate_system)和翻譯的每個點成笛卡爾座標(x和y) –

回答

0
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++; 
} 

這將繪製一個橢圓與您在問題中的矩形相同的中心。

+0

莫非你,請讓它可讀? – Tricertops

+0

好吧,我添加了一些末端和空格,並簡化了我的公式。 – Miroslav

+0

這不起作用,因爲它繪製兩條平行線而不是圓圈 – Heena

1

覆蓋與下面的代碼你的drawRect:

你需要採取的5個後事:

SIDE_WEITH =圈的寬度,

Color constants

_r =紅

_g =綠色

_b =藍

_a =阿爾法

並設置進度根據自己的需要:_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's 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's 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's 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's 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];*/ 
} 
+0

我需要逐個像素地繪製它。這就是爲什麼我需要循環。在我的情況下,CGContext不是必需的 – Heena

+0

您可以根據像素設置進度,這裏的進度是從0.0到1.0,例如0.5半圈。你可以逐個像素圈。 – Devang