iOS开发UI篇—Quartz2D简单使用（三）

时间：2016-08-10 14:01:58 阅读：242 评论：0 收藏：0 [点我收藏+]

标签：

一、通过slider控制圆的缩放

1.实现过程

新建一个项目，新建一个继承自UIview的类，并和storyboard中自定义的view进行关联。

界面搭建，如图：

代码示例：

　　YYViewController.m文件

 1 //
 2 //  YYViewController.m
 3 //  04-对圆进行缩放
 4 //
 5 //  Created by apple on 14-6-11.
 6 //  Copyright (c) 2014年 itcase. All rights reserved.
 7 //
 8 
 9 #import "YYViewController.h"
10 #import "YYView.h"
11 
12 @interface YYViewController ()
13 @property (weak, nonatomic) IBOutlet YYView *circleView;
14 - (IBAction)valueChange:(UISlider *)sender;
15 
16 @end
17 
18 @implementation YYViewController
19 
20 - (void)viewDidLoad
21 {
22     [super viewDidLoad];
23     // Do any additional setup after loading the view, typically from a nib.
24 }
25 
26 
27 - (IBAction)valueChange:(UISlider *)sender {
28     // 当值改变的时候，把值传递给view,改变圆的半径
29     NSLog(@"%f",sender.value);
30     // 把sender的值传递给自定义view，设置圆的半径
31     self.circleView.radius = sender.value;
32 }
33 @end

YYView.h文件

//
//  YYView.h
//  04-对圆进行缩放
//
//  Created by apple on 14-6-11.
//  Copyright (c) 2014年 itcase. All rights reserved.
//

#import <UIKit/UIKit.h>

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

YYView.m文件

 1 //
 2 //  YYView.m
 3 //  04-对圆进行缩放
 4 //
 5 //  Created by apple on 14-6-11.
 6 //  Copyright (c) 2014年 itcase. All rights reserved.
 7 //
 8 
 9 #import "YYView.h"
10 
11 @implementation YYView
12 // 自定义view中的圆不显示
13 // 重写set方法，为半径赋值
14 -(void)setRadius:(float)radius
15 {
16     _radius = radius;
17     // 通知自定义的view重新绘制图形
18     [self setNeedsDisplay];
19 }
20 
21 // 如果view是从xib或storyboard中创建出来的会先调用awakefromnib方法
22 - (void)awakeFromNib
23 {
24     // 在这里为圆的半径设定一个初始的值
25     self.radius = 20;
26 }
27 
28 - (void)drawRect:(CGRect)rect
29 {
30     // 1.获取图形上下文
31     CGContextRef ctx = UIGraphicsGetCurrentContext();
32     // 2.绘图
33     // 在自定义的view中画一个圆
34     CGContextAddArc(ctx, 100, 100, self.radius, 0, 2*M_PI, 0);
35     // 设置圆的填充颜色
36     [[UIColor grayColor] set];
37     
38     // 3.渲染
39 //    CGContextStrokePath(ctx);
40     CGContextFillPath(ctx);
41 }
42 
43 
44 @end

　　效果：

技术分享

2.注意点：

drawRect:方法不能由我们自己手动调用，只能由系统来调用。

drawRect:调用的时机：当第一次显示或者一个重绘事件发生时调用。

setNeedsDisplay方法：重新绘制，调用这个方法就会通知自定义的view重新绘制画面，调用drawRect:。

提示：当一个view从xib或storyboard创建出来时，会调用awakefromnib方法。

3.补充

可以通过slider的value属性监听值的改变，当然也可以指定value的取值范围（这里设定为0~100）。

二、刷帧效果

说明：把雪花状的图片绘制到view上，实现图片在视图中下落的效果。

　　1.实现代码：

 1 //
 2 //  YYView.m
 3 //  05-刷帧动画
 4 //
 5 //  Created by apple on 14-6-11.
 6 //  Copyright (c) 2014年 itcase. All rights reserved.
 7 //
 8 
 9 #import "YYView.h"
10 
11 // 私有扩展
12 @interface YYView  ()
13 @property(nonatomic, assign) float imageY;
14 
15 @end
16 @implementation YYView
17 
18 
19 -(id)initWithCoder:(NSCoder *)aDecoder
20 {
21     // 请注意这里一定要先初始化父类的构造方法
22     if (self = [super initWithCoder:aDecoder]) {
23         NSLog(@"initWithCoder:");
24         
25         // NSTimer一般用于定时的更新一些非界面上的数据,告诉多久调用一次
26         // 使用定时器,使用该定时器会出现卡顿的现象
27 //        [NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(updateImage) userInfo:nil repeats:YES];
28         
29         //  CADisplayLink刷帧，默认每秒刷新60次
30         // 该定时器创建之后，默认是不会执行的，需要把它加载到消息循环中
31        CADisplayLink *display = [CADisplayLink displayLinkWithTarget:self selector:@selector(updateImage)];
32         [display addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode];
33      
34     }
35     return self;
36 }
37 
38 -(void)updateImage
39 {
40     // 调用该方法重绘画面
41     [self setNeedsDisplay];
42 }
43 -(void)awakeFromNib
44 {
45     NSLog(@"awakeFromNib");
46 }
47 
48 - (void)drawRect:(CGRect)rect
49 {
50     // 把图片绘制到view上
51 
52     // 每次调用该方法对画面进行重绘时，imageY的值就+5
53     self.imageY += 5;
54       // 判断，当雪花超出屏幕的时候，让图片从头开始降落
55     if (self.imageY > rect.size.height) {
56         self.imageY = 0;
57     }
58     UIImage *image = [UIImage imageNamed:@"snow"];
59     [image drawAtPoint:CGPointMake(0, self.imageY)];
60 
61     UIImage *image2 = [UIImage imageNamed:@"me"];
62     [image2 drawAtPoint:CGPointMake(80, self.imageY)];
63     
64 }
65 
66 @end