学习笔记-斯坦福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 中调用。