iOS学习——Quartz2D学习之UIKit绘制

iOS学习——Quartz2D学习之UIKit绘制

1、总述

  在IOS中绘图技术主要包括:UIKit、Quartz 2D、Core Animation和OpenGL ES。其中Core Animation提供动画实现技术,OpenGL ES是OpenGL针对嵌入式设备的简化版本,用以绘制高性能的2D和3D图形。这里主要UIKit和Quartz 2D。

  • UIKit。它是高级别的图形接口,它的API都是基于Objective-C的。它能够访问绘图、动画、字体、图片等内容。
  • Quartz 2D。是IOS和Mac OS X环境下的2D绘图引擎。涉及内容包括:基于路径的绘图,透明度绘图,遮盖,阴影,透明层,颜色管理,防锯齿渲染,生成PDF,以及PDF元数据相关处理。Quartz 2D也被称为Core Graphics,缩写前缀为CG。Quartz 2D与Quartz Compositor统称为Quartz,Quartz原本是Mac OS X的Darwin核心之上的绘图技术。它的API接口都是基于C的。

  在IOS上无论采用哪种绘图技术(UIKit、Quartz 2D、Core Animation和OpenGL ES),都离不开UIView,绘制都发生在UIView对象的区域内。在绘制发生的时候如果使用的是系统提供的视图,绘制工作会自动得到处理。然而,如果是自定义视图,则必须重写drawRect:方法,在此提供相应的绘制代码。一旦drawRect:方法被调用,就可以使用任何的UIKit、Quartz 2D、OpenGL ES等技术对视图的内容进行绘制了。

  绘图过程中除了使用了drawRect:方法,还有setNeedsDisplay和setNeedsDisplayInRect:。setNeedsDisplay和setNeedsDisplayInRect:方法是设置视图或者视图部分区域是否需要重新绘制,setNeedsDisplay是重新绘制整个视图,setNeedsDisplayInRect是重新绘制视图的部分区域。原则上,尽量不要绘制视图的全部,以减少绘制带来开销。触发视图重新绘制的动作有如下几种:

  • 当遮挡你的视图的其他视图被移动或删除操作的时候;
  • 将视图的hidden属性声明设置为NO,使其从隐藏状态变为可见;
  • 将视图滚出屏幕,然后再重新回到屏幕上;
  • 显式调用视图的setNeedsDisplay或者setNeedsDisplayInRect:方法

2、UIKit的基本绘图功能

UIKit提供非常基本的绘图功能,主要的API有:  - UIRectFill(CGRect rect),填充矩形函数  - UIRectFrame(CGRect rect),矩形描边函数  - UIBezierPath,绘制常见路径类,包括险段、渐变、阴影、反锯齿等高级特性支持还是不及Quartz 2D。

3、文本绘制

  • 先创建好要画的文字
  • 使用UIKit提供的方法进行绘制,drawAtPoint:要画到哪个位置 withAttributes:文本的样式.

[str drawAtPoint:CGPointZero withAttributes:nil];

  • 前面说了,所有的绘制工作都应该放到drawRect:中进行,所以上面两步的代码不应该放在init、initWithFrame:或者AwakeFromNib方法中,在这些方法中这样写是画不出文字的。因为想要把一个东西画到View上面,必须获得该view的上下文 ,上下文只有在DrawRect方法中才能拿到。

4、drawAtPoint: withAttributes:的底层实现是怎样的?

drawAtPoint: withAttributes:底层也是同样也是按以下着步骤来的:

    1. 第一步:获取上下文
    2. 第二步:拼接路径
    3. 第三步:把路径添加到上下文
    4. 第四步:渲染上下文到View

    所以,不管有没有上下文,只要在View上面画东西,都得要在DrawRect方法中去写

5、如何添加绘制文字属性?

  通过绘制方法的最后一个属性withAttributes来设置文字属性,它要求传入的是一个字典.它是通过字典的key和Value的形式来设置文字样式.。那传什么key,什么值我们可以在UIKit头文件当中的NSAttributedString类当中去找。使用形式如下:

- (void)drawRect:(CGRect)rect {
    
    NSString *str = @"打印信息 打印信息";
    
    NSMutableDictionary *dict = [NSMutableDictionary dictionary];
    //字体
    dict[NSFontAttributeName] = [UIFont systemFontOfSize:50];
    //颜色
    dict[NSForegroundColorAttributeName] = [UIColor redColor];
    //设置边框颜色
    dict[NSStrokeColorAttributeName] = [UIColor redColor];
    dict[NSStrokeWidthAttributeName] = @1;
    
    NSShadow *shadow = [[NSShadow alloc] init];
    shadow.shadowOffset = CGSizeMake(10, 10);
    shadow.shadowColor = [UIColor greenColor];
    shadow.shadowBlurRadius = 3;
    dict[NSShadowAttributeName] = shadow;
    //Attributes:给文字添加一些属性,富文本
    [str drawAtPoint:CGPointZero withAttributes:dict];
} 

6、drawAtPoint:和drawInRect:的区别?

  • drawAtPoint:不能够自动换行
  • drawInRect:能够自动换行

7、如何利用UIKit绘制一张图片?

  在前面我们学会了如何在自定义view中绘制文本信息,其实绘制图片的方法绘制文本的方法非常类似,所以基本步骤如下:

  1. 导入素材
  2. DrawRect加载图片  UIImage *image = [UIImage imageNamed:@"image001"];
  3. 绘制图片: [image drawAtPoint:CGPointZero];

8、绘制图片有哪些方法,区别是什么?

  绘制图片的方法有三种,其区别分别如下:

  • drawAtPoint:(CGPoint *)point:从指定的点为图片的左上角的起点开始绘制,绘制出来的图形跟图片尺寸一样大,图片是按照原始大小进行绘制,吐过图片的大小超出当前view的视图范围,则无法进行绘制。
  • drawInRect:(CGRect *)rect:在指定的rect区域内绘制整张图片,图片会按照指定区域的宽高进行缩放,所以这种方式一定可以显示完整的图片,但是会进行一些缩放。
  • drawAsPatternInRect:(CGRect *)rect:在指定的rect区域内平铺图片,如果一张图片不够用,则会在剩下的地方重新放置该图片,图片的大小尺寸不会改变。

9、如何选用UIKit提供的方法快速画一个矩形?

  • UIRectFill(rect);快速的用矩形去填充一个区域
  • UIRectFrame(rect);快速绘制一个矩形的边框

 10、用UIKit裁剪一个区域

  • UIRectClip(CGRectMake(0, 0, 50, 50));只要超出裁剪区域部分,都会被裁剪掉
  • 这个方法必须要设置好裁剪区域,才能有裁剪
  • 把它放到最后面,没有裁剪效果
//会填充整个rect的区域,指定的裁剪不会有效
UIRectClip(CGRectMake(0, 0, 50, 50));
UIRectFill(rect);

//只会填充指定的裁剪区域,其他部分不会填充
UIRectFill(rect);
UIRectClip(CGRectMake(0, 0, 50, 50));

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏向治洪

React Native之react-native-scrollable-tab-view详解

在React Native开发中,官方为我们提供的Tab控制器有两种:TabBarIOS和ViewPagerAndroid。TabBarIOS,仅适用于IOS平...

89960
来自专栏HTML5学堂

CSS3圆角 border-radius

HTML5学堂:圆角是用一段与角的两边相切的圆弧替换原来的直角。在原有网页当中,如果需要实现圆角效果,可以使用背景图的实现,但是这样会造成背景图大小和数量的增加...

64970
来自专栏Echo is learning

常用Markdown公式整理 && 页内跳转注意 && Markdown preview

19350
来自专栏前端杂货铺

翻译:如何使用CSS实现多行文本的省略号显示

本文翻译自CSS Ellipsis: How to Manage Multi-Line Ellipsis in Pure CSS,文中某些部分有些许改动,并添...

39860
来自专栏刘望舒

React Native探索(四)Flexbox布局详解

前言 在Android开发中我们有很多种布局,比如LinearLayout和RelativeLayout,同样在React Native也有它的布局,这个布局就...

26190
来自专栏Charlie's Road

图层几何学 -- iOS Core Animation 系列二

《图层树和寄宿图 -- iOS Core Animation 系列一》介绍了图层的基础知识和一些属性方法。这篇主要内容是学习下图层在父图层上怎么控制位置和尺寸的...

10430
来自专栏腾讯NEXT学位

CSS布局解决方案(下)

25870
来自专栏C/C++基础

CSS3制作3D水晶糖果按钮

本人仿照20个漂亮 CSS3 按钮效果及优秀的制作教程中的BonBon(Candy)Button实现了其棒棒糖果按钮,如下图所示:

12510
来自专栏進无尽的文章

UI篇-CATextLayer和 富文本的交融

CATextLayer适用于IOS或者MAC,比UIlablel 和 NSTextView 能做的事很多,可以这样说UIlablel是通过CATextLayer...

32110
来自专栏吴老师移动开发

【iOS开发】iOS 动画详解

在移动开发中,为了提高用户体验,会用到一些动画来提高应用的视觉效果。让人有眼前一亮的感觉。同时有动画的过渡过程,会让应用看起来不是那么的生硬,更吸引用户。

29760

扫码关注云+社区

领取腾讯云代金券