[英]How to Draw a Bezier Curve in UIView
要在特定CGSize
繪制實心填充弧,您可以定義UIBezierPath
如下所示:
- (UIBezierPath * _Nullable)pathOfArcWithinSize:(CGSize)size {
if (size.width == 0 || size.height <= 0) return nil;
CGFloat theta = M_PI - atan2(size.width / 2.0, size.height) * 2.0;
CGFloat radius = self.bounds.size.height / (1.0 - cos(theta));
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(0, 0)];
[path addArcWithCenter:CGPointMake(size.width / 2.0, -radius + size.height) radius:radius startAngle:M_PI_2 + theta endAngle:M_PI_2 - theta clockwise:false];
[path closePath];
return path;
}
這只是使用一個小三角法來計算給定視圖高度和寬度的弧的角度和半徑。
一旦你有了這個,你可以使用該路徑構造一個CAShapeLayer
,然后將其添加為UIView
的子層,或者你可以實現自己的drawRect
方法,該方法調用該路徑上的fill
。 (或者,鑒於您已使用核心圖形標記了此內容,您還可以使用CoreGraphics調用執行自定義drawRect
,但我不確定您為什么這樣做。)
例如,您可以定義使用CAShapeLayer
的CurvedView
類:
// CurvedView.h
#import <UIKit/UIKit.h>
IB_DESIGNABLE
@interface CurvedView : UIView
@property (nonatomic, strong) IBInspectable UIColor *fillColor;
@end
和
// CurvedView.m
#import "CurvedView.h"
@interface CurvedView ()
@property (nonatomic, weak) CAShapeLayer *curvedLayer;
@end
@implementation CurvedView
- (instancetype)initWithFrame:(CGRect)frame {
self = [super initWithFrame:frame];
if (self) {
[self configureView];
}
return self;
}
- (instancetype _Nullable)initWithCoder:(NSCoder *)coder {
self = [super initWithCoder:coder];
if (self) {
[self configureView];
}
return self;
}
- (void)configureView {
self.fillColor = [UIColor whiteColor];
CAShapeLayer *layer = [CAShapeLayer layer];
layer.fillColor = self.fillColor.CGColor;
layer.strokeColor = [UIColor clearColor].CGColor;
layer.lineWidth = 0;
[self.layer addSublayer:layer];
self.curvedLayer = layer;
}
- (void)setFillColor:(UIColor *)fillColor {
_fillColor = fillColor;
self.curvedLayer.fillColor = fillColor.CGColor;
}
- (void)layoutSubviews {
[super layoutSubviews];
self.curvedLayer.path = [self pathOfArcWithinSize:self.bounds.size].CGPath;
}
- (UIBezierPath * _Nullable)pathOfArcWithinSize:(CGSize)size {
if (size.width == 0 || size.height <= 0) return nil;
CGFloat theta = M_PI - atan2(size.width / 2.0, size.height) * 2.0;
CGFloat radius = self.bounds.size.height / (1.0 - cos(theta));
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(0, 0)];
[path addArcWithCenter:CGPointMake(size.width / 2.0, -radius + size.height) radius:radius startAngle:M_PI_2 + theta endAngle:M_PI_2 - theta clockwise:false];
[path closePath];
return path;
}
@end
產量:
或者,如果您更願意使用drawRect
方法而不是使用CAShapeLayer
:
// CurvedView.m
#import "CurvedView.h"
@implementation CurvedView
- (instancetype)initWithFrame:(CGRect)frame {
self = [super initWithFrame:frame];
if (self) {
[self configureView];
}
return self;
}
- (instancetype _Nullable)initWithCoder:(NSCoder *)coder {
self = [super initWithCoder:coder];
if (self) {
[self configureView];
}
return self;
}
- (void)configureView {
self.fillColor = [UIColor whiteColor];
}
- (void)setFillColor:(UIColor *)fillColor {
_fillColor = fillColor;
[self setNeedsDisplay];
}
- (void)drawRect:(CGRect)rect {
UIBezierPath *path = [self pathOfArcWithinSize:self.bounds.size];
[self.fillColor setFill];
[path fill];
}
- (UIBezierPath * _Nullable)pathOfArcWithinSize:(CGSize)size {
if (size.width == 0 || size.height <= 0) return nil;
CGFloat theta = M_PI - atan2(size.width / 2.0, size.height) * 2.0;
CGFloat radius = self.bounds.size.height / (1.0 - cos(theta));
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(0, 0)];
[path addArcWithCenter:CGPointMake(size.width / 2.0, -radius + size.height) radius:radius startAngle:M_PI_2 + theta endAngle:M_PI_2 - theta clockwise:false];
[path closePath];
return path;
}
@end
如果希望弧占據視圖的底部,則路徑將如下所示:
- (UIBezierPath * _Nullable)pathOfArcWithinSize:(CGSize)size {
if (size.width == 0 || size.height <= 0) return nil;
CGFloat theta = M_PI - atan2(size.width / 2.0, size.height) * 2.0;
CGFloat radius = self.bounds.size.height / (1.0 - cos(theta));
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(0, size.height)];
[path addArcWithCenter:CGPointMake(size.width / 2.0, radius) radius:radius startAngle:M_PI_2 * 3.0 + theta endAngle:M_PI_2 * 3.0 - theta clockwise:false];
[path closePath];
return path;
}
基本上,這是相同的theta
和radius
,但從左下角開始,將center
設置為size.width / 2.0, radius
和arc來自M_PI_2 * 3.0
± theta
:
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.