1.1 圓中三角形
- (void)drawRect:(CGRect)rect{
CGRect inFrame = CGRectMake(50, 50, 100, 100);
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(ctx, 1);
CGContextAddEllipseInRect(ctx, inFrame);
CGContextMoveToPoint(ctx, CGRectGetMidX(inFrame), CGRectGetMinY(inFrame));
CGContextAddLineToPoint(ctx, CGRectGetMinX(inFrame), CGRectGetMidY(inFrame));
CGContextAddLineToPoint(ctx, CGRectGetMaxX(inFrame), CGRectGetMidY(inFrame));
CGContextAddLineToPoint(ctx, CGRectGetMidX(inFrame), CGRectGetMinY(inFrame));
CGContextStrokePath(ctx);
}
效果如圖1.1
圖1.1
1.2 單純畫圓
- (void)drawRect:(CGRect)rect{
CGRect inFrame = CGRectMake(50, 50, 100, 100);
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(ctx, 1);
CGContextAddEllipseInRect(ctx, inFrame);
CGContextStrokePath(ctx);
}
// 單純畫圓
1.3 圓中直線
- (void)drawRect:(CGRect)rect{
CGRect inFrame = CGRectMake(50, 50, 100, 100);
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(ctx, 1);
CGContextAddEllipseInRect(ctx, inFrame);
CGContextAddLineToPoint(ctx, CGRectGetMinX(inFrame), CGRectGetMidY(inFrame));
CGContextStrokePath(ctx);
}
如圖1.3
圖1.3
1.4 直線 ,如圖1.4
// 一條直線
- (void)drawRect:(CGRect)rect {
UIColor *color = [UIColor redColor];
[color set]; //設置線條顏色
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(30, 30)];
//moveToPoint:這個方法是設置起始點
[path addLineToPoint:CGPointMake(200, 80)];
path.lineWidth = 10.0;
path.lineCapStyle = kCGLineCapRound; //線條拐角
path.lineJoinStyle = kCGLineJoinBevel; //終點處理
[path stroke]; //Draws line 根據坐標點連線
}
直線
1.5 多邊形 如圖1.5
// 多邊形
- (void)drawRect:(CGRect)rect {
UIColor *color = [UIColor redColor];
[color set]; //設置線條顏色
UIBezierPath* path = [UIBezierPath bezierPath];
path.lineWidth = 5.0;
path.lineCapStyle = kCGLineCapRound; //線條拐角
path.lineJoinStyle = kCGLineJoinRound; //終點處理
[path moveToPoint:CGPointMake(200.0, 50.0)];//起點
// Draw the lines
[path addLineToPoint:CGPointMake(300.0, 100.0)];
[path addLineToPoint:CGPointMake(260, 200)];
[path addLineToPoint:CGPointMake(100.0, 200)];
[path addLineToPoint:CGPointMake(100, 70.0)];
[path closePath];//第五條線通過調用closePath方法得到的
[path stroke];//Draws line 根據坐標點連線
// [path fill];//顏色填充
}
// 注： [path addLineToPoint:CGPointMake(, )]; 設置好起點之后會依次連線，fill方法是填充整個線條包含的面積的顏色
圖1.5
1.6 矩形 代碼如下渤早，如圖1.6
// 矩形
- (void)drawRect:(CGRect)rect {
UIColor *color = [UIColor redColor];
[color set]; //設置線條顏色
UIBezierPath* path = [UIBezierPath bezierPathWithRect:CGRectMake(30, 50, 100, 80)];
path.lineWidth = 5.0;
path.lineCapStyle = kCGLineCapRound; //線條拐角
path.lineJoinStyle = kCGLineJoinRound; //終點處理
[path stroke];
}
圖1.6
1.7 圓形或者橢圓形 代碼如下 圖形如圖1.7
使用+ (UIBezierPath *)bezierPathWithOvalInRect:(CGRect)rect這個方法創(chuàng)建圓形或者橢圓形职车。
傳入的rect矩形參數繪制一個內切曲線，如果我們傳入的rect是矩形就得到矩形的內切橢圓鹊杖，如果傳入的是 正方形得到的就是正方形的內切圓悴灵。
- (void)drawRect:(CGRect)rect {
UIColor *color = [UIColor redColor];
[color set];
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(100, 100) radius:90 startAngle:0 endAngle:2*M_PI clockwise:YES];
path.lineWidth = 5.0;
path.lineCapStyle = kCGLineCapRound;
path.lineJoinStyle = kCGLineJoinRound;
[path stroke];
}
/*ArcCenter: 原點
radius: 半徑
startAngle: 開始角度
endAngle: 結束角度
clockwise: 是否順時針方向 */
圓形或者橢圓形
參考系如下圖
參考系
1.8 矩形拐角圓角,代碼如下，圖形如圖1.8
- (void)drawRect:(CGRect)rect {
UIColor *color = [UIColor redColor];
[color set];
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, 100, 100) byRoundingCorners:UIRectCornerTopRight cornerRadii:CGSizeMake(20, 20)];
path.lineCapStyle = kCGLineCapRound;
path.lineJoinStyle = kCGLineJoinRound;
path.lineWidth = 5.0;
[path stroke];
}
圖1.8
以上是在view的drawRect方法里繪制圖形骂蓖，下面介紹在控制器中直接繪制的方法
@property (strong, nonatomic) CAShapeLayer *shapeLayer;
- (void)viewDidLoad {
[super viewDidLoad];
[self setupCirclePath]; // 畫圓并填充顏色
}
// 2.1 畫圓并填充顏色 如圖 2.1
- (void)setupCirclePath {
// 創(chuàng)建出CAShapeLayer
self.shapeLayer = [CAShapeLayer layer];
self.shapeLayer.frame = CGRectMake(0, 0, 200, 200);//設置shapeLayer的尺寸和位置
self.shapeLayer.position = self.view.center;
self.shapeLayer.fillColor = [UIColor yellowColor].CGColor;//填充顏色為ClearColor
//設置線條的寬度和顏色
self.shapeLayer.lineWidth = 1.0f;
self.shapeLayer.strokeColor = [UIColor redColor].CGColor;
//創(chuàng)建出圓形貝塞爾曲線
UIBezierPath *circlePath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 200, 200)];
//讓貝塞爾曲線與CAShapeLayer產生聯系
self.shapeLayer.path = circlePath.CGPath;
//添加并顯示
[self.view.layer addSublayer:self.shapeLayer];
}
圖2.1
2.2 畫兩個圓形 积瞒，可作為進度條, 如圖2.2
-(void)createBezierPath:(CGRect)mybound
{
//外圓
_trackPath = [UIBezierPath bezierPathWithArcCenter:self.view.center radius:(mybound.size.width - 0.7)/ 2 startAngle:0 endAngle:M_PI * 2 clockwise:YES];;
_trackLayer = [CAShapeLayer new];
[self.view.layer addSublayer:_trackLayer];
_trackLayer.fillColor = nil;
_trackLayer.strokeColor=[UIColor grayColor].CGColor;
_trackLayer.path = _trackPath.CGPath;
_trackLayer.lineWidth=5;
_trackLayer.frame = mybound;
//內圓
_progressPath = [UIBezierPath bezierPathWithArcCenter:self.view.center radius:(mybound.size.width - 0.7)/ 2 startAngle:- M_PI_2 endAngle:(M_PI * 2) * 0.7 - M_PI_2 clockwise:YES];
_progressLayer = [CAShapeLayer new];
[self.view.layer addSublayer:_progressLayer];
_progressLayer.fillColor = nil;
_progressLayer.strokeColor=[UIColor redColor].CGColor;
_progressLayer.lineCap = kCALineCapRound;
_progressLayer.path = _progressPath.CGPath;
_progressLayer.lineWidth=5;
_progressLayer.frame = mybound;
}
圖2.2
3.1 加蒙層，挖去一部分露出下面view 如圖3.1
圖3.1
#import <UIKit/UIKit.h>
typedef void(^GuideViewCloseBlock)();
@interface JFGuideView : UIView
@property (nonatomic,copy)GuideViewCloseBlock closeBlock;
- (instancetype)initWithFrame:(CGRect)frame textWidth:(CGFloat)textWidth;
@end
#import "JFGuideView.h"
@interface JFGuideView() {
UIView *_integralView;
UIButton *_OkButton;
}
@end
@implementation JFGuideView {
CGFloat _textWidth;
}
- (instancetype)initWithFrame:(CGRect)frame textWidth:(CGFloat)textWidth {
if (self = [super initWithFrame:frame]) {
_textWidth = textWidth;
[self setupView];
}
return self;
}
- (void)setupView {
self.backgroundColor = kClearColor;
UIView *bgView = [[UIView alloc] initWithFrame:self.bounds];
bgView.backgroundColor = kRGBA(0, 0, 0, 0.6);
[self addSubview:bgView];
UIBezierPath *path = [UIBezierPath bezierPathWithRect:self.bounds];
CGFloat width = MAX(_textWidth, kAppAdaptWidth(62)) + kAppAdaptWidth(50);
CGRect whiteFrame = CGRectMake((self.width - width) / 2, kAppAdaptHeight(90), width, kAppAdaptHeight(54));
[path appendPath:[[UIBezierPath bezierPathWithRoundedRect:whiteFrame cornerRadius:5.0] bezierPathByReversingPath]];
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.path = path.CGPath;
bgView.layer.mask = shapeLayer;
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
button.frame = CGRectMake(0, kDeviceHeight - kAppAdaptHeight(112 + 44), kAppAdaptWidth(102), kAppAdaptHeight(44));
button.centerX = self.width / 2;
button.backgroundColor = kClearColor;
[self addSubview:button];
[button.layer setCornerRadius:kAppAdaptWidth(3.5)];
[button.layer setBorderColor:kWhiteColor.CGColor];
[button.layer setBorderWidth:2];
[button setTitle:@"我知道了" forState:UIControlStateNormal];
button.titleLabel.font = kAppFontBold(15);
[button setTitleColor:kWhiteColor forState:UIControlStateNormal];
[button addTarget:self action:@selector(dismissView) forControlEvents:UIControlEventTouchUpInside];
UIImageView *tapImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"double-tap"]];
tapImageView.frame = CGRectMake(CGRectGetMaxX(whiteFrame) - kAppAdaptWidth(30), kAppAdaptHeight(128), kAppAdaptWidth(44), kAppAdaptHeight(45.5));
[self addSubview:tapImageView];
UIImageView *textImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"coin"]];
textImageView.frame = CGRectMake(kAppAdaptWidth(225), kAppAdaptHeight(53), kAppAdaptWidth(120), kAppAdaptHeight(38));
[self addSubview:textImageView];
}
// 移除view
- (void)dismissView {
[self removeFromSuperview];
if (_closeBlock) {
_closeBlock();
}
}
