画一个圆的一部分
对于一个iPhone应用程序，我想绘制一个圆圈，这只是一个X填充百分比。
像这样的东西：
计算半径，度数或弧度没有问题，这是没有问题的。 另外画圆也已经完成了。 但是，如何让iPhone SDK绘制填充的部分。
我可以绘制一个大小的矩形，但不是一个圆的一部分。
我只是想在一个正常的情况下画出来。
希望有人能在这里给我指点。
使用CGContext的弧函数：
CGContextAddArc(context, centerX, centerY, radius, startAngleRadians, endAngleRadians, clockwise ? 1 : 0);
请参阅CGContextAddArc()的文档。
很多人已经向你展示了如何在Core Graphics中完成这个工作，但是也可以用Core Animation来完成，这样可以很容易地将饼graphics状的百分比animation化。
下面的代码将创build环和部分填充图层（即使你说你已经可以绘制环），因为它很好地使用相同的方法绘制环和饼形状。
如果您为pieShape图层的strokeStart或strokeEnd属性设置了animation， 则将使用百分比animation。 和所有的Core Animation代码一样，您需要将QuartzCore.framework添加到您的项目中，并在代码中包含<QuartzCore/QuartzCore.h> 。
// Create a white ring that fills the entire frame and is 2 points wide. // Its frame is inset 1 point to fit for the 2 point stroke width CGFloat radius = MIN(self.frame.size.width,self.frame.size.height)/2; CGFloat inset = 1; CAShapeLayer *ring = [CAShapeLayer layer]; ring.path = [UIBezierPath bezierPathWithRoundedRect:CGRectInset(self.bounds, inset, inset) cornerRadius:radius-inset].CGPath; ring.fillColor = [UIColor clearColor].CGColor; ring.strokeColor = [UIColor whiteColor].CGColor; ring.lineWidth = 2; // Create a white pie-chart-like shape inside the white ring (above). // The outside of the shape should be inside the ring, therefore the // frame needs to be inset radius/2 (for its outside to be on // the outside of the ring) + 2 (to be 2 points in). CAShapeLayer *pieShape = [CAShapeLayer layer]; inset = radius/2 + 2; // The inset is updated here pieShape.path = [UIBezierPath bezierPathWithRoundedRect:CGRectInset(self.bounds, inset, inset) cornerRadius:radius-inset].CGPath; pieShape.fillColor = [UIColor clearColor].CGColor; pieShape.strokeColor = [UIColor whiteColor].CGColor; pieShape.lineWidth = (radius-inset)*2; // Add sublayers // NOTE: the following code is used in a UIView subclass (thus self is a view) // If you instead chose to use this code in a view controller you should instead // use self.view.layer to access the view of your view controller. [self.layer addSublayer:ring]; [self.layer addSublayer:pieShape];
尝试这个：
CGContextMoveToPoint(the center point) CGContextAddLineToPoint(the starting point of the fill path on the circumference) CGContextAddArcToPoint(the ending point of the fill path on the circumference) CGContextAddLineToPoint(the center point) CGContextFillPath
我实现了一个类似于你正在做的饼图进度视图。 它是开源的。 希望源代码将有所帮助。
SSPieProgressView.h源码
SSPieProgressView.m源码
CircleViewController.h
#import <UIKit/UIKit.h> @interface CircleViewController : UIViewController @end
CircleViewController.m
#import "CircleViewController.h" #import "GraphView.h" @interface CircleViewController () @end @implementation CircleViewController - (void)viewDidLoad { [super viewDidLoad]; GraphView *graphView = [[GraphView alloc] initWithFrame:CGRectMake(100, 100, 200, 200)]; graphView.backgroundColor = [UIColor whiteColor]; graphView.layer.borderColor = [UIColor redColor].CGColor; graphView.layer.borderWidth = 1.0f; [self.view addSubview:graphView]; } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Dispose of any resources that can be recreated. } @end
GraphView.h
#import <UIKit/UIKit.h> @interface GraphView : UIView @end
GraphView.m
#import "GraphView.h" @implementation GraphView - (void)drawRect:(CGRect)rect { CGPoint circleCenter = CGPointMake(self.bounds.size.width / 2, self.bounds.size.height / 2); [self drawCircleWithCircleCenter:(CGPoint) circleCenter radius:80 firstColor:[UIColor blueColor].CGColor secondeColor:[UIColor redColor].CGColor lineWidth:2 startDegree:0 currentDegree:90]; //[self drawCircleWithCircleCenter2:(CGPoint) circleCenter radius:80 firstColor:[UIColor blueColor].CGColor secondeColor:[UIColor redColor].CGColor lineWidth:2 startDegree:0 currentDegree:90]; } - (void)drawCircleWithCircleCenter:(CGPoint) circleCenter radius:(CGFloat)radius firstColor:(CGColorRef)firstColor secondeColor:(CGColorRef)secondeColor lineWidth:(CGFloat)lineWidth startDegree:(float)startDegree currentDegree:(float)endDegree { CGContextRef context = UIGraphicsGetCurrentContext(); CGContextSetLineWidth(context, lineWidth); CGContextMoveToPoint(context, circleCenter.x, circleCenter.y); CGContextAddArc(context, circleCenter.x , circleCenter.y, radius, [self radians:startDegree], [self radians:endDegree], 0); CGContextSetFillColorWithColor(context, firstColor); CGContextFillPath(context); CGContextMoveToPoint(context, circleCenter.x, circleCenter.y); CGContextAddArc(context, circleCenter.x, circleCenter.y, radius, [self radians:endDegree], [self radians:startDegree], 0); CGContextSetFillColorWithColor(context, secondeColor); CGContextFillPath(context); } - (void)drawCircleWithCircleCenter2:(CGPoint) circleCenter radius:(CGFloat)radius firstColor:(CGColorRef)firstColor secondeColor:(CGColorRef)secondeColor lineWidth:(CGFloat)lineWidth startDegree:(float)startDegree currentDegree:(float)endDegree { CGContextRef context = UIGraphicsGetCurrentContext(); CGContextSetLineWidth(context, lineWidth); CGContextMoveToPoint(context, circleCenter.x, circleCenter.y); CGContextAddArc(context, circleCenter.x , circleCenter.y, radius, [self radians:startDegree], [self radians:endDegree], 0); CGContextSetFillColorWithColor(context, firstColor); CGContextFillPath(context); CGContextMoveToPoint(context, circleCenter.x, circleCenter.y); CGContextAddArc(context, circleCenter.x, circleCenter.y, radius, [self radians:endDegree], [self radians:startDegree], 0); CGContextSetStrokeColorWithColor(context, secondeColor); CGContextStrokePath(context); } -(float) radians:(double) degrees { return degrees * M_PI / 180; } @end
注意：您可以使用2种方法之一：“drawCircleWithCircleCenter”或“drawCircleWithCircleCenter2”
这个代码，如果你想分裂的细胞只有2部分
如果你想拆分超过2个部分的单元格，你可以检查这个：“ 画一个圆，用不同的颜色填充不同的部分 ”，并检查答案从这个短语开始“我们有6class”
那么，因为目前为止还没有人使用NSBezierPath，我想我可以提供我最近用于解决同样问题的解决scheme：
-(void)drawRect:(NSRect)dirtyRect { double start = -10.0; //degrees double end = 190.0; //degrees NSPoint center = NSMakePoint(350, 200); double radius = 50; NSBezierPath *sector = [NSBezierPath bezierPath]; [sector moveToPoint:center]; [sector appendBezierPathWithArcWithCenter:center radius:radius startAngle:start endAngle:end]; [sector lineToPoint:center]; [sector fill]; }
下面是我正在使用的一个完整的方法，用Core Graphics来做这个，在上面的mharper的注释中进行调整和扩展。
此代码适用于OSX Cocoa，但可以通过修改获取上下文的方式轻松地将其更改为iOS。
- (void)drawPieShapedCircleWithRadius:(CGFloat)radius strokeColor:(CGColorRef)strokeColor fillColor:(CGColorRef)fillColor lineWidth:(CGFloat)lineWidth currentDegrees:(float)currentDegrees startDegrees:(float)startDegrees { // get the context CGContextRef context = [[NSGraphicsContext currentContext] graphicsPort]; // Set the color of the circle stroke and fill CGContextSetStrokeColorWithColor(context, strokeColor); CGContextSetFillColorWithColor(context, fillColor); // Set the line width of the circle CGContextSetLineWidth(context, 1); // Calculate the middle of the circle CGPoint circleCenter = CGPointMake(self.frame.size.width / 2, self.frame.size.height / 2); // Move the bezier to the center of the circle CGContextMoveToPoint(context, circleCenter.x, circleCenter.y); // move to the center point // Draw the arc from the start point (hardcoded as the bottom of the circle) to the center CGContextAddLineToPoint(context, circleCenter.x, circleCenter.y + radius); // Draw the arc around the circle from the start degrees point to the current degrees point CGContextAddArc(context, circleCenter.x , circleCenter.y, radius, [self radians:startDegrees], [self radians:startDegrees + currentDegrees], 0); // Draw the line back into the center of the circle CGContextAddLineToPoint(context, circleCenter.x, circleCenter.y); // Fill the circle CGContextFillPath(context); // Draw the line around the circle CGContextStrokePath(context); }
试试这个代码在UIView，例如“MyChartClass”…
- (void)drawRect:(CGRect)rect { int c=(int)[itemArray count]; CGFloat angleArray[c]; CGFloat offset; int sum=0; CGContextRef context = UIGraphicsGetCurrentContext(); CGContextSetAllowsAntialiasing(context, false); CGContextSetShouldAntialias(context, false); for(int i=0;i<[itemArray count];i++) { sum+=[[itemArray objectAtIndex:i] intValue]; } for(int i=0;i<[itemArray count];i++) { angleArray[i]=(float)(([[itemArray objectAtIndex:i] intValue])/(float)sum)*(2*3.14); CGContextMoveToPoint(context, radius, radius); if(i==0) CGContextAddArc(context, radius, radius, radius, 0,angleArray[i], 0); else CGContextAddArc(context, radius, radius, radius,offset,offset+angleArray[i], 0); offset+=angleArray[i]; CGContextSetFillColorWithColor(context, ((UIColor *)[myColorArray objectAtIndex:i]).CGColor); CGContextClosePath(context); CGContextFillPath(context); } }
在你的UIViewController中实现
MyChartClass *myChartClass=[[MyChartClass alloc]initWithFrame:CGRectMake(0, 0, 200, 200)]; myChartClass.backgroundColor = [UIColor clearColor]; myChartClass.itemArray=[[NSArray alloc]initWithObjects:@"75",@"25", nil]; myChartClass.myColorArray=[[NSArray alloc]initWithObjects:[UIColor blackColor],[UIColor whiteColor], nil]; myChartClass.radius=100; [self.view addSubview:myChartClass];
问候。
