ios 基本图形的绘制

基本图形的绘制 包括： 代码画线，画文字 图片 裁剪 重绘 简单动画

当自定义view的时候 系统会自动调用drawRect 方法

画线

[objc]
view plaincopy





- (void)drawRect:(CGRect)rect
{
// Drawing code
// 1.获得图形上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();

// 2.拼接图形(路径)
// 设置线段宽度
CGContextSetLineWidth(ctx, 10);

// 设置线段头尾部的样式
CGContextSetLineCap(ctx, kCGLineCapRound);

// 设置线段转折点的样式
CGContextSetLineJoin(ctx, kCGLineJoinRound);

/** 第1根线段 **/
// 设置颜色
CGContextSetRGBStrokeColor(ctx, 1, 0, 0, 1);
// 设置一个起点
CGContextMoveToPoint(ctx, 10, 10);
// 添加一条线段到(100, 100)
CGContextAddLineToPoint(ctx, 100, 100);

// 渲染一次
CGContextStrokePath(ctx);

/** 第2根线段 **/
// 设置颜色
CGContextSetRGBStrokeColor(ctx, 0, 0, 1, 1);
// 设置一个起点
CGContextMoveToPoint(ctx, 200, 190);
// 添加一条线段到(150, 40)
CGContextAddLineToPoint(ctx, 150, 40);
CGContextAddLineToPoint(ctx, 120, 60);

// 3.渲染显示到view上面
CGContextStrokePath(ctx);
}

画圆弧

[objc]
view plaincopy





/**
* 画圆弧
*/
void drawArc()
{
// 1.获得上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();

// 2.画圆弧
// x\y : 圆心
// radius : 半径
// startAngle : 开始角度
// endAngle : 结束角度
// clockwise : 圆弧的伸展方向(0:顺时针, 1:逆时针)
CGContextAddArc(ctx, 100, 100, 50, M_PI_2, M_PI, 0);

// 3.显示所绘制的东西
CGContextFillPath(ctx);
}

画圆

[objc]
view plaincopy





/**
* 画圆
*/
void drawCircle()
{
// 1.获得上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();

// 2.画圆
CGContextAddEllipseInRect(ctx, CGRectMake(50, 10, 100, 100));

CGContextSetLineWidth(ctx, 10);

// 3.显示所绘制的东西
CGContextStrokePath(ctx);
}

画矩形

[objc]
view plaincopy





/**
* 画四边形
*/
void draw4Rect()
{
// 1.获得上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();

// 2.画矩形
CGContextAddRect(ctx, CGRectMake(10, 10, 150, 100));

// set : 同时设置为实心和空心颜色
// setStroke : 设置空心颜色
// setFill : 设置实心颜色
[[UIColor whiteColor] set];

// CGContextSetRGBFillColor(ctx, 0, 0, 1, 1);

// 3.绘制图形
CGContextFillPath(ctx);
}

画三角形

[objc]
view plaincopy





/**
* 画三角形
*/
void drawTriangle()
{
// 1.获得上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();

// 2.画三角形
CGContextMoveToPoint(ctx, 0, 0);
CGContextAddLineToPoint(ctx, 100, 100);
CGContextAddLineToPoint(ctx, 150, 80);
// 关闭路径(连接起点和最后一个点)
CGContextClosePath(ctx);

//
CGContextSetRGBStrokeColor(ctx, 0, 1, 0, 1);

// 3.绘制图形
CGContextStrokePath(ctx);
}

画文字

[objc]
view plaincopy





/**
* 画文字
*/
void drawText()
{
// 1.获得上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
// 2.画矩形
CGRect cubeRect = CGRectMake(50, 50, 100, 100);
CGContextAddRect(ctx, cubeRect);
// 3.显示所绘制的东西
CGContextFillPath(ctx);

// 4.画文字
NSString *str = @"哈哈哈哈Good morning hello hi hi hi hi";
// [str drawAtPoint:CGPointZero withAttributes:nil];

NSMutableDictionary *attrs = [NSMutableDictionary dictionary];
// NSForegroundColorAttributeName : 文字颜色
// NSFontAttributeName : 字体
attrs[NSForegroundColorAttributeName] = [UIColor redColor];
attrs[NSFontAttributeName] = [UIFont systemFontOfSize:50];
[str drawInRect:cubeRect withAttributes:attrs];
}

画图片

[objc]
view plaincopy





void drawImage()
{
// 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)];

// 3.画文字
NSString *str = @"为xxx所画";
[str drawInRect:CGRectMake(0, 180, 100, 30) withAttributes:nil];
}

在绘制的时候 当设置了ctx 的颜色的时候 再绘制其他的图时，颜色需要重置，很麻烦，解决方法是重置 ctx 如下

[objc]
view plaincopy





// 将ctx拷贝一份放到栈中
CGContextSaveGState(ctx);

// 设置绘图状态
CGContextSetLineWidth(ctx, 10);
[[UIColor redColor] set];
CGContextSetLineCap(ctx, kCGLineCapRound);

// 第1根线
CGContextMoveToPoint(ctx, 50, 50);
CGContextAddLineToPoint(ctx, 120, 190);

CGContextStrokePath(ctx);

// 将栈顶的上下文出栈,替换当前的上下文
CGContextRestoreGState(ctx);

整个ctx 的旋转 移动

[objc]
view plaincopy





CGContextRotateCTM(ctx, M_PI_4 * 0.3);
CGContextScaleCTM(ctx, 0.5, 0.5);
CGContextTranslateCTM(ctx, 0, 150);

图片的裁剪 思路是 裁剪ctx的显示区域

[objc]
view plaincopy





- (void)drawRect:(CGRect)rect
{
CGContextRef ctx = UIGraphicsGetCurrentContext();

CGContextSaveGState(ctx);

// 0.画圆
CGContextAddEllipseInRect(ctx, CGRectMake(100, 100, 50, 50));
// 裁剪
CGContextClip(ctx);
CGContextFillPath(ctx);

// 1.显示图片
UIImage *image = [UIImage imageNamed:@"me"];
[image drawAtPoint:CGPointMake(100, 100)];

CGContextRestoreGState(ctx);

CGContextAddRect(ctx, CGRectMake(0, 0, 50, 50));
CGContextFillPath(ctx);
}

动画
CADisplayLink 是一个定时器，特点 刷新频率高， setNeedsDisplay方法起重新绘制的作用

[objc]
view plaincopy





- (void)awakeFromNib
{
CADisplayLink *link = [CADisplayLink displayLinkWithTarget:self selector:@selector(setNeedsDisplay)];
[link addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode];

// [NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(setNeedsDisplay) userInfo:nil repeats:YES];
}

- (void)drawRect:(CGRect)rect
{
self.snowY+=5;

if (self.snowY >= rect.size.height) {
self.snowY = -100;
}

UIImage *image = [UIImage imageNamed:@"snow.jpg"];
[image drawAtPoint:CGPointMake(0, self.snowY)];
}

通过路径画图

[objc]
view plaincopy





- (void)drawRect:(CGRect)rect
{
CGContextRef ctx = UIGraphicsGetCurrentContext();

// 1.先创建一个路径
CGMutablePathRef linePath = CGPathCreateMutable();

// 2.拼接路径
CGPathMoveToPoint(linePath, NULL, 0, 0);
CGPathAddLineToPoint(linePath, NULL, 100, 100);

// 3.添加路径到上下文
CGContextAddPath(ctx, linePath);

CGMutablePathRef circlePath = CGPathCreateMutable();
CGPathAddArc(circlePath, NULL, 150, 150, 50, 0, M_PI * 2, 0);
CGContextAddPath(ctx, circlePath);

// 4.渲染
CGContextStrokePath(ctx);

CGPathRelease(linePath);
CGPathRelease(circlePath);

CGColorSpaceRef cs = CGColorSpaceCreateDeviceRGB();
CGColorSpaceRelease(cs);

// CFRelease(linePath);
// CFRelease(circlePath);
// CFRelease(cs);
}