iOS如何简单实现绘制爱心?

发表于 | 更新于: |
字数统计: 447 字 | 阅读时长 ≈ 2 分钟

灵感来源于前端CSS画红心的原理 参考

上代码

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

#import <UIKit/UIKit.h>
/**
    灵感来自于前端CSS画红心的原理: 一个正方形 + 两个圆 + 整体旋转一定的角度
*/

NS_ASSUME_NONNULL_BEGIN
IB_DESIGNABLE
@interface WGBHeartView : UIView
//❤心有多大?
@property (nonatomic,assign) IBInspectable CGFloat heartSize;
//❤心的颜色?
@property (nonatomic,strong) IBInspectable UIColor *heartColor;
@end
NS_ASSUME_NONNULL_END


#import "WGBHeartView.h"

@interface WGBHeartView()

@property (nonatomic,strong) UIView *bottomView;
@property (nonatomic,strong) UIView *leftView;
@property (nonatomic,strong) UIView *rightView;

@end

@implementation WGBHeartView

- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        [self initConfig];
    }
    return self;
}

- (instancetype)initWithCoder:(NSCoder *)coder
{
    self = [super initWithCoder:coder];
    if (self) {
        [self initConfig];
    }
    return self;
}

- (void)initConfig{
        //默认值
    self.heartSize = 150.0;
    self.heartColor = [UIColor redColor];
    [self addSubview: self.bottomView];
    [self addSubview: self.leftView];
    [self addSubview: self.rightView];
    //提前旋转45度
    self.transform = CGAffineTransformMakeRotation(M_PI_4);
}

//去除设置背景色 
- (void)setBackgroundColor:(UIColor *)backgroundColor{
    backgroundColor = [UIColor clearColor];
    [super setBackgroundColor:backgroundColor];
}

- (void)setHeartSize:(CGFloat)heartSize{
    _heartSize = heartSize;
    CGFloat partSize = heartSize/3.0;
    self.bottomView.frame = CGRectMake(partSize, partSize, partSize*2 , partSize*2);
    self.leftView.frame = CGRectMake(0, partSize, partSize*2 , partSize*2);
    self.rightView.frame = CGRectMake(partSize, 0, partSize*2 , partSize*2);
    
    self.leftView.layer.cornerRadius = partSize;
    self.rightView.layer.cornerRadius = partSize;
}

- (void)setHeartColor:(UIColor *)heartColor{
    _heartColor = heartColor;
    self.bottomView.backgroundColor = heartColor;
    self.leftView.backgroundColor = heartColor;
    self.rightView.backgroundColor = heartColor;
}

    ///MARK:- lazy load
- (UIView *)bottomView{
    if (!_bottomView) {
        _bottomView = [[UIView alloc] initWithFrame:CGRectZero];
        [self addSubview:_bottomView];
    }
    return _bottomView;
}
- (UIView *)leftView{
    if (!_leftView) {
        _leftView = [[UIView alloc] initWithFrame:CGRectZero];
        [self addSubview:_leftView];
    }
    return _leftView;
}

- (UIView *)rightView{
    if (!_rightView) {
        _rightView = [[UIView alloc] initWithFrame:CGRectZero];
        [self addSubview:_rightView];
    }
    return _rightView;
}

@end

IB设置的过程

简单调用如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
WGBHeartView *heartView = [[WGBHeartView alloc] initWithFrame:CGRectMake(100, 100, 100 , 100)];
heartView.heartColor = [UIColor blackColor];//默认颜色是红色
heartView.heartSize = 100; //这个尺寸最好是设置与视图宽高一致 生成的爱心❤️比较规则
[self.view addSubview: heartView];

for (NSInteger i = 0; i < 6; i += 1) {
    CGFloat heartWH = 50.0f;
    CGFloat margin = 15.0f;
    WGBHeartView *heartItemView = [[WGBHeartView alloc] initWithFrame:CGRectMake(20 + (heartWH+margin)*i,   250, heartWH , heartWH)];
    heartItemView.heartColor = [UIColor colorWithRed:arc4random()%256/255.0f green:arc4random()%256/255.0f  blue:arc4random()%256/255.0f alpha:1.0f];
    heartItemView.heartSize = heartWH;
    [self.view addSubview: heartItemView];
}