iOS技术

CoreGraphics详解

2022-08-08  本文已影响0人  十三楼的大笨象

一 、前言

iOS开发中我们经常会使用UIButton,UILabel等,这些简单的api可以让我们很快完成常规界面的开发。如果碰到一些需要自定义的界面,我们肯定需要自己绘制。今天就学习记录下iOS中关于绘制的框架CoreGraphics。

二、介绍

Core Graphics是基于Quartz 2D的一个高级绘图引擎,常用于iOS,tvOS,macOS的图形绘制应用开发。Core Graphics是对底层C语言的一个简单封装,其中提供大量的低层次,轻量级的2D渲染API。

系统的绘图框架

系统绘图框架

CoreGraphics的坐标系

UIKit的坐标与Core Graphics的坐标是不一样的,UIKit的坐标默认原点在左上角,而Core Graphics的原点在左下角。通过两个坐标系之间是需要转化后才能使用的。
那为什么我们在drawRect方法中使用CoreGraphics方法绘制内容的时候可以使用UIKit的坐标系?
因为iOS系统在drawRect返回CGContext的时候,默认帮我们进行了一次变换,以方便开发者直接用UIKit坐标系进行渲染。

三、使用

在介绍具体使用之前,我们需要知道,iOS的绘图必须在上下文中绘制,所以绘制前必须先获取上下文。如果是绘制图片,则先获取一个图片上下文,如果是其他视图,就需要获取一个非图片上下文。上下文可以理解为画布,在上面进行绘图。

图形上下文(注意不是图片)context,在drawRect方法中通过UIGraphicsGetCurrentContext获取。
图片上下文imageContext (不必在drawRect方法中),通过UIGraphicsBeginImageContextWithOptions:获取,然后绘制完成后,调用UIGraphicsGetImageFromCurrentImageContext获取绘制的图片,最后要记得关闭图片上下文UIGraphicsEndImageContext。

1、图片上下文使用

图片类型的上下文,不需要在drawRect方法中,在普通的oc方法中就可以进行绘制:

使用Core Graphics绘制
// 获取图片上下文
UIGraphicsBeginImageContextWithOptions(CGSizeMake(60,60), NO, 0);
// 绘图
CGContextRef con = UIGraphicsGetCurrentContext();
CGContextAddEllipseInRect(con, CGRectMake(0,0,60,60));
CGContextSetFillColorWithColor(con, [UIColor blueColor].CGColor);
CGContextFillPath(con);
// 从图片上下文中获取绘制的图片
UIImage* image = UIGraphicsGetImageFromCurrentImageContext();
// 关闭图片上下文
UIGraphicsEndImageContext();
使用UIKit绘制
// 获取图片上下文
UIGraphicsBeginImageContextWithOptions(CGSizeMake(60,60), NO, 0);
// 绘图
UIBezierPath* p = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0,0,60,60)];
[[UIColor blueColor] setFill];
[p fill];
// 从图片上下文中获取绘制的图片
UIImage* image = UIGraphicsGetImageFromCurrentImageContext();
// 关闭图片上下文
UIGraphicsEndImageContext();

2、图形上下文使用

在view的drawRect方法中,实现重新绘制

使用Core Graphics绘制
- (void) drawRect: (CGRect) rect {
    CGContextRef con = UIGraphicsGetCurrentContext();
    CGContextAddEllipseInRect(con, CGRectMake(0,0,60,60));
    CGContextSetFillColorWithColor(con, [UIColor greenColor].CGColor);
    CGContextFillPath(con);
}
使用UIKit绘制
- (void) drawRect: (CGRect) rect {
    UIBezierPath* p = [UIBezierPathbezierPathWithOvalInRect:CGRectMake(0,0,60,60)];
    [[UIColor blueColor] setFill];
    [p fill];
}

3、设置绘图的上下文(context)

- (void)drawRect:(CGRect)rect {
  [[UIColor redColor] setFill];
  UIGraphicsPushContext(UIGraphicsGetCurrentContext());
  [[UIColor blackColor] setFill];
  UIGraphicsPopContext();
  UIRectFill(CGRectMake(100, 100, 100, 100)); // black color
}

可以看到使用UIKit绘制时,我们使用了UIBezierPath。它是对CoreGraphics的进一步封装,所以使用起来更加简单。

上一篇 下一篇

猜你喜欢

热点阅读