文档章节

iOS CAShapeLayer 与贝塞尔曲线的使用

GLAlanTong
 GLAlanTong
发布于 2017/01/14 20:28
字数 469
阅读 28
收藏 0

iOS CAShapeLayer 与贝塞尔曲线的使用

CAShapeLayer 的基本使用

CAShapeLayer 简介

1.CAShapeLayer 继承于 CALayer, 可以使用 CALayer 的所有属性值

2.CAShapeLayer 需要与贝塞尔曲线在一起使用才有意义

3.使用CAShapeLayer与贝塞尔曲线可以实现不在 view 的 drawRect 方法中绘制出我们想要的图形

4.CAShapeLayer 属于 CoreAnimation 框架,其动画渲染是在 GPU 中,相对于 view 的 DrawRect 的方法,它使用的手机的 CPU 进行渲染,所以用CAShapeLayer 的效率极高,大大优化手机性能

贝塞尔曲线与 CAShapeLayer 的关系

1.贝塞尔曲线创建矢量的路径

2.贝塞尔曲线给CAShapeLayer 提供路径,CAShapeLayer在提供的路径中渲染,路径闭环,因此,路径绘制出了Shape

3.用于CAShapeLayer的贝塞尔曲线作为 path , 其 path 是一个收尾相接的闭环的曲线,即使该贝塞尔曲线不是一个闭环的曲线

好啦,理论已经了解了差不多,现在用两者绘制几种简单图形

1.绘制椭圆

//创建椭圆形的贝塞尔曲线

UIBezierPath *oval = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 200, 100)];

//创建一个 CAShapeLayer

CAShapeLayer *layer = [CAShapeLayer layer];

layer.frame = CGRectMake(0, 0, 200, 100);

//禁止内容显示超出边界

layer.masksToBounds = YES;

layer.position = self.view.center;

//显示边界值

layer.borderWidth = 1.f;

//CASHapeLayer 与 贝塞尔之间的 frame 互不干扰

//设置填充色

layer.fillColor = [UIColor redColor].CGColor;

//设置绘制色(边框色)

layer.strokeColor = [UIColor purpleColor].CGColor;

//建立贝塞尔曲线与 CAShapeLayer 的关联

layer.path = oval.CGPath;

//添加并且显示

[self.view.layer addSublayer:layer];

2.绘制矩形 

其实只需要创建出矩形贝塞尔曲线,替换 shapeLayer 的 path 即可,同理圆形也是

//创建矩形贝塞尔曲线

UIBezierPath *rect = [UIBezierPath bezierPathWithRect:CGRectMake(0, 0, 200, 100)];

//创建圆形贝塞尔曲线

UIBezierPath *circle = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 100, 100)];

 

 

© 著作权归作者所有

GLAlanTong
粉丝 3
博文 21
码字总数 15640
作品 0
广州
程序员
私信 提问
IOS 手写签名:UberSignature

很早就有了自己写点技术博客的想法,正好最近在项目中用到了手写签名的功能,用到了Uber开源的UberSignature,发现代码结构思路也非常值得借鉴,希望能帮到需要使用的朋友。 UberSignature的架...

河豚鱼_3107
2018/01/22
0
0
iOS UIView Block 动画- (基础动画, 关键帧动画, 动画组)

UIView本身对于基本动画和关键帧动画、转场动画都有相应的封装,在对动画细节没有特殊要求的情况下使用起来也要简单的多 1、UIView Block 基础动画 ,转场动画+ 缩放 2、关键帧动画(里面加上...

朝雨晚风
2018/05/31
0
0
iOS BeizierPath 绘图

iOS BeizierPath 绘图 最近工作,因为是一款理财的产品,所以进度条改成圆,当然也参考了几篇优秀的博文,稍后一一罗列,下面简单介绍:使用UIBezierPath类可以创建基于矢量的路径,这个类在UIKit...

GLAlanTong
2016/03/27
103
0
用贝塞尔曲线做的一个下拉刷新动画

以前就一直觉得ios 上的 mail 的下拉刷新的动画非常酷炫,但是一直不知道那种“滴虫”效果是怎么实现的。直到前段时间看到的贝塞尔曲线,感觉很神奇。如下图: 看起来和滴虫动画有点像,然后...

ufo.22940268
2014/12/26
2.8K
0
iO6 Programming pushing the limits 阅读笔记

目录 第一部分 iOS6新内容 第二部分 从每天工具中获取更多(介绍日常使用控件和框架的潜力) 第三部分 完成任务的正确工具(介绍不是那么常用的控件和框架) 第四部分 发挥到极限(深入理解i...

云飞扬v5
2015/11/09
56
0

没有更多内容

加载失败,请刷新页面

加载更多

家庭作业——苗钰婷

2 编写一个程序,发出一声警报,然后打印下面的文本: Startled by the sudden sound, Sally shouted, "By the Great Pumpkin, what was that! #include<stdio.h>int main(){......

OSC_Okruuv
30分钟前
5
0
经典系统设计面试题解析:如何设计TinyURL(一)

原文链接: https://www.educative.io/courses/grokking-the-system-design-interview/m2ygV4E81AR 编者注:本文以一道经典的系统设计面试题:《如何设计TinyURL》的参考答案和解析为例,帮助...

APEMESH
31分钟前
3
0
2.面向对象设计原则(7条)

开闭原则 开闭原则的含义是:当应用的需求改变时,在不修改软件实体的源代码或者二进制代码的前提下,可以扩展模块的功能,使其满足新的需求。 实现方法 可以通过“抽象约束、封装变化”来实...

Eappo_Geng
33分钟前
7
0
8086汇编基础 debug P命令 一步完成loop循环

    IDE : Masm for Windows 集成实验环境 2015     OS : Windows 10 x64 typesetting : Markdown    blog : my.oschina.net/zhichengjiu    gitee : gitee.com/zhichengjiu   ......

志成就
37分钟前
7
0
使用nodeJS实现前端项目自动化之项目构建和文件合并

本文转载于:专业的前端网站➜使用nodeJS实现前端项目自动化之项目构建和文件合并 前面的话   一般地,我们使用构建工具来完成项目的自动化操作。本文主要介绍如何使用nodeJS来实现简单的项...

前端老手
51分钟前
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部