CoreGraphic框架解析（二）—— 基本使用

版本记录

版本号	时间
V1.0	2017.08.08

前言

quartz是一个通用的术语，用于描述在iOS和MAC OS X 中整个媒体层用到的多种技术 包括图形、动画、音频、适配。Quart 2D 是一组二维绘图和渲染API，Core Graphic会使用到这组API，Quartz Core专指Core Animation用到的动画相关的库、API和类。CoreGraphics 是UIKit下的主要绘图系统，频繁的用于绘制自定义视图。Core Graphics是高度集成于UIView和其他UIKit部分的。Core Graphics数据结构和函数可以通过前缀CG来识别。在app中很多时候绘图等操作我们要利用CoreGraphic框架，它能绘制字符串、图形、渐变色等等，是一个很强大的工具。下面几篇就主要介绍CoreGraphics这个工具。感兴趣的可以看我另外几篇。
1. CoreGraphic框架解析（一）—— 基本概览

绘制文字

我们先看一下最基本的绘制文字。

1. JJCoreGraphicTextVC.m

#import "JJCoreGraphicTextVC.h"
#import "JJCoreGraphicTextView.h"

@interface JJCoreGraphicTextVC ()

@end

@implementation JJCoreGraphicTextVC

#pragma mark - Override Base Function

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    self.title = @"CoreGraphic";

    JJCoreGraphicTextView *textView = [[JJCoreGraphicTextView alloc] initWithFrame:self.view.frame];
    textView.backgroundColor = [UIColor lightGrayColor];
    [self.view addSubview:textView];
}

@end

2.JJCoreGraphicTextView.m

#import "JJCoreGraphicTextView.h"

@implementation JJCoreGraphicTextView

#pragma mark - Override Base Function

- (void)drawRect:(CGRect)rect
{
    NSString *contentStr = @"CoreGraphic基本使用";
    [contentStr drawAtPoint:CGPointMake(50.0, 200.0) withAttributes:@{NSForegroundColorAttributeName : [UIColor blueColor],
                                                                      NSFontAttributeName : [UIFont fontWithName:@"DINCondensed-Bold" size:20.0]}];
}

@end

下面看实现效果

CoreGraphic绘制文字

---

绘制线条

下面还是直接看代码。

#import "JJCoreGraphicLineView.h"

@implementation JJCoreGraphicLineView

#pragma mark - Override Base Function

- (void)drawRect:(CGRect)rect
{
    CGContextRef context = UIGraphicsGetCurrentContext();
    //设置上下文使用的颜色
    [[UIColor yellowColor] set];
    CGContextSetLineWidth(context, 4.0);
    CGContextSetShadowWithColor(context, CGSizeMake(10.0f, 10.0f), 20.0f, [UIColor redColor].CGColor);
    CGContextSetLineCap(context, kCGLineCapRound);
    CGContextMoveToPoint(context, 50.0, 200.0);
    CGContextAddLineToPoint(context, 50.0, 400.0);
    CGContextAddLineToPoint(context, 250.0, 400.0);
    CGContextClosePath(context);
    //开始绘制
    CGContextStrokePath(context);
}

@end

下面看效果验证

绘制线条效果

---

绘制基本图形

下面我们就绘制一个简单的矩形。

#import "JJCoreGraphicRectView.h"

@implementation JJCoreGraphicRectView

#pragma mark - Override Base Function

- (void)drawRect:(CGRect)rect
{
    CGContextRef context = UIGraphicsGetCurrentContext();
    //设置上下文使用的颜色
    CGContextSetLineWidth(context, 6.0);
    CGContextSetShadowWithColor(context, CGSizeMake(10.0f, 10.0f), 20.0f, [UIColor yellowColor].CGColor);
    CGContextSetLineCap(context, kCGLineCapRound);
    CGRect strokeRect = CGRectMake(50.0, 100.0, 250.0, 300.0);
    CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor);
    //开始绘制
    CGContextStrokeRect(context, strokeRect);
}

@end

下面看一下效果图。

矩形效果图

---

绘制渐变效果

具体可以参考我写的另外一篇文章。
文章 ：CoreGraphic实现渐变效果

这里直接给出效果图，具体详细代码可以跳过去看。

线性渐变

圆半径外向渐变

后记

未完，后续会在和大家分享一些深层次的东西。

秋