学习笔记-斯坦福iOS7-第七课：视图，绘制，手势识别

第七课 视图，绘制，手势识别

1. Views

a. 初始化

. awakeFromNib ：从storyboard来的UIView，不会调用initWithFrame；

. initWithFrame ：代码调用

b. 坐标，单位点，非像素

@property CGFloat contentScaleFactor; // 返回每个点的像素数，Retina返回2，非Retina返回1

c. 位置和大小

CGRect bounds ： 自己坐标系中绘制区域和原点，在其中绘制和处理触控事件；

CGRect frame ：指的是你的父视图坐标系中的一个矩形；

CGPoint center ：在父视图坐标系中所在位置的中心；

注：frame.size 不会永远等于bounds.size ，因为视图能旋转，旋转成菱形后，

2. Custom Views

a. 实现 drawRect；（用Core Graphics）

b. Core Graphics 流程：

. drawRect里拿到context；

. 创建路径；

. 设置颜色，字体，线宽等；

. 对创建的路径描边，填充；

c. UIBezierPath ：封装了上面的流程；将各种复杂形状组成一个大的路径，然后可以对他进行描边或填充；

d. Context

CGContextRef context= UIGraphicsGetCurrentContext();

e. 定义路径 - 三角形

UIBezierPath *path = [UIBezierPath alloc] init];    /// begin the path

[path moveToPoint:CGPointMake(10,10)]; /// move, add lines

[path addLineToPoint:CGPointMake(100, 100)];

[path addLineToPoint:CGPointMake(10, 100)];

[path closePath]; ///
close the path

[[UIColor greenColor] setFill]; /// 设置填充颜色和描边颜色

[[UIColor redColor] setStroke];

[path fill]; /// 填充，描边

[path stroke];

f. 绘制图形

UIBezierPath *round = [UIBezierPath bezierPathWithRounderRect:(CGRect)bounds
cornerRadious:(CGFloat)radius];

[round stroke];

可以设置裁剪，所有绘制都在round区域中：

[round addClip];

g. UIView 绘制透明

. opaque = NO ：不绘制背景色；

. alpha = 0； 整个UIView 透明；

h. subviews 视图的列表顺序，绘制时由后到前

i. 保存和恢复上下文状态

- (void)drawGreen:(CGContextRef)context {

    CGContextSaveGState(context);

    [[UIColor greenColor] setFill];

    /// draw

    CGContextRestoreGState(context);

}

- (void)drawRect:(CGRect)aRect {

    CGContextRef context = UIGraphicsGetCurrentContext();

    [[UIColor redColor] setFill];

    ///

    [self drawGreen:context];

    ///

}

j. draw text

. UILabel;

. NSAttributedString；

h. draw Image

. UIImageVIew；

. UIImage ：

创建UIImage：

[UIImage imageNamed:@“”]; 

or 

[[UIIMage alloc] initWithData:data]; 

or

[[UIIMage alloc] initWithContextsOfFile:path]; 

or

UIGraphicsBeginImageContext(CGSize);

UIImage *myImg = UIGraphicsGetImageFromCurrentContext();

UIGraphicsEndImageContext();

绘制：

[image drawAtPoint:point]; /// point 位置上绘制image；

[image drawInRect:rc]; /// 缩放image绘制到rc区域中；

[image drawAsPatternInRect:patRect]; /// 平铺图像，至填满patRect；

///

NSData *jpgData = UIImageJPEGRepresentation(..);

NSData *pngData = UIImagePNGRepresentation(..);

i.  bounds 发生改变，重绘

通常情况下UIView 的bounds 发生改变，不会重绘，view 会拉伸或移动；

但上面不是我们想要的，还好有下面属性：

UIViewContentMode contentMode；

UIViewContentMode{Left，Right，…}  // 移动到绘制的位置；

UIViewContentModeScale{ToFill, AspectFill … } // 拉伸；

UIViewContentModeRedraw // 调用 drawRect：；

默认是UIViewContentModeScaleToFill

3. UIGestureRecognizer  手势

a. 添加手势到控制器

- (void)setpaunableview:(UIView*)pannableView {

    _pannableView = pannableView;

    UIPanGestureRecognizer *pangr = [[UIPanGestureRecognizer alloc] initWithTarget:pannableView action:@selector(pan:)];

    [pannableView addGestureRecognizer:pangr];

}

 

- (void)pan:(UIPanGestureRecognizer*)recognizer {

    if((recognize.state == UIGestureRecognizerStateChange) ||

       (recognize.state == UIGestureRecognizerStateEnded)) {

        CGPoint translation = [recognizer translationInView:self];
 self.origin = CGPointMake(self.origin.x + translation.x, self.origin.y + translation.y);

        [recognizer setTranslation:CGPointZero inView:self];

    }

}

b. 其他手势

. UIPinchGestureRecognizer 

  @property CGFloat scale;

  @property (readonly) CGFloat velocity;

. UIRotationGestureRecognizer

  @property CGFloat rotation;

  @property (readonly) CGFloat velocity;

. UISwipeGestureRecognizer

  @property UISwipeGestureRecognizerDirection direction;

  @property NSUInteger numberOfTouchesRequired;

. UITapGestureRecongnizer

  @property NSUInteger numberOfTapsRequired;

  @property NSUInteger numberOfTouchesRequired;

4. Demo - 绘制扑克牌 ， 自绘功能讲的很好！

a. view 里添加 drawRect 自绘时，需要设置：

. self.backgroundColor = nil;   // 不绘制背景色

. self.opaque = NO;               // 设置透明

. self.contentMode = UIViewContentModeRedraw;  // bound 发生变化时，重绘

注：如果view是从storyboard 生成的，上面的初始化需要从 awkeFromNib 中调用。