使用Quartz2D进行绘图1. Quartz2D2. 绘制基本图形

来来来,好玩的东西终于来了。接下来的几篇,咱们都将要聊一聊iOS中绘制图像的事儿哈。之前有一篇说到cell分割线顶头的方法中,有童鞋留言说还可以自己绘制。咳咳,会了绘图这个就不是难事儿啦~

还有很多App里面超炫的特效,其实也都是基于各种绘图、路径哒。来吧,骚年~让我们浪起来。

1. Quartz2D

  • Quartz 2D是一个二维绘图引擎,同时支持iOS和Mac OS X系统(跨平台,纯 C 语言的)。包含在 Core Graphics 框架中。
  • Quartz 2D能完成的工作
    • 绘制图形 : 线条\三角形\矩形\圆\弧等
    • 绘制文字
    • 绘制\生成图片(图像)
    • 读取\生成PDF
    • 截图\裁剪图片
    • 饼状图、柱状图、折线图
  • 自定义UI控件

注意: Quartz 2D 是苹果官方的二维绘图引擎,同时支持 iOS 和 Mac OS X 系统。 Cocos2D(Cocos2D-x、Cocos2D-iPhone、Cocos2D-HTML5等), Cocos2D 是一个第三方开源的2D游戏框架。做2D 游戏的 还有 Sprite Kit。 一般3D 游戏用 unity3D。

1.1 Quartz2D 绘图主要步骤

  • 获取【context】对象
  • 向【context】对象中添加【路径】
  • 渲染(把【context】中的图形会知道对应的设备上)
  • 一定要自定义一个view,把contxt和执行渲染的方法都放在自定义的view中

1.2 drawRect:

  • 为什么要实现drawRect:方法才能绘图到view上?

因为在drawRect:方法中才能取得跟view相关联的context

  • drawRect:方法在什么时候被调用?

当view第一次显示到屏幕上时(加到UIWindow上显示出来) 重绘的时候:调用view的setNeedsDisplay或者setNeedsDisplayInRect:

1.3 Graphics Context

  • Graphics Context 是一个数据类型(CGContextRef),用于封装 Quartz 绘制图像到输出设备的信息。
  • 设备可以是PDF文件、bitmap或者显示器的窗口。 CGContextRef 对应绘画者模式中的 Page。
  • 当用 Quartz 绘图时,所有设备相关的特性都包含在Graphics Context 中。通过给Quartz 指定不同的 Graphics Context,就可将相同的图像绘制到不同的设备上。
  • Quartz2D提供了以下几种类型的Graphics Context:
    • Bitmap Graphics Context
    • PDF Graphics Context
    • Window Graphics Context
    • Layer Graphics Context(UI控件)重点
    • Printer Graphics Context

1.4 绘图路径和内存管理

1.4.1 绘制路径

  • drawRect:(CGRect)rect中的rect指的就是绘图view的bounds
- (void)drawRect:(CGRect)rect {
    //1.获取图形上下文对象
    CGContextRef ctx = UIGraphicsGetCurrentContext();

    //2.创建路径
    CGMutablePathRef pathM = CGPathCreateMutable();

    //设置起点
    CGPathMoveToPoint(pathM, NULL, 50, 50);

    //加线
    CGPathAddLineToPoint(pathM, NULL, 200, 200);

    // 把路径添加到图形上下文中
    CGContextAddPath(ctx, pathM);

    //3.渲染
    CGContextStrokePath(ctx);

    //释放内存
// CGPathRelease(pathM);

    CFRelease(pathM);
}

1.4.2 使用静态分析工具

  • 静态分析工具的作用
    • 不仅能够检测内存泄漏的问题,还能检测其他的问题.
    • 这个工具仅仅是静态的在分析内存的问题,并不能真正的检测内存泄漏的问题.

内存泄漏的静态分析工具

1.4.3 使用Path 对象时的内存管理问题

使用Path对象的时候,一定要注意内存的问题,一定要注意内存释放。

  1. 凡是遇到 retain 、 copy 、 create 出的对象, 都需要进行 release
  2. 但是CGPathCreateMutable()不是 OC 方法, 所以不是调用 某个对象的 release方法
  3. CGXxxxxCreate 对应的就有 CGXxxxxRelease。
  4. 通过 CFRelease(任何类型)可以释放任何类型。
  • CFRelease属于更底层的cocafoundation框架
  1. ARC仅仅是处理oc的引用计数的问题

2. 绘制基本图形

好了,坐好了,老司机开始开车啦~

2.1 绘制三角形

- (void)drawRect:(CGRect)rect {

//    获取context
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    
//    创建起点
    CGContextMoveToPoint(ctx, 10, 10);
//    创建两条线段的终点
    CGContextAddLineToPoint(ctx, 10, 90);
    CGContextAddLineToPoint(ctx, 90, 90);
//    闭合path,让他自动回到原点
    CGContextClosePath(ctx);
//    执行渲染
    CGContextStrokePath(ctx);

}

2.2 绘制四边形

- (void)drawRect:(CGRect)rect {
    // Drawing code
//    获取context对象
    CGContextRef ctx = UIGraphicsGetCurrentContext();
//    添加路径
    CGContextAddRect(ctx, CGRectMake(10, 10, 50, 50));
//    执行渲染
    CGContextStrokePath(ctx);
    
}

2.3 绘制椭圆,也可以通过这种方式画圆

- (void)drawRect:(CGRect)rect {
//    获取context
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    
//    添加椭圆,通过矩形的方式。给出矩形的起点坐标,长宽,绘制一个内切椭圆
    CGContextAddEllipseInRect(ctx, CGRectMake(10, 10, 80, 50));
    
//    渲染
    CGContextStrokePath(ctx);
}

2.4 绘制圆弧

- (void)drawRect:(CGRect)rect {
//    获取context
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    
//    绘制扇形。参数:1+2,圆点坐标。参数3+4,起点和终点的弧度。参数5:0表示顺时针,1表示逆时针。
    CGContextAddArc(ctx, 50, 50, 20, M_PI_4, M_PI, 1);
    
//    渲染
    CGContextStrokePath(ctx);
}

2.5 画扇形

  • 先画一个弧度,然后链接圆心,最后关闭路径就可以了。
- (void)drawRect:(CGRect)rect {
//    获取context
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    
//    绘制扇形。参数:1+2,圆点坐标。参数3+4,起点和终点的弧度。参数5:0表示顺时针,1表示逆时针。
    CGContextAddArc(ctx, 50, 50, 20, M_PI_4, M_PI, 1);
    
    CGContextClosePath(ctx);
    
//    渲染
    CGContextStrokePath(ctx);
}

2.6 画线段

- (void)drawRect:(CGRect)rect {
    //    获取context对象
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    //    添加路径:起点、终点
    CGContextMoveToPoint(ctx, 10, 10);
    CGContextAddLineToPoint(ctx, 80, 80);
    //    执行渲染

    CGContextStrokePath(ctx);
}

好了,下车~下一篇要更新一下Quartz2D的渲染模式。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏封碎

Android的webview研究

最近做的项目大量用到了 webview ,用网页来布局。 Android 的 webview 是基于 webkit 内核,不过他的运行效果和 firefox 上...

511
来自专栏hbbliyong

代码创建 WPF 旋转、翻转动画(汇总)

先建立一个button <Button Width="80" Height="60" Content="旋转" Name="trans" Cl...

2754
来自专栏菩提树下的杨过

Silverlight的自定义tooltip提示工具条

这种应用场景其实很多,比如游戏中装备/魔法的选择菜单,这里借用了"深蓝色右手"的一张图  再比如聊天室中的文本颜色设置  ? 虽然sl的ToolTipServ...

2076
来自专栏我杨某人的青春满是悔恨

在 iPhone 上使用 Popover Segue

iOS 系统提供了4种基本的转场方式:Show、Show Detail、Present Modally、Present as Popover。我们平常用的最多的...

885
来自专栏一“技”之长

iOS视频功能模块的开发 原

        MPMoviePlayerController是iOS中进行视频播放开发的一个控制类,里面涵盖了视频播放中大部分的需求功能,在使用这个框架时,需...

1107
来自专栏技术总结

MJRefresh源码剖析与学习

建议查看原文:https://www.jianshu.com/p/23c876f8ae39(不定时更新)

834
来自专栏向治洪

ios入门之界面基础

学习移动app开发,我们常常从讲解基本的控件开始,如UILabel、UISearchBar、UIButton、UITextField等等。在实现一个简单的ios...

1938
来自专栏更流畅、简洁的软件开发方式

.net Framework2.0 里面的Webcontrols的几个常用控件的继承树

      为了写好分页控件的自动绑定的功能,研究了一下几个控件的继承关系,目的就是为了看看DataSource到底是从哪里来的。 ?       层数还真是多...

1867
来自专栏Android干货

Android多媒体录制--MediaRecorder视频录制

3687
来自专栏大神带我来搬砖

理解HTML工作原理——HTML form隐式提交

有时在HTML页面form的input里按了回车键会提交该表单,并且form的submit按钮的click事件也会被触发.这是什么原理呢?是因为form的隐式提...

2698

扫码关注云+社区