iOS quartz 画双层空心圆,带百分比进度条

原创 2015年11月18日 15:38:35

废话不多说,直接上代码

   首先我们自定义一个UIView   drawArcView.h

@interface drawView : UIView


- (instancetype)initWithFrame:(CGRect)frame;


@property (nonatomic, assign) CGFloat percentage;//暴露给外部,方便自定义进度条大小


@end


在drawArcView.m里面 我们重写

@interface drawView : UIView


- (instancetype)initWithFrame:(CGRect)frame;


@property (nonatomic, assign) CGFloat percentage;


@end

先定义几个宏

#define RADIUS self.frame.size.width/4 //圆半径

#define SRADIUS self.frame.size.width/4 -15   //小圆半径

#define ANGLE M_PI *_percentage

@interface drawView ()



@end

@implementation drawView


 -(void)drawRect:(CGRect)rect{

    CGContextRef context = UIGraphicsGetCurrentContext();//获得当前栈顶

    CGContextSetRGBStrokeColor(context, 0, 0, 1, 1);

    CGContextSetLineWidth(context, 1.0);

    CGContextAddArc(context,self.center.x, self.center.y, RADIUS, 0, 2*M_PI, 0);

    CGContextDrawPath(context, kCGPathStroke);//开始绘画边框圆


    //内部边框圆

    CGContextAddArc(context, self.center.x, self.center.y, SRADIUS, 0, 2*M_PI, 0);

    CGContextDrawPath(context, kCGPathStroke);


    //画外部扇形

    UIColor *outColor = [UIColor blueColor];

    [outColor set];

    CGContextMoveToPoint(context, self.center.x, self.center.y);//必须移动圆心一次,不然填充起来就不是扇形,好奇心重的同学可以试试,和画圆的区别点

    CGContextAddArc(context, self.center.x, self.center.y, RADIUS,  M_PI/2 -ANGLE, M_PI/2 + ANGLE, 0);//注意开始角度和结束角度可以自定义,多嘴一句苹果的坐标系和正常笛卡尔坐标系的y轴方向刚好相反,同学们可以自己理解了

    CGContextClosePath(context);

    CGContextDrawPath(context, kCGPathFillStroke);


    //画内实心填充圆,其实就是为了遮住外部扇形在内部的多余填充部分。

    CGContextMoveToPoint(context, self.center.x, self.center.y);

    UIColor *inColor = [UIColor whiteColor];

    [inColor set];

    CGContextClosePath(context);

    CGContextAddArc(context, self.center.x, self.center.y, SRADIUS, 0, 2*M_PI, 0);

    CGContextDrawPath(context, kCGPathFill);

    

    //中间显示的百分比进度值

    int percent = (int)(_percentage *100);  

    NSString *per = [NSString stringWithFormat:@"%d",percent];

    [per drawInRect:CGRectMake(self.center.x - 40, self.center.y -60, 100, 60) withAttributes:@{NSKernAttributeName:@13.0}];


}


版权声明:本文为博主原创文章,未经博主允许不得转载。

利用CAShapeLayer和UIBezierPath实现中空透明圆,圆外填充色

CAShapeLayer和UIBezierPath结合,调用CAShapeLayer的path属性,然后再实现CAShapeLayer的fillcolor属性,便可以在UIBezierPath所绘制的...
  • w_x_p
  • w_x_p
  • 2016年01月21日 14:03
  • 2352

IOS用CGContextRef画各种图形(文字、圆、直线、弧线、矩形、扇形、椭圆、三角形、圆角矩形、贝塞尔曲线、图片)

首先了解一下CGContextRef: An opaque type that represents a Quartz 2D drawing environment. Graphics Conte...

ios 基本图形的绘制

基本图形的绘制 包括: 代码画线,画文字 图片 裁剪 重绘  简单动画 当自定义view的时候 系统会自动调用drawRect 方法 画线 - (void)drawRect:(CGRect)rect ...

自定义view绘制空心圆

private final Paint paint; private final Context context; public RingView(Context context) ...
  • X__boss
  • X__boss
  • 2016年11月05日 09:14
  • 576

iOS 自定义控件 progressView(环形进度条)

之前做项目的时候有用到环形进度条,先是在网上找了一下第三方控件,发现好用是好用,就是东西太多了,有点复杂,还不如自己写一个简单点适合自己用的。 先把自定义控件的效果图贴出来。       ...

iOS 不同颜色之分段式圆环,段数不固定

最近美工那边提出一个需求,就是需要展示资产的占比,通过一个圆环展示,于是自己便封装了一个。段数不限制,只需赋值所占比例及该段的颜色即可。      直接上代码:     #import "ColorC...

ios AFNetworking 圆形进度条下载,显示百分比

一直为下载进度展示问题搜第三方插件,发现都过于繁琐,下面附上自己写的一个简单例子 适用于AFNetworking NSURLConnection 等网络请求,不同的请求只是在监听下载进度的方法不一样,...

IOS设置UIView的边框为圆角

iOS 系统自带的 View 组件都是正方形的,看起来都太生硬,有时候我需要变成圆角形式,如下图:      具体的实现是使用QuartzCore库,下面我具体的描述一下实现过程:     •...

用Canvas画占百分比的圆形比例

先看一下效果图:开发流程及主要思想第一步:先画一个背景第二步:占比例的圆的是从圆的正上方开始的画的,而默认情况下画的圆是从圆心的右边开始画的,所以要将圆旋转设置-90度,也就是 -Math.PI/2 ...

CSS border-radius画圆

1.CSS画实心圆 长度和宽度相等,border-radius设置为长度(宽度)的一半。 #circle { width: 200px; height: 200px; ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:iOS quartz 画双层空心圆,带百分比进度条
举报原因:
原因补充:

(最多只允许输入30个字)