使用UIBezierPath绘制图形
当需要画图时我们一般创建一个UIView子类, 重写其中的drawRect方法
再drawRect方法中利用UIBezierPath添加画图
UIBezierPath的使用方法:
#import "BezierView.h" @implementation BezierView - (void)drawRect:(CGRect)rect {
// Drawing code //设置线条颜色
UIColor *color = [UIColor redColor];
[color set]; //创建UIBezierPath
UIBezierPath *apath = ({ UIBezierPath *path = [UIBezierPath bezierPath];
path.lineWidth = 5.0f; //设置线条宽度
path.lineCapStyle = kCGLineCapRound; //设置拐角
path.lineJoinStyle = kCGLineCapRound; //终点处理
//设置起始点
[path moveToPoint:CGPointMake(, )]; //增加线条
[path addLineToPoint:CGPointMake(, )];
[path addLineToPoint:CGPointMake(, )];
[path addLineToPoint:CGPointMake(, )];
[path addLineToPoint:CGPointMake(, )]; //关闭路径
[path closePath]; path;
}); //根据坐标连线
[apath stroke];
}
然后把自定义的View添加到Controller中
#import "ViewController.h"
#import "BezierView.h" #define SCREEN_WIDTH [UIScreen mainScreen].bounds.size.width
#define SCREEN_HEIGHT [UIScreen mainScreen].bounds.size.height @interface ViewController () @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; BezierView *beView = [[BezierView alloc] initWithFrame:\
CGRectMake(, , SCREEN_WIDTH, SCREEN_HEIGHT)]; beView.backgroundColor = [UIColor whiteColor]; [self.view addSubview:beView]; } @end
运行结果能看到一个多边形
如果把drawRect中最后一句话改为[apath fill];运行结果就是实心图
我们可以用UIBezierPath的bezierPathWithRect:CGRect(rect)方法来画矩形, 代码如下
- (void)drawRect:(CGRect)rect {
// Drawing code //设置线条颜色
UIColor *color = [UIColor redColor];
[color set]; //创建UIBezierPath
UIBezierPath *apath = [UIBezierPath bezierPathWithRect:CGRectMake(, , , )]; //更具坐标连线
[apath fill];
}
运行结果:
我们可以用UIBezierPath的bezierPathWithOvallInRect:CGRect(rect)方法来画圆形和椭圆, 代码如下
- (void)drawRect:(CGRect)rect {
// Drawing code //设置线条颜色
UIColor *color = [UIColor redColor];
[color set]; //创建UIBezierPath
UIBezierPath *apath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(, , , )];
apath.lineWidth = 5.0f;
apath.lineCapStyle = kCGLineCapRound;
apath.lineJoinStyle = kCGLineCapRound; //更具坐标连线
[apath stroke];
}
运行结果:
用下面这个方法画带指定远角的矩形
+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect byRoundingCorners:(UIRectCorner)corners cornerRadii:(CGSize)cornerRadii;
上代码:
- (void)drawRect:(CGRect)rect {
// Drawing code //设置线条颜色
UIColor *color = [UIColor redColor];
[color set]; //创建UIBezierPath
UIBezierPath *apath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(, , , )
byRoundingCorners:UIRectCornerTopLeft
cornerRadii:CGSizeMake(, )];
apath.lineWidth = 5.0f;
apath.lineCapStyle = kCGLineCapRound;
apath.lineJoinStyle = kCGLineCapRound; //更具坐标连线
[apath stroke];
}
运行结果:
如果要设置多个圆角的话就给byRoundingCorners多设置几个角度, 角度可选如下
typedef NS_OPTIONS(NSUInteger, UIRectCorner) {
UIRectCornerTopLeft = << ,
UIRectCornerTopRight = << ,
UIRectCornerBottomLeft = << ,
UIRectCornerBottomRight = << ,
UIRectCornerAllCorners = ~0UL
};
例如:
UIBezierPath *apath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(, , , )
byRoundingCorners:UIRectCornerTopLeft | UIRectCornerTopRight
cornerRadii:CGSizeMake(, )];
就有两个圆角
也可以用下面这个方法画圆弧
+ (instancetype)bezierPathWithArcCenter:(CGPoint)center //圆心坐标
radius:(CGFloat)radius //半径
startAngle:(CGFloat)startAngle //弧形开始的角度
endAngle:(CGFloat)endAngle //弧形结束的角度
clockwise:(BOOL)clockwise; //正向还是反向画弧
上代码:
- (void)drawRect:(CGRect)rect {
// Drawing code //设置线条颜色
UIColor *color = [UIColor redColor];
[color set]; //创建UIBezierPath
UIBezierPath *apath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(, )
radius: startAngle:M_PI /
endAngle:M_PI
clockwise:YES];
apath.lineWidth = 5.0f;
apath.lineCapStyle = kCGLineCapRound;
apath.lineJoinStyle = kCGLineCapRound; //更具坐标连线
[apath stroke];
}
运行结果如下
还可以直接在path中添加圆形段
[path addArcWithCenter:CGPointMake(, )
radius: startAngle:M_PI /
endAngle:M_PI clockwise:YES];
最后附上UIBezierPath画圆弧时段坐标系
另外UIBezierPath可以画贝赛尔曲线
下面是添加二次贝赛尔曲线的方法
- (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint;
上代码:
- (void)drawRect:(CGRect)rect {
// Drawing code //设置线条颜色
UIColor *color = [UIColor redColor];
[color set]; //创建UIBezierPath
UIBezierPath *apath = ({ UIBezierPath *path = [UIBezierPath bezierPath];
path.lineWidth = 2.0f; //设置线条宽度
//path.lineCapStyle = kCGLineCapRound; //设置拐角 //绘制二次贝赛尔曲线 //设置起始点
[path moveToPoint:CGPointMake(, )]; //设置EndPoint & Control Point
[path addQuadCurveToPoint:CGPointMake(, ) controlPoint:CGPointMake(, )]; path;
}); //更具坐标连线
[apath stroke];
}
运行结果为:
可以参照下面这张图看看每个点的定义
三次贝赛尔曲线会有2个控制点
上代码:
- (void)drawRect:(CGRect)rect {
// Drawing code //设置线条颜色
UIColor *color = [UIColor redColor];
[color set]; //创建UIBezierPath
UIBezierPath *apath = ({ UIBezierPath *path = [UIBezierPath bezierPath];
path.lineWidth = 2.0f; //设置线条宽度 //绘制三次贝赛尔曲线 //设置起始点
[path moveToPoint:CGPointMake(, )]; //设置EndPoint & Control Point
[path addCurveToPoint:CGPointMake(, )
controlPoint1:CGPointMake(, )
controlPoint2:CGPointMake(, )]; path;
}); //更具坐标连线
[apath stroke];
}
运行结果:
使用UIBezierPath绘制图形的更多相关文章
- 11-UIKit(Storyboard、View的基本概念、绘制图形、UIBezierPath)
目录: 1. Storyboard 2. Views 3. View的基本概念介绍 4. 绘制图形 5. UIBezierPath 回到顶部 1. Storyboard 1.1 静态表视图 1)Sec ...
- CSS 魔法系列:纯 CSS 绘制图形(心形、六边形等)
<CSS 魔法系列>继续给大家带来 CSS 在网页中以及图形绘制中的使用.这篇文章给大家带来的是纯 CSS 绘制五角星.六角形.五边形.六边形.心形等等. 我们的网页因为 CSS 而呈现千 ...
- html5 Canvas绘制图形入门详解
html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...
- html5 canvas 笔记一(基本用法与绘制图形)
<canvas> 元素 <canvas id="tutorial" width="150" height="150"> ...
- WPF2D绘制图形方法
我们先看看效果如何: xaml文件: <Window x:Class="WPF2D绘制图形方法.MainWindow" xmlns="http://schemas. ...
- HTML5—canvas绘制图形(1)
1.canvas基础知识 canvas元素是HTML5中新增的一个重要的元素,专门用来绘制图形,不过canvas本身不具备画图的能力,在页面中放置了canvas元素,就相当于在页面中放置了一块矩形的“ ...
- 【canvas学习笔记二】绘制图形
上一篇我们已经讲述了canvas的基本用法,学会了构建canvas环境.现在我们就来学习绘制一些基本图形. 坐标 canvas的坐标原点在左上角,从左到右X轴坐标增加,从上到下Y轴坐标增加.坐标的一个 ...
- HTML5使用Canvas来绘制图形
一.Canvas标签: 1.HTML5<canvas>元素用于图形的绘制,通过脚本(通常是javascript)来完成. 2.<canvas>标签只是图形容器,必须使用脚本来绘 ...
- canvas 绘制图形
canvas 绘制图形: 注意: canvas 的宽高设置在行内,否则会使画布(canvas)产生扭曲,绘图变形: <!DOCTYPE html> <html lang=" ...
随机推荐
- C++中的变长参数
新参与的项目中,为了使用共享内存和自定义内存池,我们自己定义了MemNew函数,且在函数内部对于非pod类型自动执行构造函数.在需要的地方调用自定义的MemNew函数.这样就带来一个问题,使用stl的 ...
- angular实现统一的消息服务
后台API返回的消息怎么显示更优雅,怎么处理才更简洁?看看这个效果怎么样? 自定义指令和服务实现 自定义指令和服务实现消息自动显示在页面的顶部,3秒之后消失 1. 显示消息 这种显示消息的方式是不是有 ...
- PowerShell实现批量重命名文件
[string]$FileName="E:\test11" #-------------------------------------- Clear-Host foreach($ ...
- [转载]Cookie/Session的机制与安全
Cookie和Session是为了在无状态的HTTP协议之上维护会话状态,使得服务器可以知道当前是和哪个客户在打交道.本文来详细讨论Cookie和Session的实现机制,以及其中涉及的安全问题. 因 ...
- 通过sails和阿里大于实现短信验证
通过sails与阿里大于来实现注册短信验证码的发送,逻辑图如下 1.用户在客户端发送手机号给服务器,服务器接收到手机号,生成对应时间戳,随机四位数验证码 2.服务器将电话号码和验证码告诉阿里大于服务器 ...
- BPM端到端流程解决方案分享
一.需求分析 1.企业规模的不断发展.管理水平的不断提升,通常伴随着企业各业务板块管理分工更细.更专业,IT系统同样越来越多.越来越专 业化.不可避免的,部门墙和信息孤岛出现了,企业的流程被部门或者I ...
- Android之网络数据存储
一.网络保存数据介绍 可以使用网络来保存数据,在需要的时候从网络上获取数据,进而显示在App中. 用网络保存数据的方法有很多种,对于不同的网络数据采用不同的上传与获取方法. 本文利用LeanCloud ...
- SQL字符串函数
LEN() :计算字符串长度(字符的个数.)datalength();//计算字符串所占用的字节数,不属于字符串函数.测试varchar变量与nvarchar变量存储字符串a的区别.见备注1.LOWE ...
- 机器指令翻译成 JavaScript —— No.2 跳转处理
上一篇,我们发现大多数 6502 指令都可以直接 1:1 翻译成 JS 代码,但除了「跳转指令」. 跳转指令,分无条件跳转.条件跳转.从另一个角度,也可分: 静态跳转:目标地址已知 动态跳转:目标地址 ...
- Marmoset Toolbag中的角色布光技巧 by Joe”EarthQuake”Wilson
Sagat by Tim “spacemonkey” Appleby 有言在先 首先,我要感谢才华横溢的Tim“spacemonkey Appleby允许本教程中使用他那个极其NB的Sagat模型.不 ...