7 绘图和手势: Core Graphics(核心绘图)/UIGestureRecognizer(手势) - 斯坦福 iOS

一些结构体

 //CGFloat:
 //CGPoint: 有 CGFloat x 和 CGFloat y 两个元素
 //CGSize: 有 CGFloat width 和 CGFloat height 两个属性
 //CGRect: 有 CGPoint origin 和 CGSize size 两个属性

View 的创建方法

 //view 的创建方法
 - (void)awakeFromNib;
 - (void)init;
 - (void)initWithFrame:(CGRect)aRect;

 //view 的添加和移除方法
 - (void)addSubview:(UIView *)aView;
 - (void)removeFromSuperView;

 //@property(nonatomic) CGRect bounds;  //它描述了在它自己的坐标系中的位置和大小
 //@property(nonatomic) CGPoint center; //描述了父视图的中心位置
 //@property(nonatomic) CGRect frame;   //它描述了在它在父视图坐标系统视图的位置和大小

Custom Views

 - (void)drawRect:(CGRect)aRect;    //实现这个方法就可以绘制内容, 这个方法是系统自动调用的, 不用手动调用(每次调用这个方法会刷新上下文)
 - (void)setNeedsDisplay;   //重新绘制视图(它会调用 drawRect 方法)
 - (void)setNeedsDisplayInRect:(CGRect)aRect;  //传进来的矩形会被重绘 

 //如何实现 drawRect:? 
    方法是使用 Quartz 库,叫做 Core Graphics(核心绘图) \
    Core Graphics 有很多 C 函数,函数名以 CG 开头, 几乎都以 context上下文 作为第一个参数 \
    还可以使用 UIBezierPath 类, UIBezierPath类可以把各种复杂的形状, 组成一个大的路径 \
    然后你可以在屏幕止对其进行描边或填充 \

 //Core Graphics(核心绘图) 的基本流程 \
    1.你需要有一个绘制的Context(上下文) \
    2.你需要创建路径 \
    3.然后设置颜色,线宽,描边,填充等属性 \
    4.对路径进行描边和填充 \

 //UIBezierPath 封装了上面4步的全部操作(其实也是操作上下文)
 //1.如何获得上下文? \
    一般 UIKit 会在调用 drawRect: 前设置好上下文, 所以当执行到 drawRect: 时上下文就可以使用了 \
    //CGContextRef context = UIGraphicsGetCurrentContext(); //如果在 drawRect: 中调用这个方法就可以获取上下文 \

 //2.如何定义路径? \
    UIBezierPath *path = [[UIBezierPath alloc] init]; //创建一个路径(画三角形) \

    [path moveToPoint:CGPointMake(75,10)];      //移动到点 \
    [path addLineToPoint:CGPointMake(160,150)]; //连线到点 \
    [path addLineToPoint:CGPointMake(10.150)];  //连线到点 \

    [path closePath];   //封闭路径 \

 //3.如何设设置颜色,线宽,描边,填充等属性?(除了描边和填充其它的都用 UIBezierPath类 进行设置) \

    //[[UIColor greenColor] set];   //调用 set 方法会把描边和填充设置为一个颜色
    [[UIColor greenColor] setFill]; //设置填充的颜色
    [[UIColor redColor] setStroke]; //设置描边的颜色
    path.lineWidth = 2.0;   //设置线宽为2

 //4.如何进行描边和填充? \

    [path fill];
    [path stroke];

UIBezierPath 的一些其它方法

    //1.bezierPathWithRoundedRect: cornerRadius: 方法返回一个圆角矩形 \
    UIBezierPath *roundedRect = [UIBezierPath bezierPathWithRoundedRect:(CGRect)bounds cornerRadius:(CGFloat)radius]; \

    //2.使用 UIBezierPath 来裁剪绘图 \
    如果你想绘制某种图案, 但是想让它出现在一个圆角矩形内 \
    你只要生成一个圆角矩形, 然后调用 addClip 方法 \
    从这之后,你的所有绘图都会被裁剪, 出现在那个圆角矩形路径内, 并且还可以添加更多的裁剪区域 \
    [roundedRect addClip]; \

 //3.上下文的存档与恢复 \
    CGContextSaveGState ( CGContextRef c );    //上下文的存档 \
    CGContextRestoreGState ( CGContextRef c ); //恢复到最近的存档 \


 //4.在上下文中绘制文本(属性字符串), 调用 NSAttributedString 的 drawAtPoint方法 \

     //创建属性化字符串, 添加所需要的属性
    NSAttributedString *text = [[NSAttributedString alloc] initWithString:@"colinwang" attributes:@{}];

    //调用 drawAtPoint: 方法,确定属性化字符串的位置
    [text drawAtPoint:(CGPoint)point];

    //获取文本所占空间的大小
    CGSize textSize = [text size];

 //5.绘制图片是用到 UIImage 中的绘制方法

UIViewContentMode(view的一个属性,它代表 bounds 变化时会发生什么)

文档说明:当 view 大小改变时, 通过选项来校准它的内容

typedef enum {
    UIViewContentModeScaleToFill,(默认,当 view.bounds 时通过拉伸像素来改变内容)
    UIViewContentModeScaleAspectFit,
    UIViewContentModeScaleAspectFill,
    UIViewContentModeRedraw,
    UIViewContentModeCenter,
    UIViewContentModeTop,
    UIViewContentModeBottom,
    UIViewContentModeLeft,
    UIViewContentModeRight,
    UIViewContentModeTopLeft,
    UIViewContentModeTopRight,
    UIViewContentModeBottomLeft,
    UIViewContentModeBottomRight,
} UIViewContentMode;

UIGestureRecognizer(手势)

 //UIGestureRecognizer 是一个抽象类, 不能对它进行实例化
 //手势识别器的使用步骤 \
    1.创建手势识别器,并添加到视图中 \
    2.提供一个处理器,当手势发生时要调用的方法

 //在输出口添加手势识别
 - (void)setPannableView:(UIView *)pannableView{

    _pannableView = pannableView;

    //1创建拖动手势
    UIPanGestureRecognizer *pangr = 
        [[UIPanGestureRecognizer alloc] initWithTarget:pannableView action:@selector(pan:)];

    //把手势加入到目标视图中
    [pannableView addGestureRecognizer:pangr];

 }

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

    if((recognizer.state == UIPanGestureRecognizerStateChanged) || (recognizer.state == UIPanGestureRecognizerStateEnded)){

        //获得拖动后的位置
        CGPoint translation = [recognizer translationInView:self];
        self.origin = CGPointMake(self.origin.x + translation.x, self.origin.y + translation.y);
    
        //重置
        [recognizer setTranslation:CGPointZero inView:self];
    }
 }

手势动作

 UIPanGestureRecognizer      拖动手势
 UIPinchGestureRecognizer    捏合手势
 UIRotationGestureRecognizer 旋转手势
 UILongPressGestureRecognizer  长按手势
 UISwipeGestureRecognizer    滑动手势(不连续手势)
 UITapGestureRecognizer    点击手势(不连续手势)
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,980评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,178评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,868评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,498评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,492评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,521评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,910评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,569评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,793评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,559评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,639评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,342评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,931评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,904评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,144评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,833评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,350评论 2 342

推荐阅读更多精彩内容