贝塞尔曲线是一个画图的类,需在drawRect方法中绘制;可以绘制直线、矩形、圆、椭圆以及其他复杂的图形
贝塞尔曲线(UIBezierPath)的使用如下:
类方法:
//基本路径
+ (instancetype)bezierPath;
//矩形路径
+ (instancetype)bezierPathWithRect:(CGRect)rect;
//椭圆,当rect为正方形是则为圆
+ (instancetype)bezierPathWithOvalInRect:(CGRect)rect;
//圆角矩形、圆路径
+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect cornerRadius:(CGFloat)cornerRadius; // rounds all corners with the same horizontal and vertical radius
//指定矩形的角为圆角
+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect byRoundingCorners:(UIRectCorner)corners cornerRadii:(CGSize)cornerRadii;
//弧线路径/扇形
+ (instancetype)bezierPathWithArcCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise;
//CGpath创建
+ (instancetype)bezierPathWithCGPath:(CGPathRef)CGPath;
对象方法
- (instancetype)init NS_DESIGNATED_INITIALIZER;
- (nullable instancetype)initWithCoder:(NSCoder *)coder NS_DESIGNATED_INITIALIZER;
属性
//返回一个不可变的CGPathRef,在UIBezierPath被进一步修改之前有效
@property(nonatomic) CGPathRef CGPath;
- (CGPathRef)CGPath NS_RETURNS_INNER_POINTER CF_RETURNS_NOT_RETAINED;
//判断是否为空 只读属性
@property(readonly,getter=isEmpty) BOOL empty;
//整个路径的位置
@property(nonatomic,readonly) CGRect bounds;
//当前路径的位置
@property(nonatomic,readonly) CGPoint currentPoint;
//线的宽度
@property(nonatomic) CGFloat lineWidth;
//线的末端的类型
@property(nonatomic) CGLineCap lineCapStyle;
typedef CF_ENUM(int32_t, CGLineCap) {
kCGLineCapButt, //无端点
kCGLineCapRound,//圆形端点
kCGLineCapSquare//方形端点
};
//相交线的交点类型
@property(nonatomic) CGLineJoin lineJoinStyle;
typedef CF_ENUM(int32_t, CGLineJoin) {
kCGLineJoinMiter,//直接连接
kCGLineJoinRound,//圆角连接
kCGLineJoinBevel//斜角连接
};
//miterLimit 属性设置或返回最大斜接长度,只有当 lineJoinStyle 属性为 "kCGLineJoinMiter" 时,miterLimit 才有效
@property(nonatomic) CGFloat miterLimit; // Used when lineJoinStyle is kCGLineJoinMiter
//线的精细程度
@property(nonatomic) CGFloat flatness;
//填充区域的方法
@property(nonatomic) BOOL usesEvenOddFillRule; // Default is NO. When YES, the even-odd fill rule is used for drawing, clipping, and hit testing.
方法
//设置画笔的起始点
- (void)moveToPoint:(CGPoint)point;
//从当前点到指定点绘制直线
- (void)addLineToPoint:(CGPoint)point;
//绘制曲线(三阶贝塞尔曲线) 从起点到结束点的曲线,有两个控制点坐标controlPoint1、controlPoint2
- (void)addCurveToPoint:(CGPoint)endPoint controlPoint1:(CGPoint)controlPoint1 controlPoint2:(CGPoint)controlPoint2;
//绘制曲线(二阶贝塞尔曲线)从起点到终点的曲线,一个控制点
- (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint;
//绘制弧线 中线点、半径、开始角、结束角、绘制方向
- (void)addArcWithCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise API_AVAILABLE(ios(4.0));
//设置为封闭的路径
- (void)closePath;
//移除所有的点
- (void)removeAllPoints;
//两个贝塞尔曲线路径拼接
- (void)appendPath:(UIBezierPath *)bezierPath;
//创建并返回一个与当前路径相反的新的贝塞尔曲线
- (UIBezierPath *)bezierPathByReversingPath API_AVAILABLE(ios(6.0));
//用CGAffineTransform变换路径的所有点
- (void)applyTransform:(CGAffineTransform)transform;
//是否包含指定的点
- (BOOL)containsPoint:(CGPoint)point;
//设置虚线
- (void)setLineDash:(nullable const CGFloat *)pattern count:(NSInteger)count phase:(CGFloat)phase;
//获取虚线
- (void)getLineDash:(nullable CGFloat *)pattern count:(nullable NSInteger *)count phase:(nullable CGFloat *)phase;
//填充
- (void)fill;
//绘制路径
- (void)stroke;
//描边的混合模式
- (void)fillWithBlendMode:(CGBlendMode)blendMode alpha:(CGFloat)alpha;
//填充的混合模式
- (void)strokeWithBlendMode:(CGBlendMode)blendMode alpha:(CGFloat)alpha;
//修改当前图形上下文的绘制的可见区域,之后绘图操作显示的内容只有发生在指定路径的填充区域
- (void)addClip;
使用
1、绘制直线
UIBezierPath *path = [UIBezierPath bezierPath];
path.lineWidth = 3.f;
path.lineCapStyle = kCGLineCapRound;
[path moveToPoint:CGPointMake(100, 100)];
[path addLineToPoint:CGPointMake(300, 300)];
[path stroke];
line.png
2、矩形
UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(100, 100, 200, 200)];
path.lineWidth = 3.f;
path.lineCapStyle = kCGLineCapRound;
path.lineJoinStyle = kCGLineJoinBevel;
[path stroke];
Rect.png
3、椭圆/圆
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(100, 100, 200, 300)];
path.lineWidth = 3.f;
path.lineCapStyle = kCGLineCapRound;
path.lineJoinStyle = kCGLineJoinBevel;
[path stroke];
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(100, 100, 200, 200)];
Oval_C.png
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(100, 100, 200, 300)];
Oval_O.png
4、圆/圆角矩形曲线,
a、半径大于或等于正方形的边长一半时为圆,此时半径不起作用(此处描述有问题)
b、半径小于于正方形的边长一半时为圆角矩形
c、当图形长和宽不等时为圆角矩形,如图"Rounded_R"
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(100, 100, 180, 150) cornerRadius:80];
path.lineWidth = 3.f;
[path stroke];
问题:a的描述,当为正方形且半径时边长的一半是时圆。
当初始化的时候设置半径为32时,此时是一个圆角矩形。
当初始化的时候设置半径为33时,此时是一个圆。
希望知道的小伙伴解答一下,感激不尽!!!
[UIBezierPath bezierPathWithRoundedRect:CGRectMake(100, 100, 100, 100) cornerRadius:32];
32.png
[UIBezierPath bezierPathWithRoundedRect:CGRectMake(100, 100, 100, 100) cornerRadius:33];
33.png
Rounded_R.png
5、圆角矩形
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(100, 200, 100, 100) byRoundingCorners:UIRectCornerTopLeft | UIRectCornerBottomRight cornerRadii:CGSizeMake(40, 40)];
path.lineWidth = 3.f;
[path fill];//填充
[path stroke];
typedef NS_OPTIONS(NSUInteger, UIRectCorner) {
UIRectCornerTopLeft = 1 << 0,
UIRectCornerTopRight = 1 << 1,
UIRectCornerBottomLeft = 1 << 2,
UIRectCornerBottomRight = 1 << 3,
UIRectCornerAllCorners = ~0UL
};
UIRectCornerTopLeft | UIRectCornerBottomRight 用“|”或连接可以切指定位置的圆角,cornerRadii为圆角的大小
R.png
6、绘制贝塞尔曲线三阶
UIBezierPath *path = [UIBezierPath bezierPath];
path.lineWidth = 3.f;
path.lineCapStyle = kCGLineCapRound;
[path moveToPoint:CGPointMake(100, 100)];
[path addCurveToPoint:CGPointMake(300, 100) controlPoint1:CGPointMake(130, 70) controlPoint2:CGPointMake(160, 160)];
[path stroke];
Curve.png
7、绘制贝塞尔曲线二阶
UIBezierPath *path = [UIBezierPath bezierPath];
path.lineWidth = 3.f;
path.lineCapStyle = kCGLineCapRound;
[path moveToPoint:CGPointMake(100, 100)];
[path addQuadCurveToPoint:CGPointMake(300, 100) controlPoint:CGPointMake(180, 180)];
[path stroke];
QuadCurve.png
8、弧线
UIBezierPath *path = [UIBezierPath bezierPath];
path.lineWidth = 3.f;
path.lineCapStyle = kCGLineCapRound;
[path moveToPoint:CGPointMake(100, 100)];
[path addArcWithCenter:CGPointMake(200, 200) radius:100 startAngle:120 endAngle:180 clockwise:YES];
[path stroke];
[path addArcWithCenter:CGPointMake(200, 200) radius:100 startAngle:120 endAngle:180 NO];
Arc_NO.png
[path addArcWithCenter:CGPointMake(200, 200) radius:100 startAngle:120 endAngle:180 clockwise:YES];
Arc_YES.png
拓展
修改线的颜色
UIColor *color = [UIColor redColor];
[color set];//修改线和填充颜色
[color setFill];//修改填充颜色
[color setStroke];//修改线的颜色
如果想要线条颜色和填充的颜色不同,可以再次创建一个新的color。
网友评论