Quartz2D 画图学习

Quartz2D

自定义View
1、新建一个类，继承UIView
2、实现 - (void)drawRect:(CGRect)rect方法，然后在这个方法中
	2-1、取得跟当前View相关联的图形上下文
	2-2、绘制相应的图形内容
	2-3、利用图形上下文将绘制的所有内容渲染显示到View上面

CGContextStrokePath  空心
CGContextFillPath    实心
CGContextSetLineWidth(ctx, 10);//设置线宽
CGContextSetLineCap(ctx, kCGLineCapRound);//设置直线俩端是圆形
CGContextSetLineJoin(ctx, kCGLineJoinBevel);//设置转折点也为弧形，切除尖角

//设置颜色的多种方法
CGContextSetRGBStrokeColor(ctx, 1.0, 0, 0, 1);//设置颜色
[[UIColor blueColor] setStroke];//设置颜色，这里设置实心和空心
[[UIColor blueColor] set];//设置位蓝色，通用


///////////////////////////////////////////////////////////////
案例一：
画直线
/**
 *  自定义View画图
 *  这里采用的是纯C语言语法
 *  采用框架都是CG开头
 */
- (void)drawRect:(CGRect)rect
{
    //1、取得跟当前View相关联的图形上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    
    //2、绘制相应的图形内容
    
    //2-1、设置一条直线
    CGContextMoveToPoint(ctx, 0, 0);//设置一个起点
    CGContextAddLineToPoint(ctx, 100, 100);//添加一条线段
    CGContextAddLineToPoint(ctx, 100, 120);//连接上面一条直线
    
    //3、利用图形上下文将绘制的所有内容渲染显示到View上面
    CGContextStrokePath(ctx);
}
///////////////////////////////////////////////////////////////

///////////////////////////////////////////////////////////////
案例二：画图形

#import "ShapeView.h"

@implementation ShapeView

/**
 * 画图形
 */
-(void)drawRect:(CGRect)rect
{
    //drawLine();
    drawTriangle();
    //draw4Rect();
}

/**
 *  画直线
 */
void drawLine()
{
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    
    //画直线
    CGContextMoveToPoint(ctx, 20, 20);
    CGContextAddLineToPoint(ctx, 100, 100);
    
    CGContextAddLineToPoint(ctx, 10, 130);
    
    CGContextSetLineWidth(ctx, 10);
    CGContextSetLineCap(ctx, kCGLineCapRound);//设置直线俩端是弧形
    CGContextSetLineJoin(ctx, kCGLineJoinBevel);//设置转折点也为弧形，切除尖角
    
    CGContextStrokePath(ctx);//空心
}

/**
 *  画三角形
 */
void drawTriangle()
{
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    
    //2、画三角形
    CGContextMoveToPoint(ctx, 0, 0);
    CGContextAddLineToPoint(ctx, 100, 100);
    CGContextAddLineToPoint(ctx, 150, 80);
    CGContextClosePath(ctx);
    
    CGContextSetLineWidth(ctx, 10);//设置线宽
    
    //设置颜色
    //CGContextSetRGBStrokeColor(ctx, 1.0, 0, 0, 1);
    //[[UIColor blueColor] setStroke];
    [[UIColor blueColor] set];
    
    CGContextStrokePath(ctx);//空心
    //CGContextFillPath(ctx);//实心
}

/**
 *  画四边形
 */
void draw4Rect()
{
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    
    //2、画一个矩形
    CGContextAddRect(ctx, CGRectMake(10, 10, 100, 100));
    
    CGContextStrokePath(ctx);
}

@end

///////////////////////////////////////////////////////////////
画圆形
#import "CircleView.h"

@implementation CircleView

- (void)drawRect:(CGRect)rect
{
    //drawCircle();
    //drawCircle2();
    drawCircle3();
}

/**
 *  综合画：画四分之一
 */
void drawCircle3()
{
    //1、获取上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    
    //2、画四分之一圆
    CGContextMoveToPoint(ctx, 100, 100);
    CGContextAddLineToPoint(ctx, 100, 150);
    
    CGContextAddArc(ctx, 100, 100, 50, M_PI_2, M_PI, 0);
    
    //CGContextAddLineToPoint(ctx, 100, 100);
    CGContextClosePath(ctx);//合并路径
    
    [[UIColor redColor] set];
    
    //3、显示所绘制内容
    //CGContextStrokePath(ctx);
    CGContextFillPath(ctx);
}

/**
 *  画圆
 */
void drawCircle()
{
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    
    //画圆
    CGContextAddEllipseInRect(ctx, CGRectMake(10, 10, 100, 100));
    //画椭圆
    CGContextAddEllipseInRect(ctx, CGRectMake(10, 10, 200, 100));
    
    CGContextStrokePath(ctx);//空心
    
}

/**
 *  画圆弧
 */
void drawCircle2()
{
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    
    //画圆
    /**
     x\y    ：圆心
     radius ：半径
     startAngle：开始角度
     endAngle：结束角度
     clockwise：圆弧的伸展方向(0：顺时针  1：逆时针)
     */
    CGContextAddArc(ctx, 100, 100, 60, 0, M_PI, 0);
    
    CGContextStrokePath(ctx);
   
}

@end

///////////////////////////////////////////////////////////////

摘抄到自己的博客，整个画图的整理（重点）
http://donbe.blog.163.com/blog/static/138048021201052093633776/

///////////////////////////////////////////////////////////////
画文字和图片


#import "TextImageView.h"

@implementation TextImageView

- (void)drawRect:(CGRect)rect
{
    //drawText();
    drawImg();
}

/**
 *  画图片
 */
void drawImg()
{
    //1、取得图片
    UIImage *image = [UIImage imageNamed:@"me"];
    
    //2、画
    //[image drawAtPoint:CGPointMake(50, 50)];//图片原始画到某个点位置
    //[image drawInRect:CGRectMake(0, 0, 150, 150)];//图片拉伸画到某个位置
    [image drawAsPatternInRect:CGRectMake(0, 0, 200, 200)];//重复，平铺，就是以前网页背景
}

/**
 *  画文字
 */
void drawText()
{
    //1、获取上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    
    //2、画文字
    NSString *str = @"哈哈Hello Moring";
    
    //在某个点画文字
    [str drawAtPoint:CGPointZero withAttributes:nil];
    //在某个区域内画
    CGRect cubeRect = CGRectMake(50, 50, 100, 100);
    NSMutableDictionary *attrs = [NSMutableDictionary dictionary];
    //NSForegroundColorAttributeName 文字yanse
    attrs[NSForegroundColorAttributeName] = [UIColor redColor];
    //NSFontAttributeName 字体大小
    attrs[NSFontAttributeName] = [UIFont systemFontOfSize:20];
    [str drawInRect:cubeRect withAttributes:attrs];
    
    //3、显示
    CGContextStrokePath(ctx);
}

@end