IOS Animation-贝塞尔曲线与Layer简单篇(一)
IOS Animation-贝塞尔曲线与Layer简单篇
swift篇
1.介绍
贝塞尔曲线:
贝塞尔曲线是计算机图形图像造型的基本工具,是图形造型运用得最多的基本线条之一。它通过控制曲线上的四个点(起始点、终止点以及两个相互分离的中间点)来创造、编辑图形。
一般的矢量图形软件通过它来精确画出曲线,贝兹曲线由线段与节点组成,节点是可拖动的支点,线段像可伸缩的皮筋,我们在绘图工具上看到的钢笔工具就是来做这种矢量曲线的。
Layer:
CALayer(层)是屏幕上的一个矩形区域,在每一个UIView中都包含一个根CALayer,在UIView上的所有视觉效果都是在这个Layer上进行的。Layer有很多种,最常用也是最基本的是CALayer。
Layer是处理‘绘制’的事情,把它想象成一个画布。View相当于ps中的图片,layer相当于图片view的图层。view是通过layer画出的,view是layer的代理。
2.简单代码编写
1)简单在view上加一层layer。
func addSubLayer() {
let layer = CAShapeLayer();//定义一个layer
layer.frame = CGRectMake(, , , );//坐标
layer.backgroundColor = UIColor.blueColor().CGColor;//CG颜色
self.view.layer.addSublayer(layer);//在view上添加layer
}
2)通过赛贝尔曲线,画一个矩形在layer上面
func addBezierWithRect() {
let layer = CAShapeLayer() //新建layer
let path = UIBezierPath.init(rect: CGRectMake(, , , )) //初始化bezier曲线--矩形
layer.path = path.CGPath //在layer上赋予曲线的路径
layer.fillColor = UIColor.clearColor().CGColor //layer的填充颜色
layer.strokeColor = UIColor.blueColor().CGColor //layer的边框颜色
self.view.layer.addSublayer(layer) //添加layer
}
3)画一个圆角的矩形
func addBezierWithRoundRect() {
let layer = CAShapeLayer()
let path = UIBezierPath.init(roundedRect: CGRectMake(, , , ), cornerRadius: ) //定义圆角矩形
layer.path = path.CGPath
layer.fillColor = UIColor.clearColor().CGColor
layer.strokeColor = UIColor.redColor().CGColor
self.view.layer.addSublayer(layer)
}
4)画一个圆形
func addBezierWithCircular() {
let layer = CAShapeLayer()
let circularPath = UIBezierPath(arcCenter: CGPoint.init(x: ,y: ), radius: , startAngle: , endAngle: CGFloat(*M_PI), clockwise: true)//定义一个圆形
layer.path = circularPath.CGPath
layer.fillColor = UIColor.clearColor().CGColor
layer.strokeColor = UIColor.greenColor().CGColor self.view.layer.addSublayer(layer)
}
5)画一条曲线
func addBezierWithCurve() {
let startPoint = CGPoint(x: , y: )//曲线开始位置
let endPoint = CGPoint(x: , y: )//曲线终点位置
let controlPoint = CGPoint(x: , y: )//曲线中间位置 let layer = CAShapeLayer()
let quxianPath = UIBezierPath()
quxianPath.moveToPoint(startPoint) //首先移动到初始点
quxianPath.addQuadCurveToPoint(endPoint, controlPoint: controlPoint) //定义终点点和中间点
layer.path = quxianPath.CGPath
layer.fillColor = UIColor.clearColor().CGColor
layer.strokeColor = UIColor.greenColor().CGColor
self.view.layer.addSublayer(layer)
}
如果想结合动画来用,可以看文章:CAShapeLayer、UIBezierPath与Animation的结合
可以关注本人的公众号,多年经验的原创文章共享给大家。
IOS Animation-贝塞尔曲线与Layer简单篇(一)的更多相关文章
- iOS开发 贝塞尔曲线
iOS开发 贝塞尔曲线UIBezierPath - 陌云 时间 2014-03-14 11:04:00 博客园-所有随笔区 原文 http://www.cnblogs.com/moyunmo/p/ ...
- iOS 使用贝塞尔曲线绘制路径
使用贝塞尔曲线绘制路径 大多数时候,我们在开发中使用的控件的边框是矩形,或者做一点圆角,是使得矩形的角看起来更加的圆滑. 但是如果我们想要一个不规则的图形怎么办?有人说,叫UI妹子做,不仅省事,还可以 ...
- iOS开发 贝塞尔曲线UIBezierPath
最近项目中需要用到用贝塞尔曲线去绘制路径 ,然后往路径里面填充图片,找到这篇文章挺好,记录下来 自己学习! 转至 http://blog.csdn.net/guo_hongjun1611/articl ...
- Android - Animation 贝塞尔曲线之美
概述 贝塞尔曲线于1962,由法国工程师皮埃尔·贝塞尔所广泛发表,他运用贝塞尔曲线来为汽车的主体进行设计.贝塞尔曲线最初由Paul de Casteljau于1959年运用de Casteljau演算 ...
- iOS开发 贝塞尔曲线UIBezierPath(2)
使用CAShapeLayer与UIBezierPath可以实现不在view的drawRect方法中就画出一些想要的图形 . 1:UIBezierPath: UIBezierPath是在 UIKit 中 ...
- iOS:使用贝塞尔曲线绘制图表(折线图、柱状图、饼状图)
1.介绍: UIBezierPath :画贝塞尔曲线的path类 UIBezierPath定义 : 贝赛尔曲线的每一个顶点都有两个控制点,用于控制在该顶点两侧的曲线的弧度. 曲线的定义有四个点:起始点 ...
- iOS开发 贝塞尔曲线UIBezierPath(后记)
使用CAShapeLayer与UIBezierPath可以实现不在view的drawRect方法中就画出一些想要的图形 . 1:UIBezierPath: UIBezierPath是在 UIKit 中 ...
- iOS开发——UI精选OC篇&UIApplication,UIWindow,UIViewController,UIView(layer)简单介绍
UIApplication,UIWindow,UIViewController,UIView(layer)简单介绍 一:UIApplication:单例(关于单例后面的文章中会详细介绍,你现在只要知道 ...
- iOS开发之画图板(贝塞尔曲线)
贝塞尔曲线,听着挺牛气一词,不过下面我们在做画图板的时候就用到贝塞尔绘直线,没用到绘制曲线的功能.如果会点PS的小伙伴会对贝塞尔曲线有更直观的理解.这篇博文的重点不在于如何用使用贝塞尔曲线,而是利用贝 ...
随机推荐
- SharePoint 2013开发入门探索(二)- 列表操作
我们如何用代码对SharePoint列表做些例如增删改查的操作呢?如果您的程序可以部署到服务器上,就可以使用 服务器对象模型,因为服务器对象模型提供的功能最多,限制最少:否则可能要选择客户对象模型等其 ...
- Codeforces Round #379 (Div. 2) Analyses By Team:Red & Black
A.Anton and Danik Problems: 给你长度为N的,只含'A','D'的序列,统计并输出何者出现的较多,相同为"Friendship" Analysis: lu ...
- 利用JDBC连接MySQL并使用MySQL
driver为JDBC的驱动. url为数据库的地址. usrname和password分别为数据库的用户名和密码. Connection类用来连接MySQL. PreparedStatement类用 ...
- 三种Scriptlet总结
什么是Scriptlet? 在JSP中,Scriptlet称为脚本小程序,所欲嵌套在HTML代码中的Java程序都必须使用Scriptlet标记出来. 第一种:<% %> 在此Script ...
- XAF ObjectSpace保存时添加记录
点击保存按钮时自动添加相关记录(用于界面查看),另外还有Audit控件可使用,此处只是一个简单的功能. 新建一个VC并关联到相关的View,代码如下: public partial class Gon ...
- 一个实现了View接口的Fragment
小程序并不新鲜,模式上先有百度轻应用,后有支付宝的各类小服务,再来还有腾讯自家QQ右下角的应用宝:技术上也就是FaceBook RN的那一套.一个技术上无创新,形式上无创意的事物,凭什么勾起了开发者们 ...
- First Missing Positive && missing number
https://leetcode.com/problems/first-missing-positive/ 我原以为数组中不会有重复的数字,所以利用min.max分别记录给定数组中出现的最小正整数和最 ...
- html或者jsp页面引用jar包中的js文件
一,页面上引用jar包中的js文件的方法 使用java web框架AppFuse的时候发现,jquery.bootstrap等js框架都封装到jar包里面了.这些js文件通过一个wro4j的工具对其进 ...
- (转)详解Linux Top 命令
top 命令是最流行的性能监视工具之一,我们必需了解.它是一个优秀的交互式工具,用于监视性能.它提供系统整体性能,但报告进程信息才是 top 命令的长处.top 命令交互界面如下图所视:
- 使用的组件:Layui
Layui 经典模块化前端框架 由职业前端倾情打造,面向所有层次的前后端程序猿,中国最容易使用的前端UI解决方案 Layui 出蛋于2016年金秋,是一款带着浓烈情怀的国产前端UI框架,她追求极简,又 ...