iOS开发iOS开发经验总结ui控件和效果的实现

Quartz2D

2015-07-13  本文已影响9911人  Ljson

什么是Quartz2D?

Quartz 2D是一个二维绘图引擎,同时支持iOS和Mac系统

Quartz2D在iOS开发中的价值:

iOS中,大部分控件都是Quartz2D绘制出来的

图形上下文

context.png

图形上下文就相当于画布,不同类型的画布就是决定着画得内容将展示在哪里。

drawRect:

为什么要实现drawRect:方法才能绘图到view上?
因为在drawRect:方法中才能取得跟view相关联的图形上下文

drawRect:中取得的上下文

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

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

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

drawRect:方法的调用?

也正是系统会在调用这个方法之前创建一个与该view相关的上下文,才让我们可以在drawRect:方法中绘制。注意:在其他地方拿不到view相关的上下文,所以不能实现绘制。

自定义view

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

自定义view的步骤:

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

常用拼接路径函数

常用绘制路径函数

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

图形上下文栈的操作

矩阵操作

利用矩阵操作,能让绘制到上下文中的所有路径一起发生变化

绘图的核心步骤:

  1. 获得上下文
  2. 绘制/拼接绘图路径
  3. 将路径添加到上下文
  4. 渲染上下文

记住:所有的绘图,都是这个步骤,即使使用贝塞尔路径,也只是对这个步骤进行了封装。对于绘图而言,拿到上下文很关键。

贝塞尔路径

就是UIKit框架中,对绘图的封装。实际操作起来,使用贝塞尔路径,更为方便。

三次贝塞尔曲线

裁剪核心代码

// 开启一个位图(图片)上下文 
//size:上下文尺寸
//opaque:不透明。一般是透明的,所以设置为NO
//scale:缩放,如果不缩放,设置为0就好
UIGraphicsBeginImageContextWithOptions(image.size, NO, 0);

// 描述圆形的路径
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, image.size.width, image.size.height)];

// 把圆形路径设置裁剪区域(将区域外的内容裁剪掉,是现实区域内的内容)
[path addClip];

// 绘制图片(先设置裁剪区域,再裁剪,才会有效果)
[image drawAtPoint:CGPointZero];

// 从上下文中内容生成一张图片
image = UIGraphicsGetImageFromCurrentImageContext();

// 关闭上下文(一定不要忘了关闭自己开启的上下文)
UIGraphicsEndImageContext();

截屏核心代码

// 开启一个跟屏幕一样大的尺寸的上下文
          UIGraphicsBeginImageContextWithOptions(caputeView.bounds.size, NO, 0);

// 获取自己创建的位图上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();

// view之所以你能显示内容,是因为有图层,因此只要把图层画到上下文
// 图层只能渲染,不能绘制
[caputeView.layer renderInContext:ctx];

// 从上下文中生成一张新的图片
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();

// 关闭上下文
UIGraphicsEndImageContext();
上一篇 下一篇

猜你喜欢

热点阅读