iOS学习笔记-053.自定义View01——基础

自定义View01——基础

一、如何利用Quartz2D绘制东西到view上

如何利用Quartz2D绘制东西到view上？
首先，得有图形上下文，因为它能保存绘图信息，并且决定着绘制到什么地方去
其次，那个图形上下文必须跟view相关联，才能将内容绘制到view上面

二、自定义view的步骤

1. 新建一个类，继承自UIView2. 实现- (void)drawRect:(CGRect)rect方法3. 在上面的方法中，取得跟当前view相关联的图形上下文4. 绘制相应的图形内容5. 利用图形上下文将绘制的所有内容渲染显示到view上面

三、drawRect: 简介

1.为什么要实现drawRect:方法才能绘图到view上？

因为在drawRect:方法中才能取得跟view相关联的图形上下文

2.drawRect:方法在什么时候被调用？

当view第一次显示到屏幕上时（被加到UIWindow上显示出来）
调用view的setNeedsDisplay或者setNeedsDisplayInRect:时

3.drawRect:中取得的上下文

在drawRect:方法中取得上下文后，就可以绘制东西到view上

View内部有个layer（图层）属性，drawRect:方法中取得的是一个Layer Graphics Context，因此，绘制的东西其实是绘制到view的layer上去了

View之所以能显示东西，完全是因为它内部的layer

四、Quartz2D绘图的代码步骤

1.获得图形上下文CGContextRef ctx = UIGraphicsGetCurrentContext();2.拼接路径（下面代码是搞一条线段）CGContextMoveToPoint(ctx, 10, 10);CGContextAddLineToPoint(ctx, 100, 100);3.绘制路径CGContextStrokePath(ctx); // CGContextFillPath(ctx);

五、常用拼接路径函数

新建一个起点void CGContextMoveToPoint(CGContextRef c, CGFloat x, CGFloat y)添加新的线段到某个点void CGContextAddLineToPoint(CGContextRef c, CGFloat x, CGFloat y)添加一个矩形void CGContextAddRect(CGContextRef c, CGRect rect)添加一个椭圆void CGContextAddEllipseInRect(CGContextRef context, CGRect rect)添加一个圆弧void CGContextAddArc(CGContextRef c, CGFloat x, CGFloat y,  CGFloat radius, CGFloat startAngle, CGFloat endAngle, int clockwise)

六、常用绘制路径函数

Mode参数决定绘制的模式void CGContextDrawPath(CGContextRef c, CGPathDrawingMode mode)绘制空心路径void CGContextStrokePath(CGContextRef c)绘制实心路径void CGContextFillPath(CGContextRef c)

提示：一般以CGContextDraw、CGContextStroke、CGContextFill开头的函数，都是用来绘制路径的

七、绘制一条直线

////  WMLineView.m//  03_UIView41_绘图1////  Created by 杞文明 on 2016/04/11 08:31:23   星期一//  Copyright © 2016年 杞文明. All rights reserved.//#import "WMLineView.h"@implementation WMLineView// Only override drawRect: if you perform custom drawing.// An empty implementation adversely affects performance during animation.- (void)drawRect:(CGRect)rect {    //1.获取上下文    CGContextRef ctx = UIGraphicsGetCurrentContext();    //2.绘制图形,保存绘图信息    //设置起点    CGContextMoveToPoint(ctx, 5, 100);    //设置终点    CGContextAddLineToPoint(ctx, 100, 100);    //设置线条颜色    CGContextSetRGBStrokeColor(ctx, 1.0, 0, 0, 1.0);    //设置线条宽度    CGContextSetLineWidth(ctx, 10);    //设置起始点的样式    CGContextSetLineCap(ctx,kCGLineCapRound);    //设置转角的样式    CGContextSetLineJoin(ctx, kCGLineJoinRound);    //3.显示图形    //绘制空心的线    CGContextStrokePath(ctx);}@end

八、绘制三角形

////  WMTriangleView.m//  03_UIView41_绘图1////  Created by 杞文明 on 2016/04/11 08:34:30   星期一//  Copyright © 2016年 杞文明. All rights reserved.//#import "WMTriangleView.h"@implementation WMTriangleView// Only override drawRect: if you perform custom drawing.// An empty implementation adversely affects performance during animation.- (void)drawRect:(CGRect)rect {    //1.获取上下文    CGContextRef ctx = UIGraphicsGetCurrentContext();    //2.绘制    CGContextMoveToPoint(ctx, 5, 5);    CGContextAddLineToPoint(ctx, 5, 100);    CGContextAddLineToPoint(ctx, 100, 100);//    //可是使用重新创建一个点（和起始点一样）来完成最后一条线//    CGContextAddLineToPoint(ctx, 5, 5);    //也可以使用关闭路径来实现    CGContextClosePath(ctx);    //3.显示    //空心的    CGContextStrokePath(ctx);    //------------下面画一个实心的三角形的例子------------    CGContextMoveToPoint(ctx, 105, 5);    CGContextAddLineToPoint(ctx, 105, 100);    CGContextAddLineToPoint(ctx, 205, 100);    CGContextClosePath(ctx);    //设置实心的颜色    CGContextSetRGBFillColor(ctx, 1.0, 0, 0, 1.0);    //或者调用OC的方法，可以同时这是 描边和实心的颜色//    [[UIColor redColor] set];    CGContextFillPath(ctx);}@end

九、绘制矩形

////  WMRectView.m//  03_UIView41_绘图1////  Created by 杞文明 on 2016/04/11 09:01:08   星期一//  Copyright © 2016年 杞文明. All rights reserved.#import "WMRectView.h"@implementation WMRectView- (void)drawRect:(CGRect)rect {    //1.获取上下文    CGContextRef ctx = UIGraphicsGetCurrentContext();    //2.绘制    CGContextAddRect(ctx, CGRectMake(10, 10, 200, 100));    //3.渲染    CGContextFillPath(ctx);}@end

十、圆、椭圆、弧形、扇形

////  WMCircleView.m//  03_UIView41_绘图1////  Created by 杞文明 on 16/4/12.//  Copyright © 2016年 杞文明. All rights reserved.//#import "WMCircleView.h"@implementation WMCircleView// Only override drawRect: if you perform custom drawing.// An empty implementation adversely affects performance during animation.- (void)drawRect:(CGRect)rect {//    1.获取上下文    CGContextRef ctx = UIGraphicsGetCurrentContext();    //圆    [self xmDrawCicle:ctx];    //椭圆    [self xmDrawEllipse:ctx];    //圆弧    [self xmDrawArc:ctx];    //扇形    [self xmDrawFan:ctx];}//画圆-(void)xmDrawCicle:(CGContextRef)ctx{    //1.画图    CGContextAddEllipseInRect(ctx, CGRectMake(10, 10, 100, 100));    //2.渲染    CGContextStrokePath(ctx);}//画椭圆-(void)xmDrawEllipse:(CGContextRef)ctx{    //1.画图    CGContextAddEllipseInRect(ctx, CGRectMake(120, 10, 40, 100));    //设置颜色    [[UIColor magentaColor] set];    //2.渲染    CGContextFillPath(ctx);}//画圆弧-(void)xmDrawArc:(CGContextRef)ctx{    //1.画图 x/y圆心 最后一个参数代表是顺时针还是逆时针    CGContextAddArc(ctx, 230, 50, 60, M_PI_4, M_PI, 0);    //设置颜色    [[UIColor orangeColor] set];    //2.渲染    CGContextStrokePath(ctx);}//画扇形-(void)xmDrawFan:(CGContextRef)ctx{    //1.画图    //画点    CGContextMoveToPoint(ctx, 300, 5);    CGContextAddLineToPoint(ctx, 380, 5);    //划圆弧    CGContextAddArc(ctx, 300, 5, 80, 0, M_PI_2, 0);    //关闭路径    CGContextClosePath(ctx);    //设置颜色    [[UIColor purpleColor] set];    //2.渲染 画线只能通过空心来画//    CGContextStrokePath(ctx);    CGContextFillPath(ctx);}@end

十一、绘制文字

////  WMTextImageView.m//  03_UIView41_绘图1////  Created by 杞文明 on 16/4/12.//  Copyright © 2016年 杞文明. All rights reserved.//#import "WMTextImageView.h"@implementation WMTextImageView// Only override drawRect: if you perform custom drawing.// An empty implementation adversely affects performance during animation.- (void)drawRect:(CGRect)rect {    //1.获取上下文    CGContextRef ctx = UIGraphicsGetCurrentContext();    //画文字    [self drawText:ctx];}//画文字-(void)drawText:(CGContextRef)ctx{    NSString *str = @"TM我现在非常鬼火绿,TM我现在非常鬼火绿,TM我现在非常鬼火绿";    NSMutableDictionary * md = [NSMutableDictionary dictionary];    //字体颜色    md[NSForegroundColorAttributeName] = [UIColor cyanColor];    //设置背景    md[NSBackgroundColorAttributeName] = [UIColor purpleColor];    //画文字    [str drawAtPoint:CGPointMake(10, 10) withAttributes:md];    //-----------绘制在矩形框中的文字--------    CGRect  rect = CGRectMake(10, 50, 100, 60);    CGContextSetRGBStrokeColor(ctx, 1.0f, 0, 0, 1.0f);    CGContextAddRect(ctx, rect);    CGContextStrokePath(ctx);    //设置背景    md[NSBackgroundColorAttributeName] = [UIColor clearColor];    [str drawInRect:rect withAttributes:md];}@end

十二、绘制图片

//画图片-(void)drawImage:(CGContextRef)ctx{    //1.创建图片    UIImage * image = [UIImage imageNamed:@"me"];    //2.绘制图片    //将图片绘制到指定的位置    [image drawAtPoint:CGPointMake(110, 20)];    //使用drawInRect方法绘制图片到layer层，是通过拉伸原有图片的    [image drawInRect:CGRectMake(155, 20, 100, 100)];    //通过drawAsPatternInRect方法绘制图片到layer层，是通过平铺图片的    [image drawAsPatternInRect:CGRectMake(260, 20, 100, 100)];}