绘图相关(平滑过渡色、镂空效果、部分圆角等)

1.绘制虚线
根据图像的边缘绘制虚线

view.center = self.view.center;
view.backgroundColor = [UIColor whiteColor];
[self.view addSubview:view];
CAShapeLayer * shapeLayer = [CAShapeLayer layer];

shapeLayer.strokeColor = [UIColor redColor].CGColor;

shapeLayer.fillColor = [UIColor greenColor].CGColor;

shapeLayer.path = [UIBezierPath bezierPathWithRect:view.bounds].CGPath;

shapeLayer.frame = view.bounds;

shapeLayer.lineWidth = 1.f;

shapeLayer.lineCap = kCALineCapRound;

shapeLayer.lineDashPattern = @[@20, @2];//第一个参数是线条的长度,2代表的是间隔

[view.layer addSublayer:shapeLayer];

2.贝塞尔画出曲线(可以是直线,改变线型就会变成虚线)

[path moveToPoint:CGPointMake(175, 100)];
[path addArcWithCenter:CGPointMake(150, 100) radius:25 startAngle:0 endAngle:M_PI*2 clockwise:YES];

[path moveToPoint:CGPointMake(160, 100)];
[path addArcWithCenter:CGPointMake(150, 100) radius:10 startAngle:0 endAngle:-2*M_PI clockwise:NO];

[path moveToPoint:CGPointMake(155, 100)];
[path addArcWithCenter:CGPointMake(150, 100) radius:5 startAngle:0 endAngle:-2*M_PI clockwise:NO];

[path moveToPoint:CGPointMake(150, 125)];
[path addLineToPoint:CGPointMake(150, 175)];
[path addLineToPoint:CGPointMake(125, 225)];
[path moveToPoint:CGPointMake(150, 175)];
[path addLineToPoint:CGPointMake(175, 225)];
[path moveToPoint:CGPointMake(100, 150)];
[path addLineToPoint:CGPointMake(200, 150)];


//create shape layer
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.strokeColor = [UIColor redColor].CGColor;
shapeLayer.fillColor = [UIColor greenColor].CGColor;
shapeLayer.lineWidth = 3;
shapeLayer.lineDashPhase = 1;

shapeLayer.strokeStart = 0.2;
shapeLayer.strokeEnd = 0.8;
//填充颜色的规则,zero 是  kCAFillRuleEvenOdd是从左到右穿过为1不穿过为0,0为外部
shapeLayer.fillRule = kCAFillRuleNonZero;

shapeLayer.lineJoin = kCALineJoinRound;//交汇处的是否为圆角平切  不变等
shapeLayer.lineCap = kCALineCapSquare; //线型
shapeLayer.lineDashPattern = @[@3 ,@4];

shapeLayer.path = path.CGPath;
//add it to our view
[self.view.layer addSublayer:shapeLayer];

3.画正方形(部分圆角)

CGSize radii = CGSizeMake(20, 20);
UIRectCorner corner = UIRectCornerTopLeft|UIRectCornerTopRight|UIRectCornerBottomLeft;
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:rect byRoundingCorners:corner cornerRadii:radii];
//create shape layer
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.strokeColor = [UIColor redColor].CGColor;
shapeLayer.fillColor = [UIColor greenColor].CGColor;
shapeLayer.lineWidth = 3;

// //shapeLayer.lineDashPhase = 1;
// // shapeLayer.strokeStart = 0.2;
// // shapeLayer.strokeEnd = 0.8;
// //填充颜色的规则,zero 是 kCAFillRuleEvenOdd是从左到右穿过为1不穿过为0,0为外部
// shapeLayer.fillRule = kCAFillRuleNonZero;

shapeLayer.lineJoin = kCALineJoinRound;//交汇处的是否为圆角平切  不变等
shapeLayer.lineCap = kCALineCapRound; //线型

// shapeLayer.lineDashPattern = @[@3 ,@4];

shapeLayer.path = path.CGPath;
//add it to our view
[self.view.layer addSublayer:shapeLayer];

4.镂空效果

imageView.image = [UIImage imageNamed:@"8"];
[self.view addSubview:imageView];


UIView *bgView = [[UIView alloc]initWithFrame:self.view.frame];
bgView.backgroundColor = [UIColor colorWithWhite:0 alpha:0.5];
[self.view addSubview:bgView];

CGRect rc = CGRectMake(15, 30, 130, 130);

CAShapeLayer *shapeLayer = [CAShapeLayer layer];
UIBezierPath *path = [UIBezierPath bezierPathWithRect:bgView.bounds];

//[path appendPath:[[UIBezierPath bezierPathWithRect:rc] bezierPathByReversingPath]];

[path appendPath:[[UIBezierPath bezierPathWithRoundedRect:rc cornerRadius:80]bezierPathByReversingPath]];
shapeLayer.path = path.CGPath;
bgView.layer.mask = shapeLayer;

4.二次函数曲线

[path moveToPoint:CGPointMake(1, 0)];

[path addQuadCurveToPoint:CGPointMake(500, 0) controlPoint:CGPointMake(300, 1000)];

// [path addCurveToPoint:CGPointMake(500, 500) controlPoint1:CGPointMake(300, 10) controlPoint2:CGPointMake(60, 600)];

CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.path = path.CGPath;
shapeLayer.strokeColor = [UIColor redColor].CGColor;
shapeLayer.fillColor = [UIColor clearColor].CGColor;
[self.view.layer addSublayer:shapeLayer];

5.直线

[path moveToPoint:CGPointMake(1, 0)];
    
[path addLineToPoint:CGPointMake(500, 500)];

CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.path = path.CGPath;
shapeLayer.strokeColor = [UIColor redColor].CGColor;
[self.view.layer addSublayer:shapeLayer];

6.一般曲线

[path moveToPoint:CGPointMake(1, 0)];

[path addCurveToPoint:CGPointMake(500, 500) controlPoint1:CGPointMake(300, 10) controlPoint2:CGPointMake(60, 600)];

CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.path = path.CGPath;
shapeLayer.strokeColor = [UIColor redColor].CGColor;
shapeLayer.fillColor = [UIColor clearColor].CGColor;
[self.view.layer addSublayer:shapeLayer];

7.用 CATextLayer显示文字并改变清晰度

textLayer.frame = CGRectMake(self.view.frame.size.width/2-50, self.view.frame.size.height/2-50, 200, 200);

[self.view.layer addSublayer:textLayer];

textLayer.foregroundColor = [UIColor blackColor].CGColor;
textLayer.string = @"Lorem ipsum dolor sit amet, consectetur adipiscing \
elit. Quisque massa arcu, eleifend vel varius in, facilisis pulvinar \
leo. Nunc quis nunc at mauris pharetra condimentum ut ac neque. Nunc \
elementum, libero ut porttitor dictum, diam odio congue lacus, vel \
fringilla sapien diam at purus. Etiam suscipit pretium nunc sit amet \
lobortis";
textLayer.alignmentMode = kCAAlignmentJustified;

textLayer.contentsScale = 2.0f;

textLayer.wrapped = YES;
UIFont *font = [UIFont systemFontOfSize:15];

//set layer font
CFStringRef fontName = (__bridge CFStringRef)font.fontName;
//获取 font 的名字
CGFontRef fontRef = CGFontCreateWithFontName(fontName);

textLayer.font = fontRef;
textLayer.fontSize = font.pointSize;
CGFontRelease(fontRef);

8.平滑过渡色

    gradientLayer.colors = @[(__bridge id)[UIColor redColor].CGColor,(__bridge id)[UIColor blueColor].CGColor,(__bridge id)[UIColor yellowColor].CGColor];
    gradientLayer.locations = @[[NSNumber numberWithFloat:0],[NSNumber numberWithFloat:0.5],[NSNumber numberWithFloat:1]];

    gradientLayer.startPoint = CGPointMake(0, 0);
    gradientLayer.endPoint = CGPointMake(1, 1);

*** 注意颜色必须是CGColor,设置 locations 是[0-1]浮点型numberWithFloat

绘图相关(平滑过渡色、镂空效果、部分圆角等)

注:太麻烦了,就把所有的效果搞一张图上,虽然不清,但都能说明问题。
之前对贝塞尔没有太多认识,3D 动画那一块也没有很深的了解,暂时不展示3D 动画那一块
资料:http://blog.sina.com.cn/s/blog_8f5097be0101b91z.html

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

推荐阅读更多精彩内容