UIBezierPath(转)
@import url(/css/cuteeditor.css);
@import url(/css/cuteeditor.css);
@import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/css/cuteeditor.css);
视图可以通过子视图、图层或实现drawRect:方法来表现内容,如果说实现了drawRect:方法,那么最好就不要混用其他方法了,如图层和子视图。自定义绘图大部分是由UIKit或者Core Graphics来实现的。现在我们来讲讲UIBezierPath和Core Graphics。
1.UIBezierPath
UIKit中的UIBezierPath是Core Graphics框架关于path的一个封装。可以创建基于矢量的路径,例如椭圆或者矩形,或者有多个直线和曲线段组成的形状。
1.绘制矩形
绘制矩形最简单的办法是使用UIRectFrame和UIRectFill,如下
- (void)drawRect:(CGRect)rect
{
[[UIColor redColor]setFill];
UIRectFill(CGRectMake(20, 20, 100, 50));
}
其中UIColor setFill是设置画笔颜色。
通过使用UIBezierPath可以自定义绘制线条的粗细,是否圆角等。
- (void)drawRect:(CGRect)rect
{
UIColor *color = [UIColor colorWithRed:0 green:0 blue:0.7 alpha:1];
[color set]; //设置线条颜色
UIBezierPath* aPath = [UIBezierPath bezierPathWithRect:CGRectMake(20, 20, 100, 50)];
aPath.lineWidth = 8.0;
aPath.lineCapStyle = kCGLineCapRound; //线条拐角
aPath.lineJoinStyle = kCGLineCapRound; //终点处理
[aPath stroke];
}
效果如下:
2.圆和椭圆
只有将上面代码中的:
UIBezierPath* aPath = [UIBezierPath bezierPathWithRect:CGRectMake(20, 20, 100, 50)];
替代为以下代码即可绘制一个圆形
UIBezierPath* aPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(20, 20, 100, 100)];
椭圆:
UIBezierPath* aPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(20, 20, 100, 50)];
3.多边形
多边形是一些简单的形状,这些形状是由一些直线线条组成,我们可以用moveToPoint: 和 addLineToPoint:方法去构建。moveToPoint:设置我们想要创建形状的起点。从这点开始,我们可以用方法addLineToPoint:去创建一个形状的线段。
我们可以连续的创建line,每一个line的起点都是先前的终点,终点就是指定的点。
closePath可以在最后一个点和第一个点之间画一条线段。
- (void)drawRect:(CGRect)rect
{
UIColor *color = [UIColor colorWithRed:0 green:0.7 blue:0 alpha:1];
[color set];
UIBezierPath* aPath = [UIBezierPath bezierPath];
aPath.lineWidth = 5.0;
aPath.lineCapStyle = kCGLineCapRound;
aPath.lineJoinStyle = kCGLineCapRound;
// 起点
[aPath moveToPoint:CGPointMake(100.0, 0.0)];
// 绘制线条
[aPath addLineToPoint:CGPointMake(200.0, 40.0)];
[aPath addLineToPoint:CGPointMake(160, 140)];
[aPath addLineToPoint:CGPointMake(40.0, 140)];
[aPath addLineToPoint:CGPointMake(0.0, 40.0)];
[aPath closePath];//第五条线通过调用closePath方法得到的
//根据坐标点连线
[aPath stroke];
[aPath fill];
}
效果如下:
4.不规则形状
想画弧线组成的不规则形状,我们需要使用中心点、弧度和半径,如下图。弧度使用顺时针脚底,0弧度指向右边,pi/2指向下方,pi指向左边,-pi/2指向上方。然后使用bezierPathWithArcCenter: radius: startAngle endAngle: clockwise:方法来绘制。
1).绘制一段弧度
- (void)drawRect:(CGRect)rect
{
UIColor *color = [UIColor redColor];
[color set]; //设置线条颜色
UIBezierPath* aPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(80, 80)
radius:75
startAngle:0
endAngle:DEGREES_TO_RADIANS(135)
clockwise:YES];
aPath.lineWidth = 5.0;
aPath.lineCapStyle = kCGLineCapRound; //线条拐角
aPath.lineJoinStyle = kCGLineCapRound; //终点处理
[aPath stroke];
}
结果如下:
2).两种贝塞尔曲线
a).第一种:
- (void)drawRect:(CGRect)rect
{
UIColor *color = [UIColor redColor];
[color set]; //设置线条颜色
UIBezierPath* aPath = [UIBezierPath bezierPath];
aPath.lineWidth = 5.0;
aPath.lineCapStyle = kCGLineCapRound; //线条拐角
aPath.lineJoinStyle = kCGLineCapRound; //终点处理
[aPath moveToPoint:CGPointMake(20, 100)];
[aPath addQuadCurveToPoint:CGPointMake(120, 100) controlPoint:CGPointMake(70, 0)];
[aPath stroke];
}
效果如下:
b).第二种:
- (void)drawRect:(CGRect)rect
{
UIColor *color = [UIColor redColor];
[color set]; //设置线条颜色
UIBezierPath* aPath = [UIBezierPath bezierPath];
aPath.lineWidth = 5.0;
aPath.lineCapStyle = kCGLineCapRound; //线条拐角
aPath.lineJoinStyle = kCGLineCapRound; //终点处理
[aPath moveToPoint:CGPointMake(5, 80)];
[aPath addCurveToPoint:CGPointMake(155, 80) controlPoint1:CGPointMake(80, 0) controlPoint2:CGPointMake(110, 100)];
[aPath stroke];
}
3).曲线组合:
下面我们来画一朵花:
- (void)drawRect:(CGRect)rect {
CGSize size = self.bounds.size;
CGFloat margin = 10;
//rintf:四舍五入函数
CGFloat radius = rintf(MIN(size.height - margin, size.width - margin) / 4);
CGFloat xOffset, yOffset;
CGFloat offset = rintf((size.height - size.width) / 2);
if (offset > 0) {
xOffset = (CGFloat)rint(margin / 2);
yOffset = offset;
} else {
xOffset = -offset;
yOffset = rintf(margin / 2);
}
[[UIColor redColor] setFill];
UIBezierPath *path = [UIBezierPath bezierPath];
[path addArcWithCenter:CGPointMake(radius * 2 + xOffset, radius + yOffset)
radius:radius
startAngle:(CGFloat)-M_PI
endAngle:0
clockwise:YES];
[path addArcWithCenter:CGPointMake(radius * 3 + xOffset, radius * 2 + yOffset)
radius:radius
startAngle:(CGFloat)-M_PI_2
endAngle:(CGFloat)M_PI_2
clockwise:YES];
[path addArcWithCenter:CGPointMake(radius * 2 + xOffset, radius * 3 + yOffset)
radius:radius
startAngle:0
endAngle:(CGFloat)M_PI
clockwise:YES];
[path addArcWithCenter:CGPointMake(radius + xOffset, radius * 2 + yOffset)
radius:radius
startAngle:(CGFloat)M_PI_2
endAngle:(CGFloat)-M_PI_2
clockwise:YES];
[path closePath];
[path fill];
}
记得调用以下这个方法,使其view变化后(例如横屏了)重新调用drawRect:
- (void)awakeFromNib
{
// Comment this line to see default behavior
self.contentMode = UIViewContentModeRedraw;
}
@import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/css/cuteeditor.css);
最新文章
- Linux中增加软路由的两种方法/删除的方法
- Klayge 引擎的安装
- OD: Vulnerabilities Analyze Skills
- [深入React] 5.MVC
- (转载)开源ckplayer 网页播放器, 跨平台(html5, mobile),flv, f4v, mp4, rtmp协议. webm, ogg, m3u8 !
- switch窗口句柄
- 【原】无脑操作:IDEA + maven + Shiro + SpringBoot + JPA + Thymeleaf实现基础认证权限
- 教程一 openwrt路由器入门 远程命令行+文件系统
- oracle primary key &; foreign key
- JavaScript中的原型链原理
- 03Hadoop的TopN的问题
- docker入门篇 部署springboot项目
- 面试官让你讲讲acks参数对消息持久化的影响
- python 流程控制(for循环语句)
- ubuntu 命令、linux环境变量设置
- 【cocos2d-x 环境配置-Mac配置篇】
- Android 网络下载图片
- 双T滤波电路用于PWM方式DAC的分析
- python math模块
- LeetCode 876——链表的中间结点
热门文章
- 回调函数 typedef bool (*IsUsed)(const string &;name,boost::shared_ptr<;ShpGeometry>; oneGeometry);
- vue 权限控制按钮3种样式、内容、以及跳转事件
- springboot2.x整合redis实现缓存(附github链接)
- ES6 的Object.assign(target, source_1, &#183;&#183;&#183;)方法与对象的扩展运算符
- 【APIO2015】Palembang Bridges
- Endless Pallet(min-max容斥)
- Java泛型总结---基本用法,类型限定,通配符,类型擦除
- DevExpress的GridControl如何实现打印和打印预览 z
- VC 读取服务器上的文件(HTTP方式) [转]
- odoo税金处理