内切弧度圆

#代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
#import "CircleView.h"

static CGFloat DOU = 1 / 7.0;

@implementation CircleView

- (instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        _overRatio = DOU;
        _space = 2;
    }
    return self;
}

- (void)setDatas:(NSArray *)datas {
    _datas = datas;
    [self updateDatas];
}

- (void)setFrame:(CGRect)frame {
    [super setFrame:frame];
    [self updateDatas];
}

- (void)updateDatas {
    for (UIView *view in self.subviews) {
        [view removeFromSuperview];
    }
    switch (self.datas.count) {
        case 0:
            break;
        case 1:
            [self doOneImage];
            break;
        case 2:
            [self doTwoImage];
            break;
        case 3:
            [self doThreeImage];
            break;
        case 4:
            [self doFourImage];
            break;
        default:
            [self doFourImage];
            break;
    }
}

- (void)doOneImage {
    UIImage *image1 = [UIImage imageNamed:self.datas[0]];
    UIImageView *imageView = [self imageViewWithImage:image1 width: self.bounds.size.width];
    imageView.frame = self.bounds;
}

- (void)doTwoImage {
    UIImage *image1 = [UIImage imageNamed:self.datas[0]];
    UIImage *image2 = [UIImage imageNamed:self.datas[1]];
    CGFloat width = self.bounds.size.width / (1 + (1 - self.overRatio) * sin(M_PI_4));
    
    UIImageView *imageView1  = [self imageViewWithImage:image1 width:width];
    imageView1.frame = CGRectMake(self.frame.size.width - width, self.frame.size.width - width, width, width);
    
    UIBezierPath *path1 = [UIBezierPath bezierPath];
    [path1 moveToPoint:CGPointMake(width / 2.0, 0)];
    CGFloat offset = width / 2.0 - (width  * (1 - self.overRatio)) * sin(M_PI_4);
    [path1 addArcWithCenter:CGPointMake(offset, offset) radius:width / 2.0 + self.space startAngle:-M_PI_4 endAngle:M_PI_2 + M_PI_4 clockwise:YES];
    [path1 addLineToPoint:CGPointMake(0, width / 2.0)];
    [path1 addLineToPoint:CGPointMake(0, width)];
    [path1 addLineToPoint:CGPointMake(width, width)];
    [path1 addLineToPoint:CGPointMake(width , 0)];
    [path1 closePath];
    imageView1.layer.mask = [self layerWithPath:path1];
    
    UIImageView *imageView2 = [UIImageView new];
    imageView2.backgroundColor = [UIColor grayColor];
    imageView2.image = image2;
    imageView2.frame = CGRectMake(0, 0, width, width);
    imageView2.layer.masksToBounds = YES;
    imageView2.layer.cornerRadius = width / 2.0;
    [self addSubview:imageView2];
}

- (void)doThreeImage {
    UIImage *image1 = [UIImage imageNamed:self.datas[0]];
    UIImage *image2 = [UIImage imageNamed:self.datas[1]];
    UIImage *image3 = [UIImage imageNamed:self.datas[2]];
    
    CGFloat width = self.bounds.size.width / (1 + (1 - self.overRatio));
    CGFloat radius = width / 2.0 + self.space;
    UIImageView *imageView1  = [self imageViewWithImage:image1 width:width];
    imageView1.frame = CGRectMake((self.frame.size.width - width) / 2.0, self.frame.size.height - width - (width * (1 - self.overRatio) * sin(M_PI / 3.0)), width, width);
    
    UIBezierPath *path1 = [UIBezierPath bezierPath];
    [path1 moveToPoint:CGPointMake(0, 0)];
    [path1 addLineToPoint:CGPointMake(0, width)];
    CGFloat offsetY = (width  * (1 - self.overRatio)) * sin(M_PI / 3.0) + width / 2.0;
    CGFloat offsetX =  width / 2.0 - (width  * (1 - self.overRatio)) * sin(M_PI / 6.0);
    [path1 addArcWithCenter:CGPointMake(offsetX, offsetY) radius:radius startAngle:M_PI + M_PI_2 - M_PI_4 endAngle:M_PI + M_PI + M_PI_4 clockwise:YES];
    [path1 addLineToPoint:CGPointMake(width, width)];
    [path1 addLineToPoint:CGPointMake(width , 0)];
    [path1 closePath];
    imageView1.layer.mask = [self layerWithPath:path1];
    
    
    UIImageView *imageView2 = [self imageViewWithImage:image2 width:width];
    imageView2.frame = CGRectMake(0, self.frame.size.height - width, width, width);

    UIBezierPath *path2 = [UIBezierPath bezierPath];
    [path2 moveToPoint:CGPointMake(0, 0)];
    [path2 addLineToPoint:CGPointMake(0 , width)];
    [path2 addLineToPoint:CGPointMake(width, width)];
    CGFloat offsetY2 =  width / 2.0;
    CGFloat offsetX2 =  width  * (1 - self.overRatio) + width / 2.0;
    [path2 addArcWithCenter:CGPointMake(offsetX2, offsetY2) radius:radius  startAngle:M_PI - M_PI_2 endAngle: M_PI + M_PI_2 clockwise:YES];
    
    [path2 addLineToPoint:CGPointMake(width , 0)];
    [path2 addLineToPoint:CGPointMake(0 , 0)];
    [path2 closePath];
    imageView2.layer.mask = [self layerWithPath:path2];


    UIImageView *imageView3 = [self imageViewWithImage:image3 width:width];
    imageView3.frame = CGRectMake(self.frame.size.width - width, self.frame.size.height - width, width, width);

    
    UIBezierPath *path3 = [UIBezierPath bezierPath];
    [path3 moveToPoint:CGPointMake(width, width)];
    [path3 addLineToPoint:CGPointMake(width , 0)];
    CGFloat offsetY3 = width / 2.0 - (width  * (1 - self.overRatio)) * sin(M_PI / 3.0);
    CGFloat offsetX3 =  width / 2.0 - (width  * (1 - self.overRatio)) * sin(M_PI / 6.0);
    [path3 addArcWithCenter:CGPointMake(offsetX3, offsetY3) radius:radius  startAngle:M_PI / 4.0  - M_PI_2 endAngle:M_PI / 4.0 + M_PI_2 clockwise:YES];
    [path3 addLineToPoint:CGPointMake(0, width)];
    [path3 moveToPoint:CGPointMake(width, width)];
    [path3 closePath];
    imageView3.layer.mask = [self layerWithPath:path3];
}

- (void)doFourImage {
    UIImage *image1 = [UIImage imageNamed:self.datas[0]];
    UIImage *image2 = [UIImage imageNamed:self.datas[1]];
    UIImage *image3 = [UIImage imageNamed:self.datas[2]];
    UIImage *image4 = [UIImage imageNamed:self.datas[3]];
    
    CGFloat width = self.bounds.size.width / (1 + (1 - self.overRatio));
    CGFloat radius = width / 2.0 + self.space;
    
    UIImageView *imageView1  = [self imageViewWithImage:image1 width:width];
    imageView1.frame = CGRectMake(0, 0, width, width);
    
    UIBezierPath *path1 = [UIBezierPath bezierPath];
    [path1 moveToPoint:CGPointMake(0, 0)];
    [path1 addLineToPoint:CGPointMake(0, width)];
    CGFloat offsetY = (width  * (1 - self.overRatio)) + width / 2.0;
    CGFloat offsetX =  width / 2.0;
    [path1 addArcWithCenter:CGPointMake(offsetX, offsetY) radius:radius startAngle:M_PI endAngle:M_PI * 2 clockwise:YES];
    [path1 addLineToPoint:CGPointMake(width, width)];
    [path1 addLineToPoint:CGPointMake(width , 0)];
    [path1 closePath];
    imageView1.layer.mask = [self layerWithPath:path1];
    
    
    UIImageView *imageView2 = [self imageViewWithImage:image2 width:width];
    imageView2.frame = CGRectMake(0, self.frame.size.height - width, width, width);
    
    UIBezierPath *path2 = [UIBezierPath bezierPath];
    [path2 moveToPoint:CGPointMake(0, 0)];
    [path2 addLineToPoint:CGPointMake(0 , width)];
    [path2 addLineToPoint:CGPointMake(width, width)];
    CGFloat offsetY2 =  width / 2.0;
    CGFloat offsetX2 =  width  * (1 - self.overRatio) + width / 2.0;
    [path2 addArcWithCenter:CGPointMake(offsetX2, offsetY2) radius:radius startAngle:M_PI - M_PI_2 endAngle: M_PI + M_PI_2 clockwise:YES];
    
    [path2 addLineToPoint:CGPointMake(width , 0)];
    [path2 addLineToPoint:CGPointMake(0 , 0)];
    [path2 closePath];
    imageView2.layer.mask = [self layerWithPath:path2];
    
    
    UIImageView *imageView3 = [self imageViewWithImage:image3 width:width];
    imageView3.frame = CGRectMake(self.frame.size.width - width, self.frame.size.height - width, width, width);
    
    UIBezierPath *path3 = [UIBezierPath bezierPath];
    [path3 moveToPoint:CGPointMake(width, width)];
    [path3 addLineToPoint:CGPointMake(width , 0)];
    CGFloat offsetY3 = width / 2.0 - (width  * (1 - self.overRatio));
    CGFloat offsetX3 =  width / 2.0;
    [path3 addArcWithCenter:CGPointMake(offsetX3, offsetY3) radius:radius startAngle:0   endAngle:M_PI clockwise:YES];
    [path3 addLineToPoint:CGPointMake(0, 0)];
    [path3 addLineToPoint:CGPointMake(0, width)];
    [path3 closePath];
    imageView3.layer.mask = [self layerWithPath:path3];
    
    
    UIImageView *imageView4 = [self imageViewWithImage:image4 width:width];
    imageView4.frame = CGRectMake(self.frame.size.width - width, 0, width, width);
    
    UIBezierPath *path4 = [UIBezierPath bezierPath];
    [path4 moveToPoint:CGPointMake(width, width)];
    [path4 addLineToPoint:CGPointMake(width , 0)];
    [path4 addLineToPoint:CGPointMake(0, 0)];
    CGFloat offsetY4 = width / 2.0;
    CGFloat offsetX4 = width / 2.0 - width  * (1 - self.overRatio);
    [path4 addArcWithCenter:CGPointMake(offsetX4, offsetY4) radius:radius startAngle:M_PI * 2 - M_PI_2 endAngle:M_PI * 2 + M_PI_2 clockwise:YES];
    [path4 addLineToPoint:CGPointMake(0 , width)];
    [path4 closePath];
    imageView4.layer.mask = [self layerWithPath:path4];
}

- (CAShapeLayer *)layerWithPath:(UIBezierPath *)path {
    CAShapeLayer *layer = [CAShapeLayer layer];
    [layer setPath:path.CGPath];
    [layer setFillColor:[UIColor whiteColor].CGColor];
    [layer setStrokeColor:[UIColor whiteColor].CGColor];
    return layer;
}

- (UIImageView *)imageViewWithImage:(UIImage *)image width:(CGFloat)width {
    UIImageView *imageView = [UIImageView new];
    imageView.backgroundColor = [UIColor grayColor];
    imageView.image = image;
    imageView.layer.masksToBounds = YES;
    imageView.layer.cornerRadius = width / 2.0;
    [self addSubview:imageView];
    return imageView;
}

@end

#使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor  whiteColor];
    [self.view addSubview:self.circleView1];
    self.circleView1.frame = CGRectMake([UIScreen mainScreen].bounds.size.width / 2 - 80, [UIScreen mainScreen].bounds.size.height / 2 - 80, 60, 60);
    self.circleView1.datas = @[@"ic_setting"];
    
    [self.view addSubview:self.circleView2];
    self.circleView2.frame = CGRectMake([UIScreen mainScreen].bounds.size.width / 2 - 80, [UIScreen mainScreen].bounds.size.height / 2 + 20, 60, 60);
    self.circleView2.datas = @[@"ic_setting", @"ic_setting"];
    
    [self.view addSubview:self.circleView3];
    self.circleView3.frame = CGRectMake([UIScreen mainScreen].bounds.size.width / 2 + 20, [UIScreen mainScreen].bounds.size.height / 2 - 80, 60, 60);
    self.circleView3.datas = @[@"ic_setting", @"ic_setting", @"ic_setting"];
    
    [self.view addSubview:self.circleView4];
    self.circleView4.frame = CGRectMake([UIScreen mainScreen].bounds.size.width / 2 + 20, [UIScreen mainScreen].bounds.size.height / 2 + 20, 60, 60);
    self.circleView4.datas = @[@"ic_setting", @"ic_setting", @"ic_setting", @"ic_setting"];
}

效果图
alt 效果图