基本介绍
使用UIBezierPath可以创建基于矢量的路径,此类是Core Graphics框架关于路径的封装。使用此类可以定义简单的形状,如椭圆、矩形或者有多个直线和曲线段组成的形状等。
UIBezierPath是CGPathRef数据类型的封装。如果是基于矢量形状的路径,都用直线和曲线去创建。我们使用直线段去创建矩形和多边形,使用曲线去创建圆弧(arc)、圆或者其他复杂的曲线形状。
使用方法
1.创建一个UIBezierPath对象
2.调用-moveToPoint:设置初始线段的起点
3.添加线或者曲线去定义一个或者多个子路径
4.改变UIBezierPath对象跟绘图相关的属性。如,我们可以设置画笔的属性、填充样式等
具体实战
1.画直线
- (void)drawRect:(CGRect)rect{
//创建path
UIBezierPath *path = [UIBezierPath bezierPath];
//添加路径到path
[path moveToPoint:CGPointMake(100, 100)];
[path addLineToPoint:CGPointMake(200, 100)];
//将path绘制出来
[path stroke];
}
2.画三角形
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(0, 0)];
[path addLineToPoint:CGPointMake(0, self.frame.size.height)];
[path addLineToPoint:CGPointMake(self.frame.size.width, self.frame.size.height / 2)];
[path closePath];
//设置线宽
[path setLineWidth:1.5];
//设置填充色
[[UIColor purpleColor] setFill];
//设置画壁颜色
[[UIColor greenColor] setStroke];
//填充
[path fill];
//划线
[path stroke];
3.画矩形
UIBezierPath * path = [UIBezierPath bezierPathWithRect:CGRectMake(20, 100, self.frame.size.width - 40, self.frame.size.width - 40)];
[path setLineWidth:20];
[path setLineCapStyle:kCGLineCapRound];
/**
*设置线条拐角帽的样式的
*typedef CF_ENUM(int32_t, CGLineCap) {
*kCGLineCapButt,//默认
*kCGLineCapRound,//圆角
*kCGLineCapSquare//正方形
*};
*/
//[path setLineJoinStyle:kCGLineJoinRound];
/**
*设置两条线连结点的样式
*typedef CF_ENUM(int32_t, CGLineJoin) {
*kCGLineJoinMiter,//默认,斜接
*kCGLineJoinRound,//圆滑衔接
*kCGLineJoinBevel//斜角衔接
*/
//设置填充色
[[UIColor purpleColor] setFill];
[path fill];
[[UIColor blueColor] setStroke];
[path stroke];
效果图
4.画圆(当传入的宽、高参数相等则为圆,否则为椭圆)
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(20, 100, self.frame.size.width - 40, self.frame.size.width - 40)];
[path setLineWidth:5];
[[UIColor redColor] setFill];
[path fill];
[[UIColor greenColor] setStroke];
[path stroke];
效果图
5.圆角矩形
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(20, 100, self.frame.size.width - 40, self.frame.size.width) cornerRadius:20];
//+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect byRoundingCorners:(UIRectCorner)corners cornerRadii:(CGSize)cornerRadii;//该方法设置某一角为圆角
[[UIColor redColor] setFill];
[path fill];
[[UIColor greenColor] setStroke];
[path stroke];
效果图
6.弧线
#define K_PI 3.1415926
#define KDEGREESTORADIANS(degrees) ((K_PI * degrees) / 180)
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:self.center radius:100 startAngle:0 endAngle:KDEGREESTORADIANS(275) clockwise:YES];
[path setLineWidth:10];
[path setLineCapStyle:kCGLineCapRound];
[path setLineJoinStyle:kCGLineJoinRound];
[[UIColor grayColor] setStroke];
[path stroke];
效果图
7.二次贝塞尔曲线
UIBezierPath *path = [UIBezierPath bezierPath];
//起始点
[path moveToPoint:CGPointMake(20, self.frame.size.height - 100)];
//添加二次曲线
[path addQuadCurveToPoint:CGPointMake(self.frame.size.width - 20, self.frame.size.height - 100) controlPoint:CGPointMake(self.frame.size.width / 2, 0)];
[path setLineWidth:10.0];
[[UIColor blueColor] setStroke];
[path stroke];
效果图
8.三次贝塞尔曲线
UIBezierPath *path = [UIBezierPath bezierPath];
//设置起点
[path moveToPoint:CGPointMake(20, 150)];
[path addCurveToPoint:CGPointMake(300, 150) controlPoint1:CGPointMake(160, 0) controlPoint2:CGPointMake(160, 250)];
[path setLineWidth:10.0];
[[UIColor greenColor] setStroke];
[path stroke];
效果图
9.点击事件
@interface RectView ()
@property (nonatomic,strong)UIBezierPath *path;
@end
//初始化
UIBezierPath *path = [UIBezierPath bezierPath];
//设置起始位置
[path moveToPoint:CGPointMake(10, 10)];
[path addLineToPoint:CGPointMake(20, 60)];
[path addLineToPoint:CGPointMake(40, 80)];
[path setLineWidth:5];
//设置线帽
// [path setLineCapStyle:kCGLineCapRound];
//拐角样式
[path setLineJoinStyle:kCGLineJoinRound];
//闭合
[path closePath];
//设置线的颜色
[[UIColor redColor] setStroke];
//'设置填充的颜色
[[UIColor greenColor] setFill];
//划线
[path stroke];
//填充
[path fill];
self.path = path;
- (void)touchesEnded:(NSSet*)touches withEvent:(UIEvent *)event{
//获取到点击的点
UITouch *touch = touches.anyObject;
//该店在view上的坐标
CGPoint point = [touch locationInView:self];
if ([self.path containsPoint:point]) {
NSLog(@"该店在三角形内");
}
10.滑动事件
@implementation RectView{
CGPoint _point;
}
UIBezierPath *path = [UIBezierPath bezierPath];
[path addArcWithCenter:_point radius:10 startAngle:0 endAngle:2 * M_PI clockwise:YES];
[[UIColor redColor] setFill];
[[UIColor blueColor] setStroke];
[path stroke];
[path fill];
- (void)touchesMoved:(NSSet*)touches withEvent:(UIEvent *)event{
UITouch *touch = touches.anyObject;
CGPoint point = [touch locationInView:self];
_point = point;
[self setNeedsDisplay];
}
效果图