Quartz2D矩阵操作和官方demo下载学习 和 裁剪 和 重绘(刷帧) 动画

1.矩阵操作

1.1首先新建一个project，然后搭建界面。首先自定义一个view（创建一个类让其继承自Uiview，然后在storyboard中拖一个view，并改其名称）

1.2代码演示使用

1.2.1未旋转之前

#import "MJView.h"

@implementation MJView

/**
 渐变色
 虚线
 pattern
 blend
 .....
 .....
 阴影
 */

- (void)drawRect:(CGRect)rect
{
    //获取图形上下文对象
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    
    // 将ctx拷贝一份放到栈中
    CGContextSaveGState(ctx);
    
//    CGContextRotateCTM(ctx, M_PI_4 * 0.3);  //图像旋转
//    CGContextScaleCTM(ctx, 0.5, 0.5);//缩放
//    CGContextTranslateCTM(ctx, 0, 150); //平移  往下面走150
    //绘制一个矩形
    CGContextAddRect(ctx, CGRectMake(10, 10, 50, 50));
    //绘制一个椭圆
    CGContextAddEllipseInRect(ctx, CGRectMake(100, 100, 100, 100));
    //绘制一根线段
    CGContextMoveToPoint(ctx, 100, 100);
    CGContextAddLineToPoint(ctx, 200, 250);

    //渲染
    CGContextStrokePath(ctx);
    //将栈顶上下文出栈，替换掉当前的上下文对象（下面所画得椭圆和线段都不会受到上面的影响
    CGContextRestoreGState(ctx);
    
    
    // 矩阵操作
//    CGContextScaleCTM(ctx, 0.5, 0.5); //正确用法应该放到前面
    CGContextStrokePath(ctx);
}

@end

以上代码运行结果为:

1.2.2旋转平移线段和椭圆（将改变状态的代码打开）

#import "MJView.h"

@implementation MJView

/**
 渐变色
 虚线
 pattern
 blend
 .....
 .....
 阴影
 */

- (void)drawRect:(CGRect)rect
{
    //获取图形上下文对象
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    
    // 将ctx拷贝一份放到栈中
    CGContextSaveGState(ctx);
    
    CGContextRotateCTM(ctx, M_PI_4 * 0.3);  //图像旋转
    CGContextScaleCTM(ctx, 0.5, 0.5);//缩放
    CGContextTranslateCTM(ctx, 0, 150); //平移  往下面走150
    
    //绘制一个椭圆
    CGContextAddEllipseInRect(ctx, CGRectMake(100, 100, 100, 100));
    //绘制一根线段
    CGContextMoveToPoint(ctx, 100, 100);
    CGContextAddLineToPoint(ctx, 200, 250);

    //渲染
    CGContextStrokePath(ctx);
    
    CGContextRestoreGState(ctx);
    //绘制一个矩形
    CGContextAddRect(ctx, CGRectMake(10, 10, 50, 50));    //将栈顶上下文出栈，替换掉当前的上下文对象（下面所画得椭圆和线段都不会受到上面的影响
    
    // 矩阵操作
//    CGContextScaleCTM(ctx, 0.5, 0.5); //正确用法应该放到前面
    CGContextStrokePath(ctx);
}

@end

以上代码运行结果为

2.官方demo下载学习

2.1.打开文档

2.2搜索Quartz2D

搜索到Quartz2D后点击

Open Project

即可自动下载

这个时候它会默认下载到'下载'当中“，然后打开运行即可学习到权威的demo，运行效果如下，里面有很多demo，进入即可学习

3.裁剪

首先上一份代码

#import "MJClipView.h"

@implementation MJClipView

- (void)drawRect:(CGRect)rect
{
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    //讲ctx拷贝一份放到栈中
//    CGContextSaveGState(ctx);
    
    // 0.画圆
    CGContextAddEllipseInRect(ctx, CGRectMake(100, 100, 50, 50));
    <p style="margin-top: 0px; margin-bottom: 0px; font-size: 14px; font-family: 'Heiti SC Light'; color: rgb(151, 20, 31);"><span style="font-family: Menlo; color: rgb(0, 0, 0);">   </span><span style="font-family: Menlo;">// </span>裁剪（将当前上下文的形状按照上面画得那个圆的形状裁剪出来，以后添加的内容只能放到这个形状里面去）</p>
    CGContextClip(ctx);
    CGContextFillPath(ctx);
    
    // 1.显示图片
    UIImage *image = [UIImage imageNamed:@"me"];
    [image drawAtPoint:CGPointMake(100, 100)];
    //将栈顶上下文出栈替换当前上下文
//    CGContextRestoreGState(ctx);
    //画一个矩形
    CGContextAddRect(ctx, CGRectMake(0, 0, 50, 50));
    CGContextFillPath(ctx);
}

@end

以上代码运行结果如下

由上可以看书当  设置了裁剪之后，则后面的内容都只能在所裁剪出来的区域内显示

只有设置图形上下文后，则后面的内容才不会受影响（打开图形上下文的代码后）

4.重绘(刷帧)

首先新建一个project，然后自定义一个view

再拖一个  Horizontal Slider 控件（如上图）

代码：

控制器.m文件

#import "MJViewController.h"
#import "MJView.h"
/**
 *  实现逻辑:当拖动滑块的时候将滑块的值传递给radius属性，然后radius属性从新为半径，刷新图形
 */
@interface MJViewController ()
- (IBAction)sizeChange:(UISlider *)sender;
@property (weak, nonatomic) IBOutlet MJView *circleView;

@end

@implementation MJViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
	// Do any additional setup after loading the view, typically from a nib.
}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

- (IBAction)sizeChange:(UISlider *)sender {
    self.circleView.radius = sender.value;  //将滑块的值传递给半径
}
@end

自定义view .m文件

#import "MJView.h"

@implementation MJView

- (void)setRadius:(float)radius
{
    _radius = radius;
    
    [self setNeedsDisplay];  //调用这个方法的时候就会调用drawRect:这个方法
}

/**
 *  默认只会在view第一次显示的时候调用(只能由系统自动调用, 不能手动调用)
 */
- (void)drawRect:(CGRect)rect
{
    NSLog(@"drwract---%f", self.radius);
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    
    CGContextAddArc(ctx, 125, 125, self.radius, 0, M_PI * 2, 0);
    
    CGContextFillPath(ctx);
}

@end

运行结果（当拖动滑块的时候圆就随着变化）

5.动画

5.1创建一个project，然后自定义一个继承自UIView的view，并且让这个自定义的view成为控制器的view

5.2代码实现

#import "MSnowView.h"

@interface MSnowView()
@property (nonatomic, assign) CGFloat snowY;
@end

@implementation MSnowView
/**
 *  当一个view从storyboard中创建的话就会调用这个方法（系统自动调用）
 */
- (void)awakeFromNib
{    //创建定时器
    CADisplayLink *link = [CADisplayLink displayLinkWithTarget:self selector:@selector(setNeedsDisplay)];//调用这个setNeedsDisplay方法就会重新调用drawRect:这个方法
    //添加到主消息循环  启动  （默认一秒刷新60次）
    [link addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode];
    
//[NSTimer scheduledTimerWithTimeInterval:0.1 target:selfselector:@selector(setNeedsDisplay) userInfo:nil repeats:YES];
    //每隔0.1秒就刷新一次（每隔0.1秒就调用setNeedsDisplay一次）
}
/**
 *  默认只会在view第一次显示的时候调用(只能由系统自动调用, 不能手动调用)  ，只有调用setNeedsDisplay这个方法之后才会再次调用drawRect:这个方法
 *
 *  @param rect <#rect description#>
 */
- (void)drawRect:(CGRect)rect
{
    self.snowY+=5;
    
    if (self.snowY >= rect.size.height) {
        self.snowY = -100;
    }
    
    UIImage *image = [UIImage imageNamed:@"snow.jpg"];
    [image drawAtPoint:CGPointMake(0, self.snowY)];
}


@end

5.3运行结果