iOS 之UIBezierPath
在之前的文章中,由于用到过UIBezierPath
这个类,所以这里就对这个类进行简单的记录一下,方便自己也方便他人。
使用UIBezierPath
类可以创建基于矢量的路径,这个类在UIKit
中。它是基于Core Graphics
对CGPathRe
f数据类型和path
绘图属性的一个封装,所以是需要图形上下文的CGContextRef
,所以一般UIBezierPath
在drawRect中
使用。使用此类可以定义简单的形状,如椭圆或者矩形,或者有多个直线和曲线段组成的形状.下面就简单介绍以下。
UIBezierPath常用方法及属性
属性
1.CGPath :
将UIBezierPath类转换成CGPath,和UIColor的CGColor类似
2.currentPoint:
当前path的位置,可以理解为path的终点
3.lineWidth:
可以理解为路径的宽度
4.lineCapStyle:
path端点样式,有3种样式
typedef CF_ENUM(int32_t, CGLineCap) {
kCGLineCapButt,//无端点
kCGLineCapRound,//圆形端点
kCGLineCapSquare//和无端点差不多,但是要长一点
};
见下图 分别为三种方式
5.lineJoinStyle:
path拐角样式,也有3种样式
typedef CF_ENUM(int32_t, CGLineJoin) {
kCGLineJoinMiter,//尖角
kCGLineJoinRound,//圆角
kCGLineJoinBevel//切角
};
效果如下
6.miterLimit:
最大斜接长度,怎么理解呢?就是上图中拐角处外面尖角和内部尖角的距离。但是这个只有在kCGLineJoinMiter情况下使用才有效果,如果这个miterLimit小于斜接长度,就成为了kCGLineJoinBevel类型
我测试的代码为
//断点样式
switch (i) {
case 0:
{
//尖角
path.lineJoinStyle = kCGLineJoinMiter;
//这里设为1 因为斜接长度超过了1 所以就自动转化为了kCGLineJoinBevel类型
//path.miterLimit = 1;
}
7.UIRectCorner
角 分为四种情况
typedef NS_OPTIONS(NSUInteger, UIRectCorner) {
UIRectCornerTopLeft = 1 << 0,//左上
UIRectCornerTopRight = 1 << 1,//右上
UIRectCornerBottomLeft = 1 << 2,//左下
UIRectCornerBottomRight = 1 << 3,//右下
UIRectCornerAllCorners = ~0UL//全部
};
这个情况我会在后面的方法中运用展示出效果
方法
//在rect内创建矩形
+ (instancetype)bezierPathWithRect:(CGRect)rect;
//画矩形
- (void)gl_bezierPathWithRect:(CGRect)rect
{
UIColor *color = [UIColor redColor];
[color set]; //设置线条颜色
UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(10, 40, MIN(100, rect.size.width), MIN(100, rect.size.height))];
path.lineWidth = 5;
path.lineCapStyle = kCGLineCapButt;
path.lineJoinStyle = kCGLineJoinMiter;
[path stroke];
}
效果如下:
//创建在rect内的内切曲线
+ (instancetype)bezierPathWithOvalInRect:(CGRect)rect;
//在rect内创建内切的曲线
- (void)gl_bezierPathWithOvalInRect:(CGRect)rect
{
UIColor *color = [UIColor redColor];
[color set]; //设置线条颜色
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(10, 40, MIN(100, rect.size.width), MIN(200, rect.size.height))];
path.lineWidth = 5;
path.lineCapStyle = kCGLineCapButt;
path.lineJoinStyle = kCGLineJoinMiter;
[path stroke];
}
效果如下
3.
//创建带有圆角的矩形,cornerRadius为圆角,如果矩形为正方形切cornerRadius大于正方形的边长的一半时,cornerRadius就不再有效果,矩形就成为圆形
+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect cornerRadius:(CGFloat)cornerRadius;
//创建带有圆角的矩形
- (void)gl_bezierPathWithRoundedRect:(CGRect)rect
{
UIColor *color = [UIColor redColor];
[color set]; //设置线条颜色
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(10, 40, MIN(100, rect.size.width), MIN(100, rect.size.height)) cornerRadius:10];
path.lineWidth = 2;
path.lineCapStyle = kCGLineCapButt;
path.lineJoinStyle = kCGLineJoinMiter;
[path stroke];
}
效果如下
//创建特定的角为圆角的矩形 corners 分别对应上面属性中的类型,cornerRadii圆角的大小,已size中最大的为准,如果超过其邻近最短边的一半,则已最短边一半为准
+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect byRoundingCorners:(UIRectCorner)corners cornerRadii:(CGSize)cornerRadii
//创建有特点圆角的矩形 可以分别设四个角
- (void)gl_speical_bezierPathWithRoundedRect:(CGRect)rect
{
UIColor *color = [UIColor redColor];
[color set]; //设置线条颜色
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(10, 40, MIN(100, rect.size.width), MIN(200, rect.size.height)) byRoundingCorners:UIRectCornerTopLeft | UIRectCornerBottomRight cornerRadii:CGSizeMake(100, 100)];
path.lineWidth = 2;
path.lineCapStyle = kCGLineCapButt;
path.lineJoinStyle = kCGLineJoinMiter;
[path stroke];
}
效果如下
//创建圆弧 center圆心 radius 半径 startAngle 起始位置 endAngle终点 clockwise 是否顺时针
+ (instancetype)bezierPathWithArcCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise;
//由于此方法和下面方法效果一样所以就用其中一个进行效果展示
- (void)addArcWithCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise NS_AVAILABLE_IOS(4_0);
//添加圆弧
- (void)gl_drawArc
{
[[UIColor redColor]set];
UIBezierPath *path = [UIBezierPath bezierPath];
path.lineWidth = 3.0;
//以下参数分别为圆弧的中心坐标 半径 起点 终点 是否顺时针
[path addArcWithCenter:CGPointMake(self.frame.size.width/2.0, self.frame.size.height/2.0) radius:50 startAngle:0 endAngle:3 * M_PI_2 clockwise:YES];
[path stroke];
}
效果如下
使用该方法的时候,弧度可以参考下面的图片
在上述方法中,我们都用的是[path stroke]
这个方法,查看API会发现还有一个方法fill
,那么这两个方法有什么区别呢?我这里就以上面的添加圆弧方法为例进行修改,其效果为下:
由此可见,fill
方法应该是填充的意思
6.
//移动到某个位置 一般和其他方法配合使用
- (void)moveToPoint:(CGPoint)point;
//绘制一条线
- (void)addLineToPoint:(CGPoint)point
//下面是将方法6 和 方法7一起使用画出本文第一张图的代码
//画线条
- (void)gl_drawLine
{
//颜色设置
[[UIColor redColor]set];
for (NSInteger i = 0; i < 3; i++)
{
UIBezierPath *path = [UIBezierPath bezierPath];
//线条的宽度
path.lineWidth = 5.0;
[path moveToPoint:CGPointMake(10, (1+i)*40)];
[path addLineToPoint:CGPointMake(100, (1+i)*40)];
//断点样式
switch (i) {
case 0:
{
//无端点
path.lineCapStyle = kCGLineCapButt;
}
break;
case 1:
{
//圆形端点
path.lineCapStyle = kCGLineCapRound;
}
break;
case 2:
{
//方形端点 和无端点差不多 但是要长一点点
path.lineCapStyle = kCGLineCapSquare;
}
break;
default:
break;
}
[path stroke];
}
}
8
//创建三次贝塞尔曲线
//endPoint 终点坐标 controlPoint1 控制坐标1 controlPoint2 控制坐标2
- (void)addCurveToPoint:(CGPoint)endPoint controlPoint1:(CGPoint)controlPoint1 controlPoint2:(CGPoint)controlPoint2
//创建三次贝塞尔曲线
- (void)gl_drawThreeBezier
{
[[UIColor redColor]set];
UIBezierPath *path = [UIBezierPath bezierPath];
path.lineWidth = 3.0;
//起点坐标
[path moveToPoint:CGPointMake(10, 140)];
//下面三个点分别为 终点坐标 控制坐标1 控制坐标2
[path addCurveToPoint:CGPointMake(190, 100) controlPoint1:CGPointMake(100, 50) controlPoint2:CGPointMake(130, 190)];
[path stroke];
}
效果图如下
参考图如下
//创建二次贝塞尔曲线 endPoint 终点 控制坐标
- (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint
//创建二次贝塞尔曲线
- (void)gl_drawBezier
{
[[UIColor redColor]set];
UIBezierPath *path = [UIBezierPath bezierPath];
path.lineWidth = 3.0;
//起点坐标
[path moveToPoint:CGPointMake(10, 140)];
//下面三个点分别为 终点坐标 控制坐标
[path addQuadCurveToPoint:CGPointMake(190, 100) controlPoint:CGPointMake(100, 50)];
[path stroke];
}
效果如下
参考图如下
//将路径闭合,即将起点和终点连起
- (void)closePath;
//清空所有路径
- (void)removeAllPoints;
//顾名思义 应该是追加路径的意思
- (void)appendPath:(UIBezierPath *)bezierPath
//绘制虚线
- (void)setLineDash:(nullable const CGFloat *)pattern count:(NSInteger)count phase:(CGFloat)phase;
//pattern 线段数组 如:CGFloat dash[] = {1,1}; 代表实线和空白交替的长度 及先绘制1个长度再空1个,再绘制一个.....
//count数组长度 count值小于数组实际长度时,方法就会对相应长度的数组元素进行循环,而大于的时候 会有警告,没有效果
//phase 循环数组时跳过的长度,如pattern为{2,6},phase为1,则第一个元素画1的时候就跳过直接画6
//在上面画线的方法中,添加以下代码
CGFloat dash[] = {2,6};
[path setLineDash:dash count:2 phase:1];
效果最终如下
所有方法可以在下面这个地方进行使用,需要用就打开,不用就屏蔽
//BezierPathView.m
- (void)drawRect:(CGRect)rect {
// [self gl_bezierPathWithRect:rect];
[self gl_drawLine];
// [self gl_drawCorner];
// [self gl_drawThreeBezier];
// [self gl_drawBezier];
// [self gl_drawArc];
// [self gl_bezierPathWithOvalInRect:rect];
// [self gl_bezierPathWithRoundedRect:rect];
// [self gl_speical_bezierPathWithRoundedRect:rect];
}
项目文件截图:
iOS 之UIBezierPath
注:本文著作权归作者,由demo大师代发,拒绝转载,转载需要作者授权
iOS 之UIBezierPath的更多相关文章
- iOS - 用 UIBezierPath 实现果冻效果
最近在网上看到一个很酷的下拉刷新效果(http://iostuts.io/2015/10/17/elastic-bounce-using-uibezierpath-and-pan-gesture/). ...
- iOS 使用UIBezierPath类实现随手画画板
在上一篇文章中我介绍了 UIBezierPath类 介绍 ,下面这篇文章介绍一下如何通过这个类实现一个简单的随手画画板的简单程序demo,功能包括:划线(可以调整线条粗细,颜色),撤销笔画,回撤笔画, ...
- iOS绘图UIBezierPath 和 Core Graphics框架
前言 iOS系统本身提供了两套绘图的框架,即UIBezierPath 和 Core Graphics.而前者所属UIKit,其实是对Core Graphics框架关于path的进一步封装,所以使用起来 ...
- iOS绘图—— UIBezierPath 和 Core Graphics
前言 iOS系统本身提供了两套绘图的框架,即UIBezierPath 和 Core Graphics.而前者所属UIKit,其实是对Core Graphics框架关于path的进一步封装,所以使用起来 ...
- iOS 使用UIBezierPath和CAShapeLayer画各种图形
CAShapeLayer 是 CALayer 的子类,但是比 CALayer 更灵活,可以画出各种图形,当然,你也可以使用其他方式来画,随你. 杂谈 在 CAShapeLayer 中,也可以像 CAL ...
- iOS CGContextRef/UIBezierPath(绘图)
绘图的底层实现方法 注意:在drawRect方法中系统会默认创建一个上下文(C语言类型)在其他方法中不会有这样一个上下文(可以自己测试) @implementation DrawView //注意,在 ...
- iOS使用UIBezierPath实现ProgressView
实现效果如下: 界面采用UITableView和TabelViewCell的实现,红色的视图采用UIBezierPath绘制.注意红色的部分左上角,左下角是直角哟!!!!不多说<这里才是用UIB ...
- iOS之UIBezierPath贝塞尔曲线属性简介
#import <Foundation/Foundation.h> #import <CoreGraphics/CoreGraphics.h> #import <UIKi ...
- iOS贝塞尔曲线(UIBezierPath)的基本使用方法
简介 UIBezierPath是对Core Graphics框架的一个封装,使用UIBezierPath类我们可以画出圆形(弧线)或者多边形(比如:矩形)等形状,所以在画复杂图形的时候会经常用到. 分 ...
随机推荐
- **Git本地仓库图解
Git基本概念 在Git中,我们将需要进行版本控制的文件目录叫做一个仓库(repository),每个仓库可以简单理解成一个目录,这个目录里面的所有文件都通过Git来实现版本管理,Git都能跟踪并记录 ...
- win上安装Redis并将其设置为服务
win上安装Redis并将其设置为服务 redis下载地址:https://redis.io/ 或者在下面的地址下载 https://github.com/zhangxy1035/redisDownl ...
- HDU 1181.变形课-并查集
变形课 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/65536 K (Java/Others)Total Submis ...
- 开源的图像滤镜库----for Android
1.GPUImage for Android(推荐使用) GPUImage基于OpenGL实现的各种各样图像滤镜(图像处理)效果,多达50多种, idea源于GPUImage for iOS,基本囊括 ...
- 树形DP求树的最小支配集,最小点覆盖,最大独立集
一:最小支配集 考虑最小支配集,每个点有两种状态,即属于支配集合或者不属于支配集合,其中不属于支配集合时此点还需要被覆盖,被覆盖也有两种状态,即被子节点覆盖或者被父节点覆盖.总结起来就是三种状态,现对 ...
- Xamarin XAML语言教程ContentView视图作为自定义视图的父类
Xamarin XAML语言教程ContentView视图作为自定义视图的父类 自定义视图的父类:ContentView视图可以作为自定义视图的父类. [示例14-2]以下将自定义一个颜色视图.具体的 ...
- 【记忆化搜索】bzoj3208 花神的秒题计划Ⅰ
暴力 #include<cstdio> #include<cstring> #include<algorithm> using namespace std; #de ...
- windows下虚拟环境安装方法
方法一:使用virtualenv安装虚拟环境 1.安装virtualenv pip install virtualenv 2.随意创建文件夹(将来虚拟环境会在这个文件夹) mkdir mypro ...
- 魅族 -- 禁止D及以下级别LOG的输出
真机调试时:Log.d()打印不出信息,模拟器可以. 使用的手机:魅族. 状况:禁止D及以下级别LOG的输出. PS.Log.d("h_bl", "进入执行") ...
- winfrom GDI知识
c#使用GDI+简单绘图 http://blog.csdn.net/smartsmile2012/article/details/30255303 NET3.5 GDI+ 图形操作1 http:// ...