iOS 使用贝塞尔曲线绘制路径
使用贝塞尔曲线绘制路径
大多数时候,我们在开发中使用的控件的边框是矩形,或者做一点圆角,是使得矩形的角看起来更加的圆滑。 但是如果我们想要一个不规则的图形怎么办?有人说,叫UI妹子做,不仅省事,还可以趁机接近她们(_:D)。这又时候确实可以。但是如果是一个时刻变动的不规则图形,这样如果做成动图或者剪出很多张图,再叫UI妹子做的话,似乎也能解决, 但是实际效果吧,呵呵。好吧,iOS中我们其实不需要担心这个问题。使用UIBezierPath可以很容易的会址出一些复杂的图形。
UIBezierPath 属于UIkit,可以用于绘制路径。 说到绘制,大家很快想到了大名鼎鼎的Core Graphics,同学们直接使用 Core Graphics绘制图形也完全没有问题,Core Graphics具有更多的绘制途径,它是一套强大的API,但是其函数之多异常绝对会让不熟悉的你头晕脑胀,iOS 很人性化的对 Core Graphics进行封装。也即是UIBezierPath。这篇文章主要讲解下如何使用UIBezierPath结合CAShapeLayer在一个UIView上绘制简单的路径。
对于路径的绘制两种方式,一种是填充(fill ),一种是描绘(stroke)。直接上代码吧,毕竟也不是什么高深的知识。
import UIKit class ViewController: UIViewController { override func viewDidLoad() {
super.viewDidLoad()
self.userBezier()
} override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
} func userBezier(){
// 绘制一段圆弧 如果是合起来的就是圆了
let criclePath: UIBezierPath = UIBezierPath.init(arcCenter: CGPoint.init(x: , y: ), radius: , startAngle: , endAngle: 5.12, clockwise: true)
criclePath.stroke() // 绘制一个矩形
let rectPath: UIBezierPath = UIBezierPath.init(rect: CGRect.init(x: , y: , width: , height: ))
criclePath.append(rectPath) // 绘制一个椭圆 原理是内接矩形,如果矩形的长宽相等那么绘制的就是圆
let ovalPath:UIBezierPath = UIBezierPath.init(ovalIn: CGRect.init(x: , y: , width: , height: ))
criclePath.append(ovalPath) //绘制直线多边形 可以让多条直线拼接 组合成复杂的形状 比如绘制一个三角形
let trianglePath :UIBezierPath = UIBezierPath.init()
trianglePath.move(to: CGPoint.init(x: , y: )) //绘制起始点
trianglePath.addLine(to: CGPoint.init(x: , y: )) //从起点绘制一条直线到指定点
trianglePath.addLine(to: CGPoint.init(x: , y: )) //
trianglePath.close() //闭合路径
trianglePath.lineWidth = 3.0
criclePath.append(trianglePath) //添加一个二阶的曲线 二阶曲线一共是三个点, 起点/终点/折点(控制点)
let cruvePath :UIBezierPath = UIBezierPath.init() cruvePath.move(to: CGPoint.init(x: , y: ))
cruvePath.addQuadCurve(to: CGPoint.init(x: , y: ), controlPoint: CGPoint.init(x: , y: ))
criclePath.append(cruvePath) //添加一个三阶的曲线 起点 终点 两个控制点 后面可以无限添加 二阶曲线 形成一个很长的三阶曲线
let path :UIBezierPath = UIBezierPath.init()
path.move(to: CGPoint.init(x: , y: ))
path.addCurve(to: CGPoint.init(x: , y: ), controlPoint1: CGPoint.init(x: , y: ), controlPoint2: CGPoint.init(x: , y: ))
path.addQuadCurve(to: CGPoint.init(x: , y: ), controlPoint: CGPoint.init(x: , y: ))
criclePath.append(path) //创建一个CAShapelayer 用于显示这些路径
let shPl: CAShapeLayer = CAShapeLayer.init()
shPl.path = criclePath.cgPath
shPl.lineWidth = 3.0
shPl.fillColor = UIColor.clear.cgColor //填充路径 shPl.strokeColor = UIColor.red.cgColor //描绘路径 根据线宽来描绘 self.view.layer.addSublayer(shPl)
self.view.layer.backgroundColor = UIColor.white.cgColor } }
根据绘制的方式不同,运行下面两张图片:
iOS 使用贝塞尔曲线绘制路径的更多相关文章
- iOS:使用贝塞尔曲线绘制图表(折线图、柱状图、饼状图)
1.介绍: UIBezierPath :画贝塞尔曲线的path类 UIBezierPath定义 : 贝赛尔曲线的每一个顶点都有两个控制点,用于控制在该顶点两侧的曲线的弧度. 曲线的定义有四个点:起始点 ...
- iOS开发 贝塞尔曲线
iOS开发 贝塞尔曲线UIBezierPath - 陌云 时间 2014-03-14 11:04:00 博客园-所有随笔区 原文 http://www.cnblogs.com/moyunmo/p/ ...
- n阶贝塞尔曲线绘制(C/C#)
原文:n阶贝塞尔曲线绘制(C/C#) 贝塞尔是很经典的东西,轮子应该有很多的.求n阶贝塞尔曲线用到了 德卡斯特里奥算法(De Casteljau's Algorithm) 需要拷贝代码请直接使用本文最 ...
- OpenGL 实践之贝塞尔曲线绘制
说到贝塞尔曲线,大家肯定都不陌生,网上有很多关于介绍和理解贝塞尔曲线的优秀文章和动态图. 以下两个是比较经典的动图了. 二阶贝塞尔曲线: 三阶贝塞尔曲线: 由于在工作中经常要和贝塞尔曲线打交道,所以简 ...
- 基于canvas二次贝塞尔曲线绘制鲜花
canvas中二次贝塞尔曲线参数说明: cp1x:控制点1横坐标 cp1y:控制点1纵坐标 x: 结束点1横坐标 y:结束点1纵坐标 cp2x:控制点2横坐标 cp2y:控制点2纵坐标 z:结束点2横 ...
- iOS开发 贝塞尔曲线UIBezierPath
最近项目中需要用到用贝塞尔曲线去绘制路径 ,然后往路径里面填充图片,找到这篇文章挺好,记录下来 自己学习! 转至 http://blog.csdn.net/guo_hongjun1611/articl ...
- iOS开发 贝塞尔曲线UIBezierPath(2)
使用CAShapeLayer与UIBezierPath可以实现不在view的drawRect方法中就画出一些想要的图形 . 1:UIBezierPath: UIBezierPath是在 UIKit 中 ...
- iOS开发 贝塞尔曲线UIBezierPath(后记)
使用CAShapeLayer与UIBezierPath可以实现不在view的drawRect方法中就画出一些想要的图形 . 1:UIBezierPath: UIBezierPath是在 UIKit 中 ...
- JavaScript+canvas 利用贝塞尔曲线绘制曲线
效果图: <body> <canvas id="test" width="800" height="300">< ...
随机推荐
- Codeforces Round #450 (Div. 2) D.Unusual Sequences (数学)
题目链接: http://codeforces.com/contest/900/problem/D 题意: 给你 \(x\) 和 \(y\),让你求同时满足这两个条件的序列的个数: \(a_1, a_ ...
- Codeforces 232A - Cycles (构造 + 思维)
题目链接: 232A - Cycles(点击打开) 题意: 要构成一个存在 \(k\) 个三元环的图,需要多少个点,输出顶点数 \(n\),并输出图. 题解: 题目中的任何图都可以用 \(90\)~ ...
- 并发,three
引言 很久没有跟大家再聊聊并发了,今天LZ闲来无事,跟大家再聊聊并发.由于时间过去的有点久,因此LZ就不按照常理出牌了,只是把自己的理解记录在此,如果各位猿友觉得有所收获,就点个推荐或者留言激励下LZ ...
- (转)Oracle EXP-00091解决方法
转自:http://blog.csdn.net/dracotianlong/article/details/8270136 EXP-: 正在导出有问题的统计信息. . . 正在导出表 WF_GENER ...
- 驱动学习3-make
在向内核中添加驱动的时候要完成3项工作 (1)在Kconfig中添加新代码对应项目的编译条件(下面Makefile文件中需要用到它定义的的宏变量) (2)将驱动源码添加到对应的目录中 (3)在目录Ma ...
- ubuntu, 修改hosts文件
介绍下ubuntu下修改host实现域名指向本地的方法. Ubuntu系统的Hosts只需修改/etc/hosts文件,在目录中还有一个hosts.conf文件,刚开始还以为只需要修改这个就可以了,结 ...
- Android(Lollipop/5.0) Material Design(一) 简单介绍
Material Design系列 Android(Lollipop/5.0)Material Design(一) 简单介绍 Android(Lollipop/5.0)Material Design( ...
- 算法 Tricks(三)—— 数组(序列)任意区间最小(大)值
序列(数组)的区间通过左右端点确定,这样首先设置一个最值变量用来记录最值,从左端点一步步移动到右端点,自然移动的过程中也可以计算整个区间的和,也即一次线性遍历下来,可同时获得多个有用信息. // 区间 ...
- 分析Net 内存对象
.Net 内存对象分析 在生产环境中,通过运行日志我们会发现一些异常问题,此时,我们不能直接拿VS远程到服务器上调试,同时日志输出的信息无法百分百反映内存中对象的状态,比如说我们想查看进程中所有的 ...
- NASM Syntax
NASM has a simplified syntax designed to let the user code with minimum overhead. In its simplest fo ...