iOS--玩玩苹果的绘制(Quartz)

对于日常的开发我们一般用不到Quzrtz,不过当我们需要设计的一些奇葩的图像图形的的时候,这时候Core Graphics 就有很大的作用了。
举个🌰:imageView layer圆角,离屏渲染影响性能,好嘛,不用了!直接用CG设置图片圆角。妈妈在也不不怕爱啪啪帧数低了。
经理又觉得你的提示框方方正正太丑了,要来点个性的。没办法只能改嘛,怎么改?找CG啊!
现在,我们一点一点来看这个Quzrtz是个什么鬼。

前提准备

//热身运动
 //获取上下文环境
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    //设置画环境中线的颜色
    CGContextSetStrokeColorWithColor(ctx, [UIColor redColor].CGColor);
===
===
 //填充路径
     CGContextStrokePath(ctx);

上面的3步,是必不可少的。当然绘制的内容,我们一点一点说。

绘制lines

    //获取上下文环境
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    //设置画环境中线的颜色
    CGContextSetStrokeColorWithColor(ctx, [UIColor redColor].CGColor);
    //设置回执起点
    CGContextMoveToPoint(ctx, 10, 10);
    CGPoint points[] = {
        CGPointMake(20, 20),
        CGPointMake(30, 30),
        CGPointMake(40, 40),
        CGPointMake(50, 50),
        CGPointMake(60, 70),
        CGPointMake(80, 80),

    };
//连续绘制路径
    CGContextAddLines(ctx, points, sizeof(points)/sizeof(points[0]));
    //填充路径
     CGContextStrokePath(ctx);

    CGPoint points1[] = {
        CGPointMake(120, 20),
        CGPointMake(130, 30),
        CGPointMake(140, 40),
        CGPointMake(150, 50),
        CGPointMake(160, 70),
        CGPointMake(180, 80),

    };
//分段绘制路径
    CGContextStrokeLineSegments(ctx, points1, sizeof(points1)/sizeof(points1[0]));
     CGContextStrokePath(ctx);
0F0C3C50-1D82-49B2-A6F9-F649CAB6983F.png

上面 2种线条的效果图
对于线条还可以设置一些属性
1.宽度(必须的0.0)

CGContextSetLineWidth(ctx, 10);

2.设置line cap 就是线条棱角的样式(3种样式)

typedef CF_ENUM(int32_t, CGLineCap) {
    kCGLineCapButt,
    kCGLineCapRound,
    kCGLineCapSquare
};

3.设置line join 线衔接的样式(线的宽度 达到一定的程度,才会看得出来)

typedef CF_ENUM(int32_t, CGLineJoin) {
    kCGLineJoinMiter,
    kCGLineJoinRound,
    kCGLineJoinBevel
};

CGContextSetLineJoin(ctx, kCGLineJoinRound);
8BD3D836-46D0-43F2-AD38-C8D634EEB65C.png

对了,还有重要的一点,如果你想两段 线条之间设置的属性不相关的话

要讲content保存到堆栈中

CGContextSaveGState(context);
CGContextRestoreGState(context);

还有一点上面的path 路径。完全可以用贝塞尔代替,写出一些比较奇葩的弧度0。o

炫酷的定制dash

CGContextSaveGState(ctx);
    CGFloat phase[] = {25.0,5.0};//设置宽度间隙 可以根据需求设置不同的数字
    CGContextSetLineDash(ctx, _phase, phase, 2);//主要phase 设置的不通,这个东西介意跑起来哦
    //下面就没什么好说的了,就是画一个笑脸
    CGContextAddRect(ctx, CGRectMake(100, 100, 200, 200));
    CGContextAddEllipseInRect(ctx, CGRectMake(130, 130, 50, 50));
    CGContextAddEllipseInRect(ctx, CGRectMake(210, 130, 50, 50));
    CGContextAddRect(ctx, CGRectMake(140, 230, 120, 40));
    CGContextSetLineWidth(ctx, 5);
    CGContextStrokePath(ctx);
    CGContextRestoreGState(ctx);

不断绘制的话,就会有这个效果

CGdash.gif

是不是很帅!
只要phase变化,不停的重绘就可以了

- (void) setPhase:(CGFloat)phase {
    if (_phase != phase) {
        _phase = phase;
        [self setNeedsDisplay];
    }
}

线是基础,不同的线可以组成不同图形,内部还提供了Rect(矩形)Arcs(圆弧) Curve(曲线)以及对应的不同模式等等方法大家可以尝试一下。

绘制一张图片

UIImage *image = [UIImage imageNamed:@"1.jpg"];
    CGContextDrawImage(ctx, CGRectMake(100, 300, 50, 50), image.CGImage);

由于坐标系统设定的不一样,这张图片绘制完,其实是倒着的。


0D01111E-D181-4166-9769-02D98E0429AE.png

还有一个平铺图片的方法

CGContextDrawTiledImage

毕竟倒着看,难受的要死。
苹果也给了方法解决他,就是旋转

 CGContextTranslateCTM(ctx, 0, self.bounds.size.height);
 CGContextScaleCTM(ctx, 1, -1);

绘制pdf

//获取pdf
CGPDFPageRef page = CGPDFDocumentGetPage(self.pdfDocument, 1);
//适应屏幕
CGAffineTransform pdfTransform = CGPDFPageGetDrawingTransform(page, kCGPDFCropBox, self.bounds, 0, true);
CGContextConcatCTM(context, pdfTransform);
//绘制
CGContextDrawPDFPage(context, page);

绘制文字

其实 都是差不多意思

这边再说说一下,Clipping和Masking

//集合上面的绘制line 和 图片 之后调用下面这个方法就能clip
CGContextClip();

CGContextClipToMask()// 

是时候解决上面的问题了
裁剪图片圆角

UIGraphicsBeginImageContextWithOptions(size, NO, [UIScreen mainScreen].scale);
    //获取上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    //绘制裁剪的贝塞尔曲线
    UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, size.width, size.height) cornerRadius:radius];
    CGContextAddPath(ctx, path.CGPath);
    CGContextClip(ctx);
    [self drawInRect:CGRectMake(0, 0, size.width, size.height)];
//    CGContextDrawPath(ctx, kCGPathFillStroke);
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

上面的path 我使用贝塞尔做的,感觉这样简单
之后调用contentClip去裁剪。
恩,下班了,暂时写到这。。0.0

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

推荐阅读更多精彩内容

  • --绘图与滤镜全面解析 概述 在iOS中可以很容易的开发出绚丽的界面效果,一方面得益于成功系统的设计,另一方面得益...
    韩七夏阅读 2,701评论 2 10
  • 一:canvas简介 1.1什么是canvas? ①:canvas是HTML5提供的一种新标签 ②:HTML5 ...
    GreenHand1阅读 4,657评论 2 32
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,016评论 4 62
  • 那位中等身材面色红润略有谢顶的胖阿叔,从上车伊始,就在认真把玩自己的手指,我一度以为是手串,直到他将火腿肠般浑圆短...
    毕大费阅读 504评论 4 6
  • 周四(23:55) 注定又是一个不眠之夜,你喝醉酒终于闹结束,上床睡觉了。我却早已精疲力竭,想想我那么努力的想要最...
    紫玲阅读 317评论 0 0