UI基础 - Quartz2D 05：信纸 | 圆的缩放 | 刷帧

信纸

1 - 实现信纸条纹的效果，实际上就是把所要绘制的图形放到 Bitmap 上

#import "ViewController.h"
#define SCREEN_WIDTH   [UIScreen mainScreen].bounds.size.width
#define SCREENH_HEIGHT [UIScreen mainScreen].bounds.size.height
@implementation ViewController

- (void)viewDidLoad{
    [super viewDidLoad];
    self.navigationController.navigationBar.hidden = YES;

    CGFloat height = 35;
    CGSize size = CGSizeMake(SCREEN_WIDTH, height);
    
    // C  方法：CGBitmapContextCreate
    // OC 方法
    // 方式一：UIGraphicsBeginImageContext
    // 方法二：创建一个 Bitmap 上下文：生成一张用于平铺的小图片（第一个方法来创建的图片清晰度、质量都没有第二种方法好）
    // BOOL：YES 代表透明，NO 代表不透明     GFloat scale：是否缩放，0 代表不缩放
    UIGraphicsBeginImageContextWithOptions(size , NO, 0);// 创建出来的 bitmap 就对应一个 UIImage 对象
    
    // 把矩形、线条绘制在图片上
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    CGContextAddRect(ctx, CGRectMake(0, 0, SCREEN_WIDTH, height));
    [[UIColor cyanColor] set];
    CGContextFillPath(ctx);
    // 线条
    CGFloat lineWidth = 1.5;
    CGFloat lineY = height - lineWidth;
    CGFloat lineX = 0;
    // 从矩形底部画起
    CGContextMoveToPoint(ctx, lineX, lineY);
    CGContextAddLineToPoint(ctx, SCREEN_WIDTH, lineY);
    [[UIColor blackColor] set];
    CGContextStrokePath(ctx);// 渲染

    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();// 获取生成的图片
    UIColor *color = [UIColor colorWithPatternImage:image];// 平铺
    UIGraphicsEndImageContext();
    self.view.backgroundColor = color;
    
    
    // 伪代码：如果想要生成的图片保存到本地：先将图片转换为二进制数据，然后再将图片写到文件中
    // NSData *data = UIImagePNGRepresentation(image);
    // [data writeToFile:@"你的路径" atomically:YES];
}

@end

运行效果

圆的缩放

1 - 使用 Slider 控制圆的缩放

// - QuartsView.h

#import <UIKit/UIKit.h>
@interface QuartsView : UIView

// 提供一个属性来接收外界传入的半径
@property(nonatomic,assign)float radius;

@end

// - QuartsView.m

#import "QuartsView.h"
@implementation QuartsView

// 在 set 方法中为半径赋值
-(void)setRadius:(float)radius{
    
    _radius = radius;
    [self setNeedsDisplay];// 重绘
}

// 如果 view 是从 xib 或 storyboard 中创建出来的，会先调用 awakefromnib 方法
- (void)awakeFromNib{
    [super awakeFromNib];
    self.radius = 20;// 在这里为圆的半径设定一个初始的值
}

- (void)drawRect:(CGRect)rect{
  
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    CGContextAddArc(ctx, 180, 200, self.radius, 0, 2*M_PI, 0);
    [[UIColor redColor]set];
    CGContextFillPath(ctx);
}


@end

// - ViewController.m

#import "ViewController.h"
#import "QuartsView.h"
@implementation ViewController

- (void)viewDidLoad{
    [super viewDidLoad];
    self.navigationController.navigationBar.hidden = YES;
    
     // 画布
    QuartsView *QV = [[QuartsView alloc] initWithFrame:self.view.frame];
    QV.backgroundColor = [UIColor cyanColor];
    QV.tag = 200;
    [self.view addSubview:QV];
    QV.radius = 80;
   
    UISlider *slider = [[UISlider alloc] initWithFrame:CGRectMake(10, self.view.frame.size.width, self.view.frame.size.width - 20, 10)];
    slider.minimumTrackTintColor = [UIColor redColor];
    slider.maximumTrackTintColor = [UIColor greenColor];
    slider.minimumValue = 0.1;
    slider.maximumValue = 1.0;
    slider.continuous = YES;
    [self.view addSubview:slider];
    [slider addTarget:self action:@selector(changeSlider:) forControlEvents:UIControlEventValueChanged];
}

-(void)changeSlider:(UISlider *)sender{
    
    QuartsView *QV = (QuartsView *)[self.view viewWithTag:200];
    QV.radius = sender.value * 100;
}

@end

运行效果：thumb 滑至中间

刷帧

1 - 把图片绘制到 view 上，实现该图片在视图中循环下落的效果

#import "QuartsView.h"
@interface QuartsView  ()
@property(nonatomic,assign)float imageY;

@end
@implementation QuartsView


- (instancetype)initWithFrame:(CGRect)frame{
    self = [super initWithFrame:frame];
    if (self) {
        
        // 方式一：定时器出现卡顿的现象
        //[NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(updateImage) userInfo:nil repeats:YES];

        
        // 方式二
        // CADisplayLink 刷帧：默认每秒刷新 60 次。该定时器创建之后默认是不会执行的，需要把它加载到消息循环中
        CADisplayLink *display= [CADisplayLink displayLinkWithTarget:self selector:@selector(updateImage)];
        [display addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode];
    }
    return self;
}

-(void)updateImage{

    [self setNeedsDisplay];
}

// 把图片绘制到 view 上
- (void)drawRect:(CGRect)rect{
    
    // 每次调用该方法对画面进行重绘时，imageY 的值就 +5
    self.imageY += 5;
    // 判断：当雪花超出屏幕的时候让图片从头开始降落
    if (self.imageY > rect.size.height) {
        self.imageY = 0;
    }
    
    UIImage *image = [UIImage imageNamed:@"狗子.jpeg"];
    [image drawAtPoint:CGPointMake(0, self.imageY)];
}

@end