猫猫学IOS(二十九)UI之Quartz2D自定义下载控件_画各种图形
来源:互联网 发布:驱动人生是什么软件 编辑:程序博客网 时间:2024/05/24 06:41
猫猫分享,必须精品
素材代码地址:http://blog.csdn.net/u013357243/article/details/45333795
原创文章,欢迎转载。转载请注明:翟乃玉的博客
地址:http://blog.csdn.net/u013357243?viewmode=contents
效果
自定义控件过程
主要过程在上一篇里有介绍了,这里主要介绍下代码实现
先做好要放的view 然后实现呢主要就是四步:
1:获取上下文
2:拼接路径
3:把路径添加到上下文。
4:把上下文渲染到视图
// 1:获取上下文 CGContextRef ctx = UIGraphicsGetCurrentContext(); // 2:拼接路径 /*我们需要画一个圆图*/ CGPoint center = CGPointMake(50, 50);//圆心 CGFloat radius = 43;//半径 CGFloat startA = -M_PI_2 ;//起始角度 CGFloat endA = -M_PI_2 + _progress * M_PI * 2 ;//结束角度。 UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startA endAngle:endA clockwise:YES]; //clockwise 顺时针方向。 //3:把路径添加到上下文。 CGContextAddPath(ctx, path.CGPath); //设置颜色为红色 [[UIColor redColor] set]; //设置线条的宽度 CGContextSetLineWidth(ctx, 10); //设置两端的样式为圆角 CGContextSetLineCap(ctx,kCGLineCapRound); //4:把上下文渲染到视图。 CGContextStrokePath(ctx);
Quartz2D画各种图形
画直线
效果:
// 当自定义view第一次显示出来的时候就会调用drawRect方法15 - (void)drawRect:(CGRect)rect16 {17 18 // 1.取得和当前视图相关联的图形上下文(因为图形上下文决定绘制的输出目标)/19 // 如果是在drawRect方法中调用UIGraphicsGetCurrentContext方法获取出来的就是Layer的上下文20 CGContextRef ctx=UIGraphicsGetCurrentContext();//不需要*,同id21 22 // 2.绘图(绘制直线), 保存绘图信息23 // 设置起点24 CGContextMoveToPoint(ctx, 20, 100);25 //设置终点26 CGContextAddLineToPoint(ctx, 300, 100);27 28 29 //设置绘图的状态30 //设置线条的颜色为蓝色31 CGContextSetRGBStrokeColor(ctx, 0, 1.0, 0, 1.0);32 //设置线条的宽度33 CGContextSetLineWidth(ctx, 15);34 //设置线条起点和终点的样式为圆角35 CGContextSetLineCap(ctx, kCGLineCapRound);36 //设置线条的转角的样式为圆角37 CGContextSetLineJoin(ctx, kCGLineJoinRound);38 //3.渲染(绘制出一条空心的线)39 CGContextStrokePath(ctx);40 41 // //注意线条不能渲染为实心的42 // CGContextFillPath(ctx);43 44 45 46 //设置第二条线47 //设置第二条线的起点48 CGContextMoveToPoint(ctx, 50, 200);49 //设置第二天线的终点(自动把上一条直线的终点当做起点)50 CGContextAddLineToPoint(ctx, 300, 60);51 52 //设置绘图的状态53 // CGContextSetRGBStrokeColor(ctx, 1.0, 0.7, 0.3, 1.0);54 //第二种设置颜色的方式55 [[UIColor grayColor] set];56 //设置线条的宽度57 CGContextSetLineWidth(ctx, 10);58 //设置线条的起点和终点的样式59 CGContextSetLineCap(ctx, kCGLineCapButt);60 61 //渲染第二条线的图形到view上62 //绘制一条空心的线63 CGContextStrokePath(ctx);64 }65
画三角形
其实就是把线关闭了 一句代码
//关闭起点和终点
CGContextClosePath(ctx);
效果:
- (void)drawRect:(CGRect)rect15 {16 //1.获得图形上下文17 CGContextRef ctx=UIGraphicsGetCurrentContext();18 19 //2.绘制三角形20 //设置起点21 CGContextMoveToPoint(ctx, 20, 100);22 //设置第二个点23 CGContextAddLineToPoint(ctx, 40, 300);24 //设置第三个点25 CGContextAddLineToPoint(ctx, 200, 200);26 //设置终点27 // CGContextAddLineToPoint(ctx, 20, 100);28 //关闭起点和终点29 CGContextClosePath(ctx);30 31 // 3.渲染图形到layer上32 CGContextStrokePath(ctx);33 34 }
画四边形
效果:
- (void)drawRect:(CGRect)rect15 {16 17 //1.获取图形上下文18 CGContextRef ctx=UIGraphicsGetCurrentContext();19 //2.画四边形20 CGContextAddRect(ctx, CGRectMake(20, 20, 150, 100));21 22 // 如果要设置绘图的状态必须在渲染之前23 // CGContextSetRGBStrokeColor(ctx, 1.0, 0, 0, 1.0);24 // 绘制什么类型的图形(空心或者实心).就要通过什么类型的方法设置状态25 // CGContextSetRGBFillColor(ctx, 1.0, 0, 0, 1.0);26 27 // 调用OC的方法设置绘图的颜色28 // [[UIColor purpleColor] setFill];29 // [[UIColor blueColor] setStroke];30 // 调用OC的方法设置绘图颜色(同时设置了实心和空心)31 // [[UIColor greenColor] set];32 [[UIColor colorWithRed:1.0 green:0 blue:0 alpha:1.0] set];33 34 35 //3.渲染图形到layer上36 //空心的37 CGContextStrokePath(ctx);38 //实心的39 // CGContextFillPath(ctx);40 41 }
画圆
效果:最简单的圆形
- (void)drawRect:(CGRect)rect{ // 1.获取上下文 CGContextRef ctx = UIGraphicsGetCurrentContext(); // 画圆 CGContextAddArc(ctx, 100, 100, 50, 0, 2 * M_PI, 0); // 3.渲染 (注意, 画线只能通过空心来画)// CGContextFillPath(ctx); CGContextStrokePath(ctx);}
如果改成CGContextFillPath(ctx);
那么将会变成实心圆。前后联系下就都知道了,不多说了。
效果:画椭圆
// 画椭圆 // 1.获取上下文 CGContextRef ctx = UIGraphicsGetCurrentContext(); // 2.画圆 CGContextAddEllipseInRect(ctx, CGRectMake(50, 100, 100, 230)); [[UIColor purpleColor] set]; // 3.渲染 // CGContextStrokePath(ctx); CGContextFillPath(ctx);
画圆弧
效果:
// 画圆弧 // 1.获取上下文 CGContextRef ctx = UIGraphicsGetCurrentContext(); // 2.画圆弧 // x/y 圆心 // radius 半径 // startAngle 开始的弧度 // endAngle 结束的弧度 // clockwise 画圆弧的方向 (0 顺时针, 1 逆时针) // CGContextAddArc(ctx, 100, 100, 50, -M_PI_2, M_PI_2, 0); CGContextAddArc(ctx, 100, 100, 50, M_PI_2, M_PI, 0); CGContextClosePath(ctx); // 3.渲染 // CGContextStrokePath(ctx); CGContextFillPath(ctx);
四分之一圆:用于饼图
效果:
// 1.获取上下文 CGContextRef ctx = UIGraphicsGetCurrentContext(); // 2.画饼状图 // 画线 CGContextMoveToPoint(ctx, 100, 100); CGContextAddLineToPoint(ctx, 100, 150); // 画圆弧 CGContextAddArc(ctx, 100, 100, 50, M_PI_2, M_PI, 0); // CGContextAddArc(ctx, 100, 100, 50, -M_PI, M_PI_2, 1); // 关闭路径 CGContextClosePath(ctx); [[UIColor brownColor]set]; // 3.渲染 (注意, 画线只能通过空心来画) CGContextFillPath(ctx); // CGContextStrokePath(ctx);
12 3
- 猫猫学IOS(二十九)UI之Quartz2D自定义下载控件_画各种图形
- AJ学IOS(29)UI之Quartz2D自定义下载控件_画各种图形
- (素材源码)猫猫学IOS(二十九)UI之Quartz2D自定义下载控件
- 猫猫学IOS(三十一)UI之Quartz2D图形上下文栈
- 猫猫学IOS(三十一)UI之Quartz2D图形上下文栈
- 猫猫学IOS(二十八)UI之Quartz2D简单介绍
- iOS--Quartz2D使用(自定义UIImageView控件、绘制基本图形)
- 猫猫学IOS(三十五)UI之Quartz2D仿真支付宝手势解锁_代理获得密码。
- iOS开发UI篇—Quartz2D(自定义UIImageView控件)
- iOS开发UI高级—37Quartz2D(自定义UIImageView控件)
- iOS开发UI篇—Quartz2D(自定义UIImageView控件)
- iOS开发UI篇—Quartz2D(自定义UIImageView控件)
- iOS开发UI篇—Quartz2D(自定义UIImageView控件)
- iOS开发UI篇—Quartz2D(自定义UIImageView控件)
- AJ学IOS(31)UI之Quartz2D图形上下文栈
- (素材源码)猫猫学IOS(三十五)UI之Quartz2D仿真支付宝手势解锁_代理获得密码。
- (素材源码)猫猫学IOS(三十五)UI之Quartz2D仿真支付宝手势解锁_代理获得密码。
- iOS-UI -- Quartz2D绘制基本图形
- fragment按钮响应事件
- [MySQL故障] ERROR 1045 (28000): Access denied for user 'mmm_agent'@'exxx-tx.com' (using password: YES
- android手机分辨率(xxhdpi,xhdpi)
- MapReduce之shuffle过程
- Vijava 学习笔记之 DataStore(基础配置信息)
- 猫猫学IOS(二十九)UI之Quartz2D自定义下载控件_画各种图形
- Android提高 - Android如何使用隐藏API
- 红黑树 vs 最小堆
- iOS系统定位权限弹出框和跳转系统设置页面的调研
- Android文件操作(个人心得)
- 正则表达式的使用
- 使用libcurl实现简单的HTTP访问
- [MySQL生产环境] Innodb存储引擎内存报警问题处理过程
- IOS中NSPredicate的用法