iOS绘图—— UIBezierPath 和 Core Graphics

前言

iOS系统本身提供了两套绘图的框架,即UIBezierPathCore Graphics。而前者所属UIKit,其实是对Core Graphics框架关于path的进一步封装,所以使用起来比较简单。但是毕竟Core Graphics更接近底层,所以它更加强大。

UIBezierPath

可以创建基于矢量的路径,例如椭圆或者矩形,或者有多个直线和曲线段组成的形状。

使用UIBezierPath,你只能在当前上下文中绘图,所以如果你当前处于UIGraphicsBeginImageContextWithOptions函数或drawRect:方法中,你就可以直接使用UIKit提供的方法进行绘图。如果你持有一个context:参数,那么使用UIKit提供的方法之前,必须将该上下文参数转化为当前上下文。幸运的是,调用UIGraphicsPushContext 函数可以方便的将context:参数转化为当前上下文,记住最后别忘了调用UIGraphicsPopContext函数恢复上下文环境。

简言之:我们一般使用UIBezierPath都是在重写的drawRecrt方法这种情形。其绘图的步骤是这样的:

  • 1.重写drawRect方法。但不需要我们自己获取当前上下文context;
  • 2.创建相应图形的UIBezierPath对象,并设置一些修饰属性;
  • 3.渲染,完成绘制。
- (void)drawRect:(CGRect)rect // 1.重写drawRect方法
{
    UIBezierPath* aPath = [UIBezierPath bezierPathWithRect:CGRectMake(20, 20, 100, 50)]; // 2.创建图形相应的UIBezierPath对象

    // 3.设置一些修饰属性
    aPath.lineWidth = 8.0;
    aPath.lineCapStyle = kCGLineCapRound;
    aPath.lineJoinStyle = kCGLineCapRound;
    UIColor *color = [UIColor colorWithRed:0 green:0 blue:0.7 alpha:1];
    [color set]; 

    [aPath stroke]; // 4.渲染,完成绘制
}

需要理解的东西不多,主要是一些代码需要记忆。所以就不写代码了,直接看别人的代码:绘图1-UIBezierPath


Core Graphics

这是一个绘图专用的API族,它经常被称为QuartZ或QuartZ 2D。Core Graphics是iOS上所有绘图功能的基石,包括UIKit。

要搞清楚Core Graphics就要搞清楚下面几个问题:

** 1.绘图需要 CGContextRef**

CGContextRef即图形上下文。可以这么理解,我们绘图是需要一个载体或者说输出目标,它用来显示绘图信息,并且决定绘制的东西输出到哪个地方。可以形象的比喻context就像一个“画板”,我们得把图形绘制到这个画板上。所以,绘图必须要先有context。

** 2.怎么拿到context?**

第一种方法是利用cocoa为你生成的图形上下文。当你子类化了一个UIView并实现了自己的drawRect:方法后,一旦drawRect:方法被调用,Cocoa就会为你创建一个图形上下文,此时你对图形上下文的所有绘图操作都会显示在UIView上。

第二种方法就是创建一个图片类型的上下文。调用UIGraphicsBeginImageContextWithOptions函数就可获得用来处理图片的图形上下文。利用该上下文,你就可以在其上进行绘图,并生成图片。调用UIGraphicsGetImageFromCurrentImageContext函数可从当前上下文中获取一个UIImage对象。记住在你所有的绘图操作后别忘了调用UIGraphicsEndImageContext函数关闭图形上下文。

简言之:

  • 重写UIView的drawRect方法,在该方法里便可得到context;
  • 调用UIGraphicsBeginImageContextWithOptions方法得到context;

** 3.注意**

并不是说一提到绘图,就一定得重写drawRect方法,只是因为通常情况下我们一般采用在drawRect方法里获取context这种方式。

** 4.drawRect方法什么时候触发**

  • 1.当view第一次显示到屏幕上时;
  • 2.当调用view的setNeedsDisplay或者setNeedsDisplayInRect:方法时。

步骤:

  • 1.先在drawRect方法中获得上下文context;
  • 2.绘制图形(线,图形,图片等);
  • 3.设置一些修饰属性;
  • 4.渲染到上下文,完成绘图。
#import "CustomView.h"

@implementation CustomView

- (void)drawRect:(CGRect)rect
{
    // 1.获取上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();

    // --------------------------实心圆

    // 2.画图
    CGContextAddEllipseInRect(ctx, CGRectMake(10, 10, 50, 50));
    [[UIColor greenColor] set];

    // 3.渲染
    CGContextFillPath(ctx);

    // --------------------------空心圆

    CGContextAddEllipseInRect(ctx, CGRectMake(70, 10, 50, 50));
    [[UIColor redColor] set];
    CGContextStrokePath(ctx);

    // --------------------------椭圆
    //画椭圆和画圆方法一样,椭圆只是设置不同的长宽
    CGContextAddEllipseInRect(ctx, CGRectMake(130, 10, 100, 50));
    [[UIColor purpleColor] set];
    CGContextFillPath(ctx);

    // --------------------------直线
    CGContextMoveToPoint(ctx, 20, 80); // 起点
    CGContextAddLineToPoint(ctx, self.frame.size.width-10, 80); //终点
//    CGContextSetRGBStrokeColor(ctx, 0, 1.0, 0, 1.0); // 颜色
    [[UIColor redColor] set]; // 两种设置颜色的方式都可以
    CGContextSetLineWidth(ctx, 2.0f); // 线的宽度
    CGContextSetLineCap(ctx, kCGLineCapRound); // 起点和重点圆角
    CGContextSetLineJoin(ctx, kCGLineJoinRound); // 转角圆角
    CGContextStrokePath(ctx); // 渲染(直线只能绘制空心的,不能调用CGContextFillPath(ctx);)

    // --------------------------三角形
    CGContextMoveToPoint(ctx, 10, 150); // 第一个点
    CGContextAddLineToPoint(ctx, 60, 100); // 第二个点
    CGContextAddLineToPoint(ctx, 100, 150); // 第三个点
    [[UIColor purpleColor] set];
    CGContextClosePath(ctx);
    CGContextStrokePath(ctx);

    // --------------------------矩形
    CGContextAddRect(ctx, CGRectMake(20, 170, 100, 50));
    [[UIColor orangeColor] set];
//    CGContextStrokePath(ctx); // 空心
    CGContextFillPath(ctx);

    // --------------------------圆弧
    CGContextAddArc(ctx, 200, 170, 50, M_PI, M_PI_4, 0);
    CGContextClosePath(ctx);
    CGContextFillPath(ctx);

    // --------------------------文字
    NSString *str = @"你在红楼,我在西游";
    NSMutableDictionary *dict = [NSMutableDictionary dictionary];
    dict[NSForegroundColorAttributeName] = [UIColor whiteColor]; // 文字颜色
    dict[NSFontAttributeName] = [UIFont systemFontOfSize:14]; // 字体

    [str drawInRect:CGRectMake(20, 250, 300, 30) withAttributes:dict];

    // --------------------------图片
    UIImage *img = [UIImage imageNamed:@"yingmu"];
//    [img drawAsPatternInRect:CGRectMake(20, 280, 300, 300)]; // 多个平铺
//    [img drawAtPoint:CGPointMake(20, 280)]; // 绘制到指定点,图片有多大就显示多大
    [img drawInRect:CGRectMake(20, 280, 80, 80)]; // 拉伸
}

绘图它能干什么?为什么要学习它?

我们常用绘图来自定义一些视图控件,以达到我们个性化的需求。

若自定义视图控件:我们可以子类化一个UIView,然后重写它的drawRect方法。在drawRect里进行图形绘制,从而实现自定义控件,完成酷炫个性化的控件。

结尾

关于绘图,其实在我当前接触的项目中用得很少,但是以后肯定会接触到。像这种不常用但比较重要的内容,我觉得要做到初步理解,然后梳理总结,到最后深度理解。所以写这篇文章。


作者:Wang66链接:https://www.jianshu.com/p/8e6e960eea7d來源:简书著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

原文地址:https://www.cnblogs.com/needly/p/8274353.html

时间: 2024-07-30 03:45:10

iOS绘图—— UIBezierPath 和 Core Graphics的相关文章

iOS使用Core Graphics和UIBezierPath绘画

通过UIView的子类的- (void)drawRect:(CGRect)rect 函数可用对视图进行重新绘画: 要重新绘画可以通过Core Graphics和UIBezierPath来实现. 1.通过Core Graphics函数来绘画 首先要通过UIGraphicsGetCurrentContex()函数获取当前绘画上下文: 然后设定起点,增加线到一个点,,,,,闭合,例如下面: //获取当前绘画上下文 CGContextRef context= UIGraphicsGetCurrentCo

UIKIt UIBezierPath Core Graphics OpenGL ES Quartz2D的区别和联系

UIKIt:UIKit中的控件都是基于Core Graphics实现的 UIBezierPath:UIBezierPath属于UIKit,它是苹果对复杂的Core Graphics进行的封装,方便我们用OC语言进行简单的绘图 Core Graphics:是一套基于C语言的API,支持向量图形,线.形状.图案.路径.剃度.位图图像和pdf 内容的绘制. OpenGL ES:OpenGL是由SGI公司开发的一套3D图形软件接口标准,它只是一个标准,具体实现由机械制造商来完成,所以不同的机器他的效果可

媒体层:Core Graphics(绘图)

1.简介: 基于C的API,用于绘图, 当使用UIKit来创建按钮.图像或者其他UIView的子类时,UIKit会使用Core Graphics来将这些元素绘制在屏幕上 可创建直线.路径.渐变.文字.图像等内容 CGContextRef:图像上下文.画布 从UIView的子类中获取它的当前上下文UIGraphicsGetCurrentContext(),然后重写drawRect方法 绘图动作是顺序的,每个动作都是在前一个动作的基础上面完成的 只要iOS任务一个视图需要被刷新或者重绘drawRec

IOS开发——Core Graphics & Core Animation

好久没写过blog了,首先了解下最近苹果和IOS方面的最新消息. 1.WWDC2014在上个月举行了,与2013年一样,今年WWDC没发布硬件产品和新品(如果你懂cook你就会期待今年秋季发布会,预计10中旬举行) 今年WWDC有一个最令人兴奋的新语言发布--Swift,小编也花了将近半个月来学习新语言,发现Swift与反人类语言objective-c不同的是完全抛弃了C,更像是js+lua+python+各种脚本语言的集合,这也是时间上最新最先进的开发语言,小道消息说swift今年4岁,也就是

Core Graphics框架 利用Quartz 2D绘图

首先,什么是Core Graphics和Quartz 2D? Core Graphics:是基于Quartz 2D绘图引擎的一个C语言的API绘图框架.它也是iOS开发中最基本的框架(Framework)之一.两点原因,第一是该框架是每一个iOS应用最初被建立时,就被系统默认添加的三个框架(Foundation.UIKit.Core Graphics)之一:另一点是,我们平时常见的各种UIKit框架提供的UI控件,实际上都是由Core Graphics进行绘制的. Quartz 2D:是一个绘图

iOS实现图形编程可以使用三种API(UIKIT、Core Graphics、OpenGL ES及GLKit)

这些api包含的绘制操作都在一个图形环境中进行绘制.一个图形环境包含绘制参数和所有的绘制需要的设备特定信息,包括屏幕图形环境.offscreen 位图环境和PDF图形环境,用来在屏幕表面.一个位图或一个pdf文件中进行图形和图像绘制.在屏幕图形环境中进行的绘制限定于在一个UIView类或其子类的实例中绘制,并直接在屏幕显示,在offscreen位图或PDF图形环境中进行的绘制不直接在屏幕上显示. 一.UIKIT API UIKIT是一组Objective-C API,为线条图形.Quartz图像

iOS绘图教程

Core Graphics Framework是一套基于C的API框架,使用了Quartz作为绘图引擎.它提供了低级别.轻量级.高保真度的2D渲染.该框架可以用于基于路径的绘图.变换.颜色管理.脱屏渲染,模板.渐变.遮蔽.图像数据管理.图像的创建.遮罩以及PDF文档的创建.显示和分析.为了从感官上对这些概念做一个入门的认识,你可以运行一下官方的example code. iOS支持两套图形API族:Core Graphics/QuartZ 2D 和OpenGL ES.OpenGL ES是跨平台的

IOS绘图探索

参考:http://www.cocoachina.com/industry/20140115/7703.html 参考:http://blog.sina.com.cn/s/blog_6b60259a0101c90g.html 参考原文:http://www.cnblogs.com/xdream86/archive/2012/12/12/2814552.html UIBazier使用参考:http://blog.csdn.net/guo_hongjun1611/article/details/78

Swift Core Graphics教程之Gradients 与 Context

原文链接 : Core Graphics Tutorial Part 2: Gradients and Contexts 原文作者 : caroline 译文出自 : 开发技术前线 译者 : HarriesChen 校对者: HarriesChen 更新时间 04/15/2015 为Xcode 6.3 和 Swift1.2更新 欢迎回到我们的Swift核心绘图教程系列! 在第一部分中,你学习到了使用storyboard绘制线条和矩形. 在第二部部分中,你将深入核心绘图,使用CGContext实现