画一个圆圈,用不同的颜色填充不同的部分
Posted
技术标签:
【中文标题】画一个圆圈,用不同的颜色填充不同的部分【英文标题】:Drawing a circle ,filled different parts with different color 【发布时间】:2013-06-24 06:53:59 【问题描述】:我是一个新手 ios 程序员。在我的一个项目中,我需要画一个圆圈,其中圆圈的不同部分将被不同的颜色填充。我可以画圆圈。但我无法确定圆圈的不同部分并用不同的颜色填充它们。这是一个屏幕截图,以阐明我想要绘制的内容。
我们将不胜感激。
【问题讨论】:
看起来像一个饼图。为什么不为此使用Core plot? 如果您在自己的drawRect
中使用 CoreGraphics 函数(那些以 CGContext
开头的函数),请告诉我们您的实现是否合适。 ,或者使用UIBezierPath
stroke
方法,或者使用CAShapeLayer
。
Core plot 是在 iOS 应用中创建图表的最佳平台。但是看看下面的github惊人的示例代码:- github.com/xyfeng/XYPieChart !enter image description here
@Rob 实际上我正在使用像 CGContext 这样的核心图形功能。
我也可以推荐ios Charts github.com/danielgindi/Charts
【参考方案1】:
您可以使用UIBezierPath
,它有一个方法addArcWithCenter:radius:startAngle:endAngle:clockwise:
,您可以在其中指定半径、中心和角度。代码可能看起来像这样,它用绿色绘制了四分之一的圆圈:
CGPoint center = CGPointMake(CGRectGetWidth(self.bounds) / 2.f, CGRectGetHeight(self.bounds) / 2.f);
CGFloat radius = center.x - 10.f;
UIBezierPath *portionPath = [UIBezierPath bezierPath];
[portionPath moveToPoint:center];
[portionPath addArcWithCenter:center radius:radius startAngle:0.f endAngle:M_PI_2 clockwise:YES];
[portionPath closePath];
[[UIColor greenColor] setFill];
[portionPath fill];
UIBezierPath *portionPath1 = [UIBezierPath bezierPath];
[portionPath1 moveToPoint:center];
[portionPath1 addArcWithCenter:center radius:radius startAngle:M_PI_2 endAngle:M_PI clockwise:YES];
[portionPath1 closePath];
[[UIColor blueColor] setFill];
[portionPath1 fill];
当然你也可以考虑使用像CorePlot 这样的库。
【讨论】:
它对一个部分非常有效。但是我怎样才能在其他部分继续它?我对改变起始角度和结束角度的其他部分做了同样的过程。但效果不佳 只玩角度和颜色。中心和半径应始终相同。您必须计算每个部分的角度,然后遍历所有部分,增加起始角和结束角。 我也这么认为。但是我的角度有问题。你能告诉我另一个部分的角度计算吗。我在下一个部分尝试这样 [startAngle:M_PI_2 endAngle:M_PI] 我刚刚添加了第二部分。 这绝对有帮助。非常感谢@Karl【参考方案2】:我们有 6 个班级
CircleViewController.h、CircleViewController.m、GraphView.h、GraphView.h、CirclePart.h、CirclePart.m
CirclePart.h
#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>
@interface CirclePart : NSObject
@property (nonatomic) CGFloat startDegree;
@property (nonatomic) CGFloat endDegree;
@property (nonatomic) UIColor *partColor;
-(id)initWithStartDegree:(CGFloat)startDegree endDegree:(CGFloat)endDegree partColor:(UIColor*)partColor;
@end
CirclePart.m
#import "CirclePart.h"
@implementation CirclePart
-(id)initWithStartDegree:(CGFloat)startDegree endDegree:(CGFloat)endDegree partColor:(UIColor*)partColor
self = [super init];
if (self)
self.startDegree = startDegree;
self.endDegree = endDegree;
self.partColor = partColor;
return self;
@end
GraphView.h
#import <UIKit/UIKit.h>
#import "CirclePart.h"
@interface GraphView : UIView
@property (nonatomic) CGPoint centrePoint;
@property (nonatomic) CGFloat radius;
@property (nonatomic) CGFloat lineWidth;
@property (nonatomic, strong) NSArray *circleParts;
-(id)initWithFrame:(CGRect)frame CentrePoint:(CGPoint)centrePoint radius:(CGFloat)radius lineWidth:(CGFloat)lineWidth circleParts:(NSArray*)circleParts;
@end
GraphView.m
#import "GraphView.h"
@implementation GraphView
-(id)initWithFrame:(CGRect)frame CentrePoint:(CGPoint)centrePoint radius:(CGFloat)radius lineWidth:(CGFloat)lineWidth circleParts:(NSArray*)circleParts
self = [super initWithFrame:frame];
if (self)
self.centrePoint = centrePoint;
self.radius = radius;
self.lineWidth = lineWidth;
self.circleParts = circleParts;
return self;
- (void)drawRect:(CGRect)rect
[self drawCircle];
- (void)drawCircle
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context, _lineWidth);
for(CirclePart *circlePart in _circleParts)
CGContextMoveToPoint(context, _centrePoint.x, _centrePoint.y);
CGContextAddArc(context, _centrePoint.x , _centrePoint.y, _radius, [self radians:circlePart.startDegree], [self radians:circlePart.endDegree], 0);
CGContextSetFillColorWithColor(context, circlePart.partColor.CGColor);
CGContextFillPath(context);
-(float) radians:(double) degrees
return degrees * M_PI / 180;
@end
CircleViewController.h
#import <UIKit/UIKit.h>
@interface CircleViewController : UIViewController
@end
CircleViewController.m
#import "CircleViewController.h"
#import "GraphView.h"
#import "CirclePart.h"
@interface CircleViewController ()
@end
@implementation CircleViewController
- (void)viewDidLoad
[super viewDidLoad];
CirclePart *part1 = [[CirclePart alloc] initWithStartDegree:0 endDegree:120 partColor:[UIColor redColor]];
CirclePart *part2 = [[CirclePart alloc] initWithStartDegree:120 endDegree:250 partColor:[UIColor blueColor]];
CirclePart *part3 = [[CirclePart alloc] initWithStartDegree:250 endDegree:360 partColor:[UIColor grayColor]];
NSArray *circleParts = [[NSArray alloc] initWithObjects:part1, part2, part3, nil];
CGRect rect = CGRectMake(100, 100, 200, 200);
CGPoint circleCenter = CGPointMake(rect.size.width / 2, rect.size.height / 2);
GraphView *graphView = [[GraphView alloc] initWithFrame:rect CentrePoint:circleCenter radius:80 lineWidth:2 circleParts:circleParts];
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
【讨论】:
【参考方案3】:这是一个简单的三角问题。找出馅饼部分所需的角度(馅饼切片百分比时间 360 度),然后移动到中心。以适当的角度与圆边缘对齐,以所需的弧角向饼图的下一侧弧线,然后线回到中心。
或者,您可以使用CorePlot 为您制作饼图。
【讨论】:
以上是关于画一个圆圈,用不同的颜色填充不同的部分的主要内容,如果未能解决你的问题,请参考以下文章