iOS UI进阶-1.0 Quartz2D

概述

Quartz 2D是一个二维绘图引擎,同时支持iOS和Mac系统。Quartz 2D能完成的工作:
  • 绘制图形 : 线条\三角形\矩形\圆\弧等
  • 绘制文字
  • 绘制\生成图片(图像)
  • 读取\生成PDF
  • 截图\裁剪图片
  • 自定义UI控件

代码实现

绘制时,绘制内容必须写在-(void)drawRect:(CGRect)rect 这个方法内,因为在其它方法里,取不到图形上下文。

绘制线条

#import "LineView.h"

@implementation LineView

-(void)drawRect:(CGRect)rect
{
// Drawing code
// 1.获得图形上下文
CGContextRef ctx = UIGraphicsGetCurrentContext(); // 2.拼接图形(路径)
// 设置线段宽度
CGContextSetLineWidth(ctx, ); // 设置线段头尾部的样式(圆型)
CGContextSetLineCap(ctx, kCGLineCapRound); // 设置线段转折点的样式(圆型)
CGContextSetLineJoin(ctx, kCGLineJoinRound); /** 第1根线段 **/
// 设置颜色
CGContextSetRGBStrokeColor(ctx, , , , );
// 设置一个起点
CGContextMoveToPoint(ctx, , );
// 添加一条线段到(100, 100)
CGContextAddLineToPoint(ctx, , ); // 渲染显示到view上面
CGContextStrokePath(ctx); /** 第2根线段 **/
// 设置颜色
CGContextSetRGBStrokeColor(ctx, , , , );
// 设置一个起点
CGContextMoveToPoint(ctx, , );
// 添加一条线段到(150, 40)
CGContextAddLineToPoint(ctx, , );
CGContextAddLineToPoint(ctx, , ); // 渲染显示到view上面
CGContextStrokePath(ctx);
}
@end

效果

iOS UI进阶-1.0 Quartz2D

绘制四边形

/**
* 画四边形
*/
void draw4Rect()
{
// 1.获得上下文
CGContextRef ctx = UIGraphicsGetCurrentContext(); // 2.画矩形
CGContextAddRect(ctx, CGRectMake(, , , )); // set : 同时设置为实心和空心颜色
// setStroke : 设置空心颜色
// setFill : 设置实心颜色
[[UIColor whiteColor] set]; // 3.绘制图形
CGContextFillPath(ctx);
}

绘制三角形

/**
* 画三角形
*/
void drawTriangle()
{
// 1.获得上下文
CGContextRef ctx = UIGraphicsGetCurrentContext(); // 2.画三角形
CGContextMoveToPoint(ctx, , );
CGContextAddLineToPoint(ctx, , );
CGContextAddLineToPoint(ctx, , );
// 关闭路径(连接起点和最后一个点)
CGContextClosePath(ctx); // 颜色
CGContextSetRGBStrokeColor(ctx, , , , ); // 3.绘制图形
CGContextStrokePath(ctx);
}

绘制圆形和圆弧

/**
* 画圆弧
*/
void drawArc()
{
// 1.获得上下文
CGContextRef ctx = UIGraphicsGetCurrentContext(); // 2.画圆弧
// x\y : 圆心
// radius : 半径
// startAngle : 开始角度
// endAngle : 结束角度
// clockwise : 圆弧的伸展方向(0:顺时针, 1:逆时针)
CGContextAddArc(ctx, , , , M_PI_2, M_PI, ); // 3.显示所绘制的东西
CGContextFillPath(ctx);
} /**
* 画圆
*/
void drawCircle()
{
// 1.获得上下文
CGContextRef ctx = UIGraphicsGetCurrentContext(); // 2.画圆
CGContextAddEllipseInRect(ctx, CGRectMake(, , , )); CGContextSetLineWidth(ctx, ); // 3.显示所绘制的东西
CGContextStrokePath(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开头的函数,都是用来绘制路径的

图形上下文栈的操作

// 将当前的上下文copy一份,保存到栈顶(那个栈叫做”图形上下文栈”)
void CGContextSaveGState(CGContextRef c) // 将栈顶的上下文出栈,替换掉当前的上下文
void CGContextRestoreGState(CGContextRef c)

另:重绘方法setNeedsDisplay。比如,我们已经绘制了一个图片或者线条,想滑动改变尺寸,可以通过这样设置:

- (void)setImage:(UIImage *)image
{
_image = image; [self setNeedsDisplay];
}

源代码下载:点击下载

Quartz 2D 官方文档:点击下载

上一篇:EF(Linq)框架使用过程中的小技巧汇总


下一篇:PHP常用数组函数