Quarz2D iOS 绘图
2016-01-17 15:41 000aaa 阅读(207) 评论(0) 编辑 收藏 举报iOS 绘图的四部步曲
1.获取图形上下文在UIView的 drawRect:方法中才能取得跟view相关联的图形上下文,所以图形的绘制过程中的操作都得加载这个方法中
在调用UIView的 setNeedDisplay 方法的时候,会自动的触发drawRect 方法!
2.绘制图形
绘制的图形包括直线、虚线、二次曲线 、椭圆(圆是特殊的椭圆) 、圆弧 以及有线组成的图形(三角形、矩形等等)!
3.设置图形中元素的属性
图形的属性 ---- 例如:线的属性1.颜色 2.宽度(线条的粗细)3.线条两端的形状(圆角、方形)4.多条线形成的封闭图形的填充颜色等等
4.渲染出效果
提交绘制好得图形,让它在view中展示出来
下面来贴一下代码:
1.绘制一条直线
//获取图形路径上下文 CGContextRef ctf = UIGraphicsGetCurrentContext(); //保存一份最初的图形上下文 CGContextSaveGState(ctf); //第一条线 CGContextMoveToPoint(ctf, 20, 100);//起点 CGContextAddLineToPoint(ctf, 120, 80);//终点 //设置线条的属性 //1.设置线条的宽度 CGContextSetLineWidth(ctf, 12); //2.设置线条颜色 [[UIColor redColor] set]; /* CGContextSetStrokeColorWithColor(ctf, [UIColor grayColor].CGColor); */ //3.设置线条两端的的样式 CGContextSetLineCap(ctf,kCGLineCapRound); //渲染 CGContextStrokePath(ctf); //还原开始的时候保存的那份最纯洁的图形上下文 CGContextRestoreGState(ctf);
2.绘制一条虚线
CGContextRef context = UIGraphicsGetCurrentContext(); CGContextBeginPath(context); //lengths的值{10,10}表示先绘制10个点,再跳过10个点,如此反复, CGFloat lengths[] = {10,10}; /* //如果把lengths值改为{10, 20, 10},则表示先绘制10个点,跳过20个点,绘制10个点,跳过10个点,再绘制20个点,如此反复 CGFloat lengths[] = {10, 20, 10};*/ //绘制虚线用到的函数 CGContextSetLineDash(context, 0, lengths,2); CGContextMoveToPoint(context, 10.0, 20.0); CGContextAddLineToPoint(context, 310.0,20.0); // 设置线条的属性 CGContextSetLineWidth(context, 2.0); CGContextSetStrokeColorWithColor(context, [UIColor whiteColor].CGColor); CGContextStrokePath(context); CGContextClosePath(context);
3.绘制椭圆
//获取路径上下文 CGContextRef ctf = UIGraphicsGetCurrentContext(); //椭圆是通过内切矩形来实现的(圆是通过内切正方形来实现的) CGRect rectangle = CGRectMake(60,300,200,80); CGContextAddEllipseInRect(ctf, rectangle); //设置线条的属性 CGContextSetLineWidth(ctf, 2.0); //线条的宽度 CGContextSetStrokeColorWithColor(ctf, [UIColor blueColor].CGColor); //线条的颜色 /* //设置绘制的椭圆的填充颜色 CGContextSetFillColorWithColor(context, [UIColor greenColor].CGColor); CGContextFillEllipseInRect(context, rectangle); */ //将会出的线渲染出来 CGContextStrokePath(ctf);
4.绘制圆弧
//获取路径上下文 CGContextRef ctf = UIGraphicsGetCurrentContext(); /* param 2 、param3 做成圆心坐标 param 4 半径 param 5 开始绘图的角度 param 6 结束绘图的角度 param 7 绘图的方向 1.是顺时针方向 2.是逆时针方向 坐标系是正右方向为x轴的正方向 正下方向为y轴的正方向 */ CGContextAddArc(ctf, 200/*圆心x坐标*/, 450/*圆心y坐标*/, 50/*半径*/, M_PI/6/*开始角度*/, M_PI_2/*结束角度*/, 1/*绘图方向*/); //设置线条的属性 //颜色 CGContextSetStrokeColorWithColor(ctf, [UIColor blueColor].CGColor); CGContextSetLineWidth(ctf, 2.0);//宽度 //将会出的线渲染出来 CGContextStrokePath(ctf);
5.绘制二次曲线
//获取路径上下文 CGContextRef ctf = UIGraphicsGetCurrentContext(); //二次曲线路径 起点坐标(10,200) 终点坐标(310,200) 确定曲线弧度点 【(80,10)不在曲线上】 CGContextMoveToPoint(ctf, 10, 200); CGContextAddQuadCurveToPoint(ctf, 80, 10, 310, 200); //设置线条的属性 CGContextSetLineWidth(ctf, 2.0);//宽度 CGContextSetStrokeColorWithColor(ctf, [UIColor purpleColor].CGColor);//颜色 //将会出的线渲染出来 CGContextStrokePath(ctf);
6.绘制多条连续的直线(可以构成各种图形可以是封闭的也可以不封闭)
//获取路径上下文 CGContextRef ctf = UIGraphicsGetCurrentContext(); CGContextMoveToPoint(ctf, 100, 100); CGContextAddLineToPoint(ctf, 150, 100); CGContextAddLineToPoint(ctf, 150, 200); CGContextAddLineToPoint(ctf, 100, 200); CGContextAddLineToPoint(ctf, 100, 100); //为路径形成的图添加填充颜色 ---系统自动添加封闭路径连接形成一个封闭的可以填充的区域 CGContextSetFillColorWithColor(ctf, [UIColor brownColor].CGColor); CGContextFillPath(ctf); //将会出的线渲染出来 CGContextStrokePath(ctf);
或者(绘制一个矩形)
//获取路径上下文 CGContextRef ctf = UIGraphicsGetCurrentContext(); CGRect rectangle = CGRectMake(60,20,200,200);//rect 性的参数 x y 宽 高 CGContextAddRect(ctf, rectangle); //设置线条的属性1.2.3.4.5. CGContextSetStrokeColorWithColor(ctf, [UIColor orangeColor].CGColor);//线条的颜色--边框颜色 //将会出的线渲染出来 CGContextStrokePath(ctf); /*//设置画的矩形的填充颜色 CGContextSetFillColorWithColor(ctf, [UIColor redColor].CGColor); CGContextFillRect(ctf, rectangle);*/
文章到这也就结束了,希望对路过的朋友有所帮助!!!