UIKit与Core Graphics绘图基础(一):元素与效果

概述

CoreGraphics也称为Quartz 2D 是UIKit下的主要绘图系统,频繁的用于绘制自定义视图。Core Graphics是高度集成于UIView和其他UIKit部分的。Core Graphics数据结构和函数可以通过前缀CG来识别。

视图可以通过子视图、图层或实现drawRect:方法来表现内容,如果说实现了drawRect:方法,那么最好就不要混用其他方法了,如图层和子视图。自定义绘图大部分是由UIKit或者Core Graphics来实现的。

2D绘图一般可以拆分成以下几个操作:


  • 线条
  • 路径
  • 文本
  • 图片
  • 渐变

由于像素是依赖于目标的,所以2D绘图并不能操作单独的像素,我们可以从上下文(Context)读取它。

绘图就好比在画布上拿着画笔机械的进行画画,通过制定不同的参数来进行不同的绘制。

绘入字符串

调用NSString类里的实例方法drawAtPoint: withFont:方法可以进行绘制。

我们可以遍历设备支持的字体来随机选择一个,然后绘制到drawRect中。

登录后复制


NSString *fontName = @"";
    
    NSUInteger count1 = arc4random() % ([UIFont familyNames].count);
    NSString *familyName = [UIFont familyNames][count1];
    NSUInteger count2 = [UIFont fontNamesForFamilyName:familyName].count;
    fontName = [UIFont fontNamesForFamilyName:familyName][arc4random() % count2];
    
    UIFont *font = [UIFont fontWithName:fontName size:30.0f];
    NSString *string = @"Core Graphics";
    [string drawAtPoint:CGPointMake(30.0f, 100.0f) withFont:font];
    
    
效果
UIKit和Core Graphics绘图(一)——字符串,线条,矩形,渐变_2d

绘制图片

绘制图片方法类似于绘入字符串,调用UIImage的实例方法drawAtPoint:或者drawInRect:来实现对图片的绘制,前者是从某点开始绘制,而后一个方法是在制定的矩形内进行绘制,会进行适当的缩放。


画线

线的画法比较简单,首先获取当前上下文,然后调用其设置线的相关信息,例如线条的宽度,起始点和终点等。

登录后复制


    //DrawingLine
    [[UIColor brownColor] set];       //设置上下文使用的颜色
    CGContextRef context = UIGraphicsGetCurrentContext();
    
    CGContextSetLineWidth(context, 2.0f);
    CGContextMoveToPoint(context, 30.0f, 150.0f);  // 画笔移动到某点
    CGContextAddLineToPoint(context, 290.0f, 150.0f);
    CGContextStrokePath(context);       //执行绘制
    
    
效果如下

UIKit和Core Graphics绘图(一)——字符串,线条,矩形,渐变_ico_02

 我们看到字的下面有了一条棕色的线。
  

连续绘制线条,并设置交界样式

上下文在绘制一条直线后会定格在刚才绘制的线的末端,这样我们可以再通过CGContextAddLineToPoint方法来设置立即进行下一条线的绘制。在线的交界处,我们可以设置交界的样式(CGLineJoin),这个枚举中有三种样式:

kCGLineJoinMiter——尖角

kCGLineJoinBevel——平角

kCGLineJoinRound——圆形

登录后复制


    //DrawingLinesContinuously
    CGContextSetLineWidth(context, 6.0f);
    CGContextSetLineJoin(context, kCGLineJoinRound);    //线条交汇处样式:圆角
    CGContextMoveToPoint(context, 20.0f, 150.0f);
    CGContextAddLineToPoint(context, 20.0f, 80.0f);
    CGContextAddLineToPoint(context, 290.0f, 80.0f);
    CGContextStrokePath(context);
    
    
效果如下

UIKit和Core Graphics绘图(一)——字符串,线条,矩形,渐变_数组_03

 
   我们也可以在绘制图像前和后来使用CGContextSaveGState(CGContextRef)和CGContextRestoreContext(CGContextRef)方法来保存和清除上下文的状态,这种实现类似于把相应内容推入栈中,然后调用Restore方法之后再全部推出,是上下文状态恢复到绘制之前。
    

绘制矩形

登录后复制


    //DrawingRect
    CGRect strokeRect = CGRectMake(25, 85, 263, 60);
    CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);
    CGContextSetLineWidth(context, 2.0f);
    CGContextStrokeRect(context, strokeRect);
    
    
绘制完成后效果
UIKit和Core Graphics绘图(一)——字符串,线条,矩形,渐变_数组_04

 然后可以调用CGContextFillRect(CGContextRef)方法来填充矩形
    
    
    
    
    登录后复制
    
    //FillRect
    UIColor *clearRed = [UIColor colorWithRed:0.5 green:0.0 blue:0.0 alpha:0.2];
    CGContextSetFillColorWithColor(context, clearRed.CGColor);
    CGContextFillRect(context, strokeRect);
    
    
效果

UIKit和Core Graphics绘图(一)——字符串,线条,矩形,渐变_子视图_05

绘制线性渐变效果

绘制渐变效果首相要创建一个CGGradientRef,创建它需要调用一个方法CGGradientRef CGGradientCreateWithColors(
CGColorSpaceRef space,
CFArrayRef colors,
const CGFloat locations[]
);

需要一个色彩空间梯度,还有颜色的数组以及只读位置数组。

首先先把之前填充颜色的代码注释掉,然后开始绘制渐变。

登录后复制


    //DrawingGradient
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    NSArray *colors = @[(__bridge id)[UIColor colorWithRed:0.3 green:0.0 blue:0.0 alpha:0.2].CGColor,
                        (__bridge id)[UIColor colorWithRed:0.0 green:0.0 blue:1.0 alpha:0.8].CGColor];
    const CGFloat locations[] = {0.0, 1.0};
    
    CGGradientRef gradient = CGGradientCreateWithColors(colorSpace, (__bridge CFArrayRef)colors, locations);
    
    CGPoint startPoint = CGPointMake(CGRectGetMinX(strokeRect), CGRectGetMinY(strokeRect)); //矩形最小x,y
    CGPoint endPoint = CGPointMake(CGRectGetMaxX(strokeRect), CGRectGetMaxY(strokeRect));   //矩形最大x,y
    
    CGContextSaveGState(context);
    CGContextAddRect(context, strokeRect);
    CGContextClip(context);
    CGContextDrawLinearGradient(context, gradient, startPoint, endPoint, 0); //开始绘制
    CGContextRestoreGState(context);
    
    //释放资源
    CGGradientRelease(gradient);
    CGColorSpaceRelease(colorSpace);
    
    
效果如下

UIKit和Core Graphics绘图(一)——字符串,线条,矩形,渐变_ico_06

 这时背景的渐变效果就出来了。
    

 以上为本篇文章全部内容,欢迎指正和交流。转载注明出处~
    


免责声明:本文系网络转载或改编,未找到原创作者,版权归原作者所有。如涉及版权,请联系删

QR Code
微信扫一扫,欢迎咨询~

联系我们
武汉格发信息技术有限公司
湖北省武汉市经开区科技园西路6号103孵化器
电话:155-2731-8020 座机:027-59821821
邮件:tanzw@gofarlic.com
Copyright © 2023 Gofarsoft Co.,Ltd. 保留所有权利
遇到许可问题?该如何解决!?
评估许可证实际采购量? 
不清楚软件许可证使用数据? 
收到软件厂商律师函!?  
想要少购买点许可证,节省费用? 
收到软件厂商侵权通告!?  
有正版license,但许可证不够用,需要新购? 
联系方式 155-2731-8020
预留信息,一起解决您的问题
* 姓名:
* 手机:

* 公司名称:

姓名不为空

手机不正确

公司不为空